angularjsdependency-injectionangularjs-serviceangularjs-module

Angular Services within Modules


Having difficulty injecting a service into another service. I want a service hierarchy, where I can pass/request logic to/from the parent service, for sake of brevity and encapsulation.

So for example, I have a userService, and I want the userService to manage the user's toDoList. So I created a toDoService, and I want controllers to add a toDo for the user by passing the request to the userService, which relays to the toDoService. Here's what I have:

// app.js
angular.module('myApp', [
    // other dependencies...
    'myApp.myServices'
]);

// services/toDoService.js
angular.module('myApp.myServices', [])
       .factory('toDoService', function($http) {

           getStuff = function(userId) {
                // returns $http call
           };

           addStuff = function(userId, data) {
                // returns $http call
           };
});

// services/userService.js
angular.module('myApp.myServices', [])
       .factory('userService', 
         ['$http', 'toDoService', function(
           $http,   toDoService) {

            addToDo = function(data) {
                toDoService.addStuff(user.uid, data)
                     .then(function(success) {
                         // apply bindings
                     })
                     .catch(function(error) {
                         // display error
                     });
            };

            getToDos = function(data) {
                toDoService.getStuff(user.uid)
                     .then(function(success) {
                         // apply bindings
                     })
                     .catch(function(error) {
                         // display error
                     });
            };
}]);

The controller works with the userService, and code from toDoService worked when it was originally in userService. But when I create the toDoService and move that code there and encapsulate it, angular complains about toDoService.

Error: [$injector:unpr] Unknown provider: toDoServiceProvider <- toDoService <- userService

I've checked script references, and all scripts are properly included. e.g. <script src='/[..]/toDoService.js' /> etc...

So I'm wondering is it even possible to inject a service into another service within the same module? Is it an issue with my naming convention?


Solution

  • angular.module('myApp.myServices', [])
    

    This line in userService.js defines the module myApp.services, overwriting the one that has previously been defined in toDoService.js.

    Define the module only once (in a separate file). Get a reference to this previously defined module using

    angular.module('myApp.myServices')
    

    i.e. without the empty array as second argument.