AngularJS DI with different modules

Question

I am having some issues trying to use the Angular dependency injection with different modules. At the moment, I have the following. In my index.html, the files are loaded in the following order (end of <body> tag):

network.js
authentication.js
login.js
app.js

network.js

angular.module('services.network', [])
  .factory('Network', ['$http', '$state', function ($http, $state) { ... }]);

authentication.js

angular.module('services.authentication', ['services.network'])
  .factory('Authentication', ['$state', 'Network', function ($state, Network) { ... }]);

login.js

angular.module('controllers.login', [])
  .controller('LoginCtrl', ['$scope', function ($scope) { ... }]);

app.js

var app = angular.module('parkmobi', [
    'ngRoute',
    'services.network',
    'services.authentication',
    'controllers.login'
]);

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
        $(document).foundation('reflow');
    });
}])

app.config(['$routeProvider', function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'templates/login.html',
        controller: 'LoginCtrl'
    });
}]);

Up until this point, everything seems to be quite happy. Now, however, I want to use the Authentication service in the LoginCtrl, which I would have thought is done as follows:

login.js

angular.module('controllers.login', ['services.authentication'])
  .controller('LoginCtrl', ['$scope', 'Authentication', function ($scope, Authentication) { ... }]);

However, this causes the following injection error:

Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=%24stateProvider%20%3C-%20%24state%20%3C-%20Authentication
R/<@http://localhost/testapp/vendor/angularjs/angular.min.js:6:417

Is there a reason for using multiple modules? Normally you just define one module and everything feeds off there. Then you need only inject your dependencies straight into controller functions. — Ed B
– Ed B, Commented May 7, 2015 at 13:27
how come $stateProvider error comes as you are using $routeProvider — Pankaj Parkar
– Pankaj Parkar, Commented May 7, 2015 at 13:28
This is just how I got used to using it from working through the Ionic Framework tutorials. Maybe I'm coming from the wrong way around, as I now want to use angular vanilla for web applications. Will give it a try quickly. — Nico Huysamen
– Nico Huysamen, Commented May 7, 2015 at 13:28

Pankaj Parkar · Accepted Answer · 2015-05-07 13:38:40Z

1

Error came because you've injected $state provider in your Authentication factory, without having ui.router module in app.js parkmobi module.

It should use $route instead of $state as your are doing your route in angular-router.

angular.module('services.authentication', ['services.network'])
  .factory('Authentication', ['$route', 'Network', function ($route, Network) { ... }]);

Or if you want to use ui-router then you need to use $stateProvider while registering states & ui.router module should be include in your app.

edited May 7, 2015 at 13:38

answered May 7, 2015 at 13:29

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nico Huysamen Over a year ago

Spot on, just had to replace $state with $router in the Network service also. Thanks!

Collectives™ on Stack Overflow

AngularJS DI with different modules

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related