Dependency injection error in angular - javascript

I am getting Uncaught Error: [$injector:modulerr] in a very strange manner.
If I inject dependency in this manner it throws the above error.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(['$routeProvider'], function ($routeProvider) {
});
But if I flip the above snippet in the below way, the error is gone.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(function ($routeProvider) {
//no error
});
I am using Angular v 1.3.1
Scripts including order.
angular.js
angular-routes.js
myroutes.js
myCtrl.js
Considering the minification in production environment, I can't go with the second way.

You have not closed config inline array annotation function correctly
app.config(['$routeProvider'], function ($routeProvider) {
should be
// VVVVVVVVVV removed `]`
app.config(['$routeProvider', function ($routeProvider) {
}]); //<-- close it here

You didn't close it right.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
}]);
The recommended way of doing this is using the array notation.
Read more here: https://docs.angularjs.org/guide/di

Related

Routes not working in AngularJS

I'm new to Angular and can't get my routing to work in my application. I have nested modules which leads me to think that the problem is in the injections but I was hoping someone could save me from my day of frustration.
The module definitions are as follows:
application.js
'use strict';
var mainApplicationModuleName = 'vre';
var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngResource', 'ngRoute', 'main']);
mainApplicationModule.config(['$locationProvider',
function($locationProvider){
$locationProvider.hashPrefix('!');
}
]);
if(window.location.hash === '#_=_'){
window.location.hash = '#!';
}
angular.element(document).ready(function(){
angular.bootstrap(document, [mainApplicationModuleName]);
});
main module
angular.module('main', ['administrator']);
administrator profile
'use strict';
angular.module('administrator', ['accountManagement']);
account management module
'use strict';
angular.module('accountManagement', ['ngRoute']);
The routing is then as follows:
angular.module('accountManagement').config(['$routeProvider', function($routeProvider){
alert("hello");
$routeProvider
.when('/accounts/:accountId', {
templateUrl: 'administrator/account_management/views/view_account.client.view.html'
});
}]);
I'm getting the alert pop up but when I go to the url, all i'm getting is:
Cannot GET /accounts/55889e12c02081fc20de1bdd
Any help is much appreciated,
Ash
I think the url must be http://localhost/#/accounts/55889e12c02081fc20de1bdd
Don't forget the #

MVC4 & AngularJS error when using ngAnimate as a dependency

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
}]);
})();

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!

Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider

I received this error upon upgrading from AngularJS 1.0.7 to 1.2.0rc1.
The ngRoute module is no longer part of the core angular.js file. If you are continuing to use $routeProvider then you will now need to include angular-route.js in your HTML:
<script src="angular.js">
<script src="angular-route.js">
API Reference
You also have to add ngRoute as a dependency for your application:
var app = angular.module('MyApp', ['ngRoute', ...]);
If instead you are planning on using angular-ui-router or the like then just remove the $routeProvider dependency from your module .config() and substitute it with the relevant provider of choice (e.g. $stateProvider). You would then use the ui.router dependency:
var app = angular.module('MyApp', ['ui.router', ...]);
adding to scotty's answer:
Option 1:
Either include this in your JS file:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
Option 2:
or just use the URL to download 'angular-route.min.js' to your local.
and then (whatever option you choose) add this 'ngRoute' as dependency.
explained:
var app = angular.module('myapp', ['ngRoute']);
Cheers!!!
In my case it was because the file was minified with wrong scope. Use Array!
app.controller('StoreController', ['$http', function($http) {
...
}]);
Coffee syntax:
app.controller 'StoreController', Array '$http', ($http) ->
...

AngularJs Unknown provider error when using angular.bootstrap()

This is my code:
myApp = angular.module("myApp", []);
myApp.config(['$routeProvider', '$controllerProvider',
'$compileProvider', '$filterProvider',
'routeResolver', myConfigFunction] );
angular.bootstrap(document, ['myApp']);
Whenever I do this, I get the error: Unknown provider: routeResolver from myApp
If however I move the angular.bootstrap before the config function, ie:
myApp = angular.module("myApp", []);
angular.bootstrap(document, ['myApp']);
myApp.config(['$routeProvider', '$controllerProvider',
'$compileProvider', '$filterProvider',
'routeResolver', myConfigFunction] );
Then I don't get any errors, but the config function myConfigFunction is not called. (The function just logs a line to console).
What am I doing wrong?
I am not sure what routeResolver actually is (might be this?)
Since only providers can be injected into the config() block you also need to add the word provider so routeResolver becomes routeResolverProvider and the error will go away.
myApp.config(['$routeProvider', '$controllerProvider',
'$compileProvider', '$filterProvider',
'routeResolverProvider', myConfigFunction] );
Working example on jsfiddle

Categories