Difference between module dependency and service dependency in AngularJS

Dependency between modules specifies how every module (imagine a module is a package of functionalities) needs some functionalities provided by other module(s).

Service dependency is how something (a controller, a service, etc) needs a specific service to work.

These are related. If a controller (i.e.) needs a service which is in another module, here you can evidence module dependency and service dependency. If the later mentioned service is inside the same module. The controller's module wouldn't have to depend on another module.

So imagine this:

1. ModuleA
   • Functionality1 (Service1)
   • Functionality2 (Service2)
2. ModuleB
   • Functionality3 (Service3)
   • Functionality4 (Service4)

If Functionality1 needs Functionality2, it can used it without ModuleA needing to import ModuleB because they are in the same module. Now if Functionality2 needs Functionality4, ModuleA needs to import ModuleB so Functionality4 can be brought inside the "scope" (used as general sense of the word, not to be confused with $scope) of ModuleA.

Every module in AngularJS is declared using angular.module('name', []) (notice the brackets). And every module (once created) can be located using angular.module('name') (notice the absence of brackets).

The code you provided should not work since UsersController (declared in components.users module) requires Users factory (declared in api.users module) and components.users module does not import api.users.

See it below (the code clearly fails)

angular.module('components.users', [])
  .controller('UsersController', function(Users) {
    console.log(Users);
  })

angular.module('api.users', [])
  .factory('Users', function() {
    return this;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<span ng-app="components.users" ng-controller="UsersController"></span>

In order to get this working you could either declare Users factory inside the same components.users module or import api.users module inside components.users.

Options 1: declare Users inside the same components.users module.

// create the module
angular.module('components.users', [])
  .controller('UsersController', function(Users) {
    console.log(Users);
  })

// locate the module
angular.module('components.users')
  .factory('Users', function() {
    return this
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<span ng-app="components.users" ng-controller="UsersController"></span>

Option 2: import api.users module inside components.users

 
// create the module with a dependency to `api.users`
angular.module('components.users', ['api.users'])
  .controller('UsersController', function(Users) {
    console.log(Users);
  })

// create an independent module `api.users`
angular.module('api.users', [])
  .factory('Users', function() {
    return this
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<span ng-app="components.users" ng-controller="UsersController"></span>

Everytime when you do angular.module it becomes a separate module.

Assume you are living in an apartment, where each house is a module. Where each house will have its own rooms(services) etc.

so when you want to access someone else house's rooms, you need to request permission from other house. in that case you are injecting the particular module and then only you will be able to access it.