2

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?

0

3 Answers 3

4

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!

1
  • The bracket notation is needed so when you minify your scripts This helped me the most... I omit this in my code and on production server this caused big problems... but everything has worked in debug.
    – Tomino
    Aug 10, 2015 at 6:15
0

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

angular
    .module('app', [

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

];
0

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'    
];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.