MVC4 & AngularJS error when using ngAnimate as a dependency - javascript

I'm new to Angular and dependency injection. I'm receiving the following error on page load. I'm attempting to create a form wizard like this example in .Net/MVC4. Any help is greatly appreciated.
Uncaught Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile
Scripts loading in view head:
<script src="#Url.Content("/Scripts/bower_components/angular/angular.js")"></script>
<script src="#Url.Content("/Scripts/bower_components/angular-ui-router/release/angular-ui-router.js")"></script>
<script src="#Url.Content("/Scripts/bower_components/angular-animate/angular-animate.js")"></script>
<script src="#Url.Content("/Scripts/modules/long-form-app-module/LongFormApp.js")"></script>
<script src="#Url.Content("/Scripts/modules/long-form-app-module/LongFormController.js")"></script>
HTML Markup
<div class="application">
<!-- Inject partial view from router -->
<section ui-view></section>
</div>
LongFormApp.js Script
(function () {
'use strict';
// Create our app and inject ngAnimate and ui-router
angular.module('GllApp', ['longFormController'])
.config(function ($stateProvider, $urlRouterProvider) {
// Catch all route
// By default send user to question one
$urlRouterProvider.otherwise('/home');
$stateProvider
// Route to show start of form
.state('home', {
url: '/home',
templateUrl: 'LongForm.html',
controller: 'LongFormController'
})
// Route to show start of form
.state('home.q01', {
url: '/home/q01',
templateUrl: 'LongFormQuestion01.html'
});
});
})();
LongFormController.js Script
(function () {
'use strict';
angular.module('longFormController', ['ngAnimate', 'ui.router'])
.controller('LongFormController', ['$scope', function ($scope) {
// do stuff
}]);
})();

I just fixed this exact problem with my project. The root cause was I was depending on "angular-animate": "~1.3.0", so bower was using Angular v1.3 even though the rest of the project was depending on Angular 1.2.
Just use
"angular-animate": "~1.2.0"
instead of
"angular-animate": "~1.3.0"
in your bower.json file. After a bower install everything should work!

You are creating the module twice, the second one you are loading replaces the first one. I'm not sure what order you want your dependencies in, but you probably just want one app:
var myGllApp = angular.module('GllApp', ['ngAnimate', 'ui.router']);
And load your controller script later and add it to your exising module by not passing the dependency list to angular.module:
angular.module('GllApp')
.controller('LongFormController', ['$scope', function ($scope) {

I've refactored the code you posted and added comments. Try this and see if you receive another error?
This is assuming you are loading: First Snippet > Second Snippet
(function () {
//use this inside of the SC function or else use strict will be used globally
//and cause unexpected results
'use strict';
// Create our app and inject ngAnimate and ui-router
// You don't need to create this variable if it is for scoping reasons,
// since you have already created a defined scope within the Self-Calling function
angular.module('GllApp', ['ngAnimate', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
// Catch all route
// By default send user to question one
$urlRouterProvider.otherwise('/home');
$stateProvider
// Route to show start of form
.state('home', {
url: '/home',
templateUrl: 'form.html',
controller: 'LongFormController'
})
// Route to show start of form
.state('home.q01', {
url: '/home/q01',
templateUrl: 'form-q01.html'
});
});
})();
(function () {
'use strict';
angular.module('GllApp', ['ngAnimate']) //since you are not using stateProvider here you do not need to inject ui.router
.controller('LongFormController', ['$scope', function ($scope) {
// do stuff
}]);
})();

Related

Injecting Angular modules: Unknown provider

I followed a tutorial on how to organize and Angular project. I have a ng directory that contains all my controllers, services and my routes.js. This is then bundled all together into an app.js by my gulp config.
My module.js is like this:
var app = angular.module('app', [
'ngRoute',
'ui.bootstrap'
]);
Here's a bit of my routes.js:
angular.module('app')
.config(function ($routeProvider) {
.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});
Here's what my working LoginCtrl looks like:
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
$scope.login = function(username, password) {
...
}
})
The tutorial didn't make use of any Angular modules and I wanted to try one out. I added ui.bootstrap to my page from a CDN and try to change the LoginCtrl to:
angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
...
})
But this throws me the following error:
"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
What is causing this error? In every tutorial I find this seems to be how they load a module, the only difference I see is that the tutorial don't seem to be using a router.
PS: Note that if I use an empty module list [] I get the exact same error. If I use a non-existing module ['helloworld'] I get an errorModule 'helloworld' is not available'. So I'm concluding that my `ui.bootstrap' module is indeed available.
EDIT: Plunker fiddle here: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview
angular route is another module you should not only include but also use like this
in the app module creation
means DI of route
angular.module('app', ['ngRoute']);
Please go through the angular route doc
Remove ['ui.bootstrap'] form controller. You should add dependencies only one time but you add it twice so the second dependency list override the first one.
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
... })
your routes snippet looks wrong, you should be hanging the when call off $routeProvider and maybe declare $routeProvider as an injected val if it's not being picked up e.g.
angular.module('app')
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
}]);
I have checked your link. I think there is a serious issue with angular and ui bootstrap version.In ui-boostrap dashboard, it is written that 0.12.0 is the last version that supports AngularJS 1.2.x. I have tried with all combinations but it doesn't work with your angular version.
I suggest you to change angular version to latest and ui-bootstrap version to latest so it will work.
Please check out this working Plukr
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script> //change this to latest also.
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap.min.js'></script>
<script src='./app.js'></script>
If you want to go with your angular version only. I'd request you to do some R&D. Try with different versions of ui-bootstrap. still if it doesn't work you can make PR.

angularjs - ui-router add module

I have a main.html with multiple subpages:users.html,usergroups.html,... which all of them have their own app files and controllers separately: mainapp.js,usersapp.js,usergroupsapp.js,...
And I use ui-router to route to particular sub page as needed:
var myApp = angular.module("myApp",['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('users', {
url: "/users",
templateUrl: "pages/users.html",
controller : 'UsersCtrl'
})
.state('usergroups', {
url: "/usergroups",
templateUrl: "pages/usergroups.html",
controller : 'UsergroupsCtrl'
})
...
Everything works fine until I need to use one of the module multiselect.jsin my usergroups.html. When I added it directly to UsergroupsCtrl in usergroupsapp.js:
var app= angular.module('myApp',['am.multiselect']);
...
But immediately I have an error:
Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
Which MainCtrl is from main app.js.
How can I resolve this issue?
Here is correct way to add am.multiselect module dependency to your main myApp module:
var myApp = angular.module("myApp", ['ui.router', 'am.multiselect']);
In usergroupsapp.js you should just have module getter, not setter (don't recreate module once again). Note, that there are no [...] when you retrieve existing module:
var app = angular.module('myApp');

angularjs fails to load jaydata module

aI'm creating an AngularJS app. I have to use Jaydata to consume odata3 web service. I'm using a theme called Metronics.
The error I see in the console is:
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=MetronicApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fmodulerr%3Fp0%3Doc.lazyLoad%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.3.15%252F%2524injector%252Fnomod%253Fp0%253D%252524provide%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A31176%252FScripts%252Fangular.min.js%253A6%253A417%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A31176%252FScripts%252Fangular.min.js%253A21%253A412%250A%2520%2520%2520%2520at%2520a%2520(http%253A%252F%252Flocalhost%253A31176%252FScripts%252Fangular.min.js%253A21%253A53)%250A%2520%2520%2520%2520at%2520Object.w.bootstrap%2520%255Bas%2520module%255D%2520(http%253A%252F%252Flocalhost%253A31176%252FScripts%252Fangular.min.js%253A21%253A296)%250A%2520%2520%2520%2520at%2520u%2520(http%253A%252F%252Flocalhost%253A31176%252Fassets%252Fglobal%252Fplugins%252Fangularjs%252Fplugins%252FocLazyLoad.min.js%253A8%253A2925)%250A%2520%2520%2520%2520at%2520Object.r%2520%255Bas%2520forEach%255D%2520(http%253A%252F%252Flocalhost%253A31176%252FScripts%252Fangular.min.js%253A7%253A302)%250A%2520%2520%2520%2520at%2520u%2520(http%253A%252F%252Flocalhost%253A31176%252Fassets%252Fglobal%252Fplugins%252Fangularjs%252Fplugins%252FocLazyLoad.min.js%253A8%253A2994)%250A%2520%2520%2520%2520at%2520Object.r%2520%255Bas%2520forEach%255D%2520(http%253A%252F%252Flocalhost%253A31176%252FScripts%252Fangular.min.js%253A7%253A302)%250A%2520%2520%2520%2520at%2520u%2520(http%253A%252F%252Flocalhost%253A31176%252Fassets%252Fglobal%252Fplugins%252Fangularjs%252Fplugins%252FocLazyLoad.min.js%253A8%253A2994)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A35%3A320%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A35%3A63%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(http%3A%2F%2Flocalhost%3A31176%2FScripts%2Fangular.min.js%3A17%3A381
I have added the required module (i.e. 'jaydata') in app.js
'use strict';
var app = angular.module("app", [
"ui.router",
"ui.bootstrap",
"oc.lazyLoad",
"ngSanitize",
"jaydata" // <=== when I remove this and remove $data from controller, everything except jaydata specific things work.
]);
/* Setup Rounting For All Pages */
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
// Redirect any unmatched url
$urlRouterProvider.otherwise("/Dashboard");
//... states of all pages/routes using $stateProvider
]);
// this controller is in separate file. loaded by lazyLoad along with the view
// when I remove $data from this controller and 'jaydata' from app, everything except jaydata specific things work.
app.controller('TicketsController',[ '$rootScope','$data', '$scope', '$http', '$timeout',function ($rootScope,$data, $scope, $http, $timeout) {
$scope.$on('$viewContentLoaded', function () {
theme.initAjax(); // initialize core components
});
console.log($data);
//jaydata specific code.
// set sidebar closed and body solid layout mode
$rootScope.settings.layout.pageBodySolid = false;
$rootScope.settings.layout.pageSidebarClosed = false;
}]);
<!-- the view loads here-->
<div ui-view class="fade-in-up">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="http://raw.githubusercontent.com/ocombe/ocLazyLoad/master/dist/ocLazyLoad.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
Please help.
You will find the code for the theme here:
http://www.keenthemes.com/preview/metronic/theme/templates/admin/angularjs/#/dashboard.html
The 'oc.lazyLoad' module is the one that conflicts with jaydata.
I removed that module when I had this issue, and jaydata then worked.
Looks like you should replace your variable name to app from MetronicApp OR MetronicApp from app
Code
var app= angular.module("app", [
"ui.router",
"ui.bootstrap",
"oc.lazyLoad",
"ngSanitize",
"jaydata" // <=== when I remove this and remove $data from controller, everything except jaydata specific things work.
]);

Trying to get my Resolve to inject into my controller to be able to inject into the HTML

This is my index.js file
'use strict';
angular.module('wildenglish', ['ngAnimate', 'ngTouch', 'restangular', 'ngRoute', 'ui.bootstrap'])
.config(function ($routeProvider, RestangularProvider) {
RestangularProvider.setBaseUrl('https://www.googleapis.com/calendar/v3/calendars/googleCalendarID');
$routeProvider
.when('/', {
templateUrl: 'app/main/main.html',
controller: 'MainCtrl',
resolve: {
calendarEvents: function(Restangular){
return Restangular.one('eventsAUTHKEY').get();
}
}
})
.otherwise({
redirectTo: '/'
});
})
And my main controller.js
'use strict';
angular.module('wildenglish')
.controller('MainCtrl', function(Restangular, calendarEvents) {
var self = this,
events = calendarEvents,
items = events.items;
});
The Error I'm receiving when I try to use in the HTML is:
Error: [$injector:unpr] Unknown provider: calendarEventsProvider <- calendarEvents <- MainCtrl
So I am trying to figure out how I can utilize the information that I am getting back from that Promise which I can log in the console to be accessible to the HTML via the controller
Do I need a service or factory? and where would that go?
Thank you in advance for your help
Assign the events returned by the resolved promise to your controller scope. You'll need to change the depencies your injecting into your controller. You can leave out Restangular since you are resolving your promise in your route but you do need $scope:
angular.module('wildenglish').controller('MainCtrl', function($scope, calendarEvents) {
// i'm assuming the following logs your events to your console
// if not you're having a problem with your Restangular request
console.log(calendarEvents);
// Assign calendarEvents to your $scope
$scope.events = calendarEvents;
});
Now you can use the events in your HTML template (assuming each event has a property called 'name'):
<ul>
<li ng-repeat="event in events">{{event.name}}</li>
</ul>
Sorry, I missed the answer above which is already the correct answer.
There was a similar problem here:
AngularJS, resolve and unknown provider
Basically if you are using the routeProvider to assign your controller in your script file you cannot use ng-controller in your template.

How to configure 'ngProgress' as loader in my project [ngbp boilerplate]

I'm using 'ngbp' (https://github.com/ngbp/ngbp) angular boilerplate to build my project and I'm trying to make ngProgress work to show the loader when changing from section to section.
I've installed ngProgress through bower. I have css and js in place.
In my app.js I have this:
(function(app) {
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}]);
app.run(function () {});
app.controller('AppController', ['$scope', function ($scope) {
}]);
}(angular.module("grinFood", [
'grinFood.home',
'grinFood.about',
'grinFood.menu',
'grinFood.catering',
'grinFood.takeithome',
'grinFood.contact',
'templates-app',
'templates-common',
'ui.router.state',
'ui.router',
'ngProgress',
])));
Then for example my catering.js looks like this:
(function(app) {
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('catering', {
url: '/catering',
views: {
"main": {
controller: 'CateringController',
templateUrl: 'catering/catering.tpl.html'
}
},
data:{ pageTitle: 'Catering' }
});
}]);
app.controller('CateringController', ['$scope', function ($scope, ngProgress) {
var init = function() {
// A definitive place to put everything that needs to run when the controller starts. Avoid
// writing any code outside of this function that executes immediately.
ngProgress.start();
};
init();
}]);
}(angular.module("grinFood.catering", [
'ui.router'
])));
That is when I get TypeError: Cannot read property 'start' of undefined
Also tried to put the ngprogress in the controller in app.js but I can't make it work.
You can watch the error here: http://ticketcomunicacion.com/grinfood/#/menu
Any help would be appreciate. Thanks
First off, ngbp looks like it's out of date. Try http://yeoman.io/ Secondly, I'm clueless why do you wrap app with a function? This is pointless, unless that you have a other library with a conflict.
Do you use minifiers? If yes try use one that is aware of anugarjs dependency framework. Basically, you need to specify your dependency correctly
['$scope', function ($scope, ngProgress)
change to
function ($scope, ngProgress)
or
['$scope', 'ngProgress', function ($scope, ngProgress)
You are not injecting ngProgress into the controller properly.
Instead of this:
app.controller('CateringController', ['$scope', function ($scope, ngProgress) {
You need to do this:
app.controller('CateringController', ['$scope', 'ngProgress', function ($scope, ngProgress) {
Note, a while back I switched to using ng-annotate, it's a very nice way to avoid these errors. I actually use ng-annotate-rails. These will help you avoid these types of mistakes in the future and clean up your code a bit. I highly recommend either one!

Categories