CODEWITHSUNDEEP
angularjsangular-ui-router
babbaggeii
babbaggeii

Reputation: 7737

Angular 1.3.10 Uncaught Error: [$injector:modulerr]

The app contains very little at the moment, so this is a basic error. I'm using ui-router. This is what I've got in the various files:

app.module.js:

'use strict';

angular
    .module('app', app);

app.$inject = [

    'ui.router',
    'ngCookies',
    'ngSanitize',

];

function app(){}

app.routes.js:

'use strict';

angular
    .module('app')
    .config(routes);

    routes.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];

    function routes($stateProvider, $urlRouterProvider, $locationProvider) {

        // Remove # from url
        $locationProvider.html5Mode(true);

        // Set 404
        $urlRouterProvider.otherwise('/404');

        // Configure app states
        $stateProvider

            .state('app', {
                abstract: true,
                url: '',
                templateUrl: 'modules/app/app.html',
                controller: 'AppController'

            })
    }

app.controller.js:

'use strict';

angular
    .module('app')
    .controller('AppController', AppController);

    AppController.$inject = ['$rootScope', '$scope'];

    function AppController($rootScope, $scope) {

    }

I'm getting the above error in the console on page load - what am I missing?

Upvotes: 2

Views: 2601

Answers (3)

babbaggeii
babbaggeii

Reputation: 7737

The module didn't like being instantiated like that, so I changed it to this and it works fine:

'use strict';

angular
    .module('app', [

    'ui.router',
    'ngCookies',
    'ngSanitize'    
];

Upvotes: 0

iH8
iH8

Reputation: 28638

You are calling $inject on a variable called app, which does not exist in global scope:

angular.module('app', app);

app.$inject = [
    'ui.router',
    'ngCookies',
    'ngSanitize',
];

Now if you would assign your module definition to a variable called app it works: 

var app = angular.module('app', app);

app.$inject = [
    'ui.router',
    'ngCookies',
    'ngSanitize',
];

Next the signature for module definition:

angular.module(name, [requires], [configFn]);

Your again using a variable called app (which doesn't exist) where your requires/injectables array should be. So you could do this: 

var injections = [
    'ui.router',
    'ngCookies',
    'ngSanitize',
];

var app = angular.module('app', injections);

Or even better: (keeps the global scope clear)

var app = angular.module('app', [
    'ui.router',
    'ngCookies',
    'ngSanitize',
]);

Now you can strip out:

app.$inject = [
    'ui.router',
    'ngCookies',
    'ngSanitize',
];

But it's best practice to keep your entire global scope as clean as possible. So you don't assign your module to variable:

angular.module('app', []);

And when you need it for configuration or attaching controllers or directives, etc, you call:

angular.module('app').config();
angular.module('app').controller();
angular.module('app').directive();

Or you can chain them together:

angular.module('app')
    .config()
    .controller()
    .directive();

Another tip, when doing your configuration or creating a controller, you don't have to do seperate injection, you can simply do:

angular.module('app').config([
    '$stateProvider', '$urlRouterProvider', '$locationProvider',
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
      .....
    }
]);

The bracket notation is needed so when you minify your scripts, it will not screw up your injections, if you don't minify you can do without:

angular.module('app').config(
    function ($stateProvider, $urlRouterProvider, $locationProvider) {
      .....
    }
);

I know your problem is solved already, just thought i should clear things up a little. Good luck!

Upvotes: 4

Meziane
Meziane

Reputation: 435

first remove the comma after 'ngSanitize' in app.module.js:

angular
    .module('app', [

    'ui.router',
    'ngCookies',
    'ngSanitize'

];

Upvotes: 0

Related Questions