I am getting problems with building my Angular JS project.
It says
Failed to instantiate module ngAnimate due to:
I have put all my services into [] but the ngAnimate is not working.
Here is the app
Failed to instantiate module ngAnimate due to:'use strict';
/* global app:true */
var app = angular
.module('angNewsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ngAnimate',
'firebase'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.when('/posts/:postId', {
templateUrl: 'views/showpost.html',
controller: 'ViewPostCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
.constant('FIREBASE_URL', 'https://scorching-fire-4068.firebaseio.com/');
app.directive('post', function() {
var controller = function($scope) {
$scope.showAnswer = false;
};
return {
restrict: 'C',
scope: false,
controller: controller
};
});
app.animation('.answer-animation', function(){
CSSPlugin.defaultTransformPerspective = 1000;
TweenMax.set($("div.back"), {rotationX:-180});
$.each($("div.box"), function(i,element)
{
console.log(element);
var frontCard = $(this).children("div.front")
var backCard = $(this).children("div.back")
var tl = new TimelineMax({paused:true})
tl
.to(frontCard, 1, {rotationX:180})
.to(backCard, 1, {rotationX:0},0)
this.animation = tl;
});
return {
beforeAddClass: function(element, className, done){
if (className == 'answer') {
var el = element.find('.box')[0];
el.animation.play();
}
else {
done();
}
},
beforeRemoveClass: function(element, className, done) {
if (className == 'answer') {
var el = element.find('.box')[0];
el.animation.reverse();
}
else {
done();
}
}
};
});
And the index.html script tags
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>
<script src="scripts/app.js"></script>
<script src='scripts/services/posts.js'></script>
<script src="scripts/filters/url.js"></script>
<script src="scripts/controllers/posts.js"></script>
<script src="scripts/controllers/postview.js"></script>
<script src="scripts/controllers/nav.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
<!-- endbuild -->
Ok so this is the answer,
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
Were both external library loads, which meant they couldn't go through the minification process.
I solved this by installing the libs through bower, and adding them like it.
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/greensock/src/minified/TweenMax.min.js"></script>
Just adding this in case it helps someone else!
I had the same problem but my cause was that I had the src in the script tag for angular-animate incorrect - I'd pasted bower_components/angular/angular-animate.js not the correct reference which was:
<script src="bower_components/angular-animate/angular-animate.js"></script>
Related
I'm trying to use Angular UI modal, but I keep getting an unknown provider error message: "Error: [$injector:unpr]".
I use custom build to minimize the overall size of the file. I have injected the ui dependency in the app when creating it. The build files are added to the index.html page.
//This is the app.js file
(function() {
angular.module('locatorApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: '/common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationid', {
templateUrl: '/locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
angular
.module('locatorApp')
.config(['$routeProvider', '$locationProvider', config]);
})();
//This is the controller file
(function() {
angular
.module('locatorApp')
.controller('locationDetailCtrl', locationDetailCtrl);
/*Inject $routeParams service into controller to protect from minification*/
locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'locatorData'];
function locationDetailCtrl($routeParams, $uibModal, locatorData) {
var vm = this;
vm.locationid = $routeParams.locationid;
locatorData.locationById(vm.locationid)
.success(function(data) {
vm.data = {
location: data
};
vm.pageHeader = {
title: vm.data.location.name
};
})
.error(function(e) {
console.log(e);
});
vm.popupReviewForm = function() {
alert("Let's add a review");
};
}
})();
<!-- This is the index.html file-->
<!DOCTYPE html>
<html ng-app="locatorApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocatoR</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body ng-view>
<script src="/angular/angular.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
<script src="/angular/locator.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/
jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/javascripts/validation.js"></script>
</body>
</html>
//This is the locatorData service
(function() {
/*Data service for pulling data from the API*/
locatorData.$inject = ['$http'];
function locatorData($http) {
var locationByCoords = function(lat, lng) {
return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxdist=20');
};
var locationById = function(locationid) {
return $http.get('/api/locations/' + locationid);
};
return {
locationByCoords: locationByCoords,
locationById: locationById
};
};
angular
.module('locatorApp')
.service('locatorData', locatorData);
})();
you should use ng-view on a div inside <body>, so script tags will exist after route template is substituted. Then it would be better to reorganize order of script tags you are adding.
At first non-angular script files, then angular, then your sources
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/javascripts/validation.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/angular/angular.min.js"></script>
<script src="/angular/locator.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
Then use $uibModal service that you've injected:
vm.popupReviewForm = function() {
$uibModal.open({
template: '...html',
//...config from docs
}).then(function(){console.log('closed successfully');})
.catch(function(){console.log('dismissed modal');});
};
Move your script tag either to below of head tag.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocatoR</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
// Scripts
</head>
or, outside the ng-view :
<body>
<div ng-view></div>
// scripts here
</body>
Ok, I've finally figured it out. The problem was using incompatible versions of Angular JS and Angular UI.
app.js
(function(){
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home/home.html',
controllerAs: 'vm'
})
}
})();
home.controller.js
(function () {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {
$rootScope.bodylayout ='main_page_que';
var vm = this;
}
})();
home.js
var app = angular.module('app', []);
app.controller('RedCtrl', function($scope) {
$scope.OpenRed = function() {
$scope.userRed = !$scope.userRed;
$scope.userBlue = false;
}
$scope.HideRed = function() {
$scope.userRed = false;
}
$scope.OpenBlue = function() {
$scope.userBlue = !$scope.userBlue;
$scope.userRed = false;
};
$scope.HideBlue = function() {
$scope.userBlue = false;
};
});
home.html
<div ng-controller="RedCtrl">
Show Red
<div hide-red="HideRed()" class="loginBox" ng-show="userRed"></div>
Show Blue
<div hide-blue="HideBlue()" class="loginBoxBlue" ng-show="userBlue"></div>
</div>
Index.html
<html lang="pl" ng-app="app">
<body class="{{bodylayout}}">
<div class="content">
<div ng-view style="margin:auto"></div>
</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>
<script src="home.js"></script>
<script src="app.js"></script>
<script src="authentication.service.js"></script>
<script src="flash.service.js"></script>
<script src="user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>
</body>
</html>
Hey, this is part from application when I use ngRoute and dynamically add home.html, but I think I have wrong app.js or home.controller.js beacuse when I add external file home.js (when is ng-controller=""RedCtrl. I get error [$controller:ctrlreg] RedCtrl is not register. Have you ideas why? I am new in Angular and I think the main reason is lack of my knowledge.
You are overwriting app module in home.js thus getting the error
Use
var app = angular.module('app'); //Get previously defined module
instead of
var app = angular.module('app', []); //It declares new module
You also need to change the sequence of JavaScript files
<script src="app.js"></script>
<script src="home.js"></script>
I'm trying to inject datepickerConfig inside the run phase, but angular says that it's unable to find the provider: Unknown provider: datepickerConfigProvider <- datepickerConfig.
this is the code:
(function () {
angular.module('app', ['ngAnimate', 'ngCookies', 'ngRoute', 'ngSanitize', 'pascalprecht.translate', 'ui.bootstrap', 'ui.select']);
// config phase is omitted, it only configures the i18n async loading
function runFn($translate, datepickerConfig) {
datepickerConfig.currentText = $translate('label.today');
datepickerConfig.clearText = $translate('label.clear');
datepickerConfig.closeText = $translate('label.close');
}
runFn.$inject('$translate', 'datepickerConfig');
angular.module('app').run(runFn);
})();
I also tried to inject datepickerConfig inside the config phase, but angular gave me the same error.
I really can't figure out what is the problem.
In the index.html i have all the .js I need
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
what's wrong?
Thanks
I have searched the internet for howto add google analytics to a ionic project. There are lot of different plugins for cordova ect, but didn't get even one to work. Maybe i'm doing something wrong, hope somebody can help.
What i got now works on the ionic serve --lab option. But not when its installed on the phone. I also didn't got any errors in the console (--lab and Phone). Debug also does not load when connected with inspect. So i'm not sure whats going one here...
Index.html
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova-mocks.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js" ></script>
<script src="js/openfb.js"></script>
<script src="js/ngopenfb.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'js/analytics.js', 'ga');
ga('create', 'XX-XXXXXXX-XX', 'auto');
</script>
</body>
</html>
App.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
},
pageTitle: '[app] Dashboard'
})
Controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function ($rootScope, $scope, $window, $http, FB) {
$rootScope.token = window.localStorage.getItem("token");
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
$window.ga('send', 'pageview', {page: toState.pageTitle})
})
Angulartics is a good library for integrating google analytics with angular. It can be made to work with Ionic in a simple manner. First, add the libraries.
ionic plugin add cordova-plugin-google-analytics --save
bower install angulartics-google-analytics --save
Include angulartics scripts in index.html. The trick is using the (as yet) undocumented angulartics cordova google analytics plugin.
<!-- angulartics -->
<script src="bower_components/angulartics/src/angulartics.js"></script>
<script src="bower_components/angulartics/src/angulartics-ga-cordova-google-analytics-plugin.js"></script>
<!-- angulartics google analytics -->
<script src="bower_components/angulartics-google-analytics/lib/angulartics-ga.js"></script>
Then, in your app.js, include the modules and set the tracking id in config block
angular.module('app', [
'ionic',
// Include angulartics modules
'angulartics',
'angulartics.google.analytics',
'angulartics.google.analytics.cordova'
])
// Add config block
.config(function (googleAnalyticsCordovaProvider) {
googleAnalyticsCordovaProvider.trackingId = "UA-******-*";
})
That's it. It should just work now.
I got it working but i dont think its best practice.
In de Main controller.
function _waitForAnalytics() {
if (window.analytics) {
window.analytics.startTrackerWithId('XX-XXXXXXX-XX');
window.analytics.trackView('Start');
console.log("Analytics success");
} else {
console.log("Analytics not loaded");
setTimeout(function () {
_waitForAnalytics();
}, 10000);
}
}
_waitForAnalytics();
Strange because the device ready should do this.
I'm working on Thinkster.io's Angular Tutorial and was having fun until I ran into a problem in Chapter 4 that I just cannot get past. Every time I try to run a Post or Delete action, I get:
TypeError: undefined is not a function
at Object.Post.create (http://localhost:9000/scripts/services/post.js:12:20)
at Scope.$scope.submitPost (http://localhost:9000/scripts/controllers/posts.js:9:10)
at http://localhost:9000/bower_components/angular/angular.js:10795:21
at http://localhost:9000/bower_components/angular/angular.js:19036:17
at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12632:28)
at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:12730:23)
at HTMLFormElement.<anonymous> (http://localhost:9000/bower_components/angular/angular.js:19035:21)
at HTMLFormElement.jQuery.event.dispatch (http://localhost:9000/bower_components/jquery/dist/jquery.js:4409:9)
at HTMLFormElement.elemData.handle (http://localhost:9000/bower_components/jquery/dist/jquery.js:4095:28)
-
Here's my app/scripts/app.js:
'use strict';
/* global app:true */
/**
* #ngdoc overview
* #name angNewsApp
* #description
* # angNewsApp
*
* Main module of the application.
*/
var app = angular.module('angNewsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'firebase'
])
.constant('FIREBASE_URL', 'https://blazing-fire-1894.firebaseio.com/');
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
-
app/services/post.js:
'use strict';
app.factory('Post',
function ($firebase, FIREBASE_URL) {
var ref = new Firebase(FIREBASE_URL + 'posts');
var posts = $firebase(ref);
var Post = {
all: posts,
create: function (post) {
return posts.$add(post);
},
find: function (postId) {
return posts.$child(postId);
},
delete: function (postId) {
return posts.$remove(postId);
}
};
return Post;
});
-
'app/scripts/controllers/posts.js':
'use strict';
app.controller('PostsCtrl', function ($scope, Post) {
$scope.posts = Post.all;
$scope.post = {url: 'http://', 'title': ''};
$scope.submitPost = function () {
Post.create($scope.post).then(function () {
$scope.post = {url: 'http://', 'title': ''};
});
};
$scope.deletePost = function (postId) {
Post.delete(postId);
};
});
-
app/views/posts.html:
<div ng-repeat='(postId, post) in posts'>
[X]
</div>
<form ng-submit='submitPost()'>
<input type='text' ng-model='post.title' />
<input type='text' ng-model='post.url' />
<input type='submit' value='Add Post' />
</form>
Preview: <a href='{{ post.url }}'>{{ post.title }}</a>
-
and here are the scripts included in app/index.html
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/posts.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/services/post.js"></script>
<!-- endbuild -->
-
Any help would be appreciated!
Since you are expecting the posts to be an array, that you can add/delete items.
You have to change this line:
var posts = $firebase(ref);
to this:
var posts = $firebase(ref).$asArray();
Hope this helps.