Difference between module dependency and service dependency in AngularJS

Question

Difference between module dependency and service dependency in AngularJS

1k Views Asked by user1888955 At 03 August 2018 at 19:02

I don't understand what's the difference between module dependency and service dependency. For example,

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

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

I don't understand why Users service could be passed in in controller method of components.users as no module is required by component.users module. (I thought api.users module should be passed in in the module method as one of required modules).

In other words...

What is difference between module dependency and service dependency?

Why a service is available even when the module it is defined is not required?

Original Q&A

There are 3 best solutions below

lealceldeiro On 03 August 2018 at 19:13

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:

ModuleA
- Functionality1 (Service1)
- Functionality2 (Service2)
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>

Sajeetharan On 03 August 2018 at 19:14

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.

**captwebdesign** · Accepted Answer · 2018-08-03T20:36:03.097000

You may check if you're using an existing code base from your team that they have defined a root or base 'app' module that includes your defined 'Users' service. Below is an example of how this may be working in your project and why you're able to use the 'Users' service:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
</head>
<body>
    <div ng-controller="controller">
        {{ text }}
    </div>
    <script src="angular.js"></script>
    <script type="text/javascript">
    angular.module('services',[])
        .factory('service',function(){
            return {
                text: "this is a string value defined in a service."
            }
        })
    ;
    angular.module('controllers',[])
        /*
          Here the service "service" is being used however
          has not been specified in it's containing module.
        */
        .controller('controller',function($scope,service){
            $scope.text = service.text;
        });
    ;
    /*
      The above works because in some way all services and controllers
      have been defined. In this example by manually specifying each.
    */
    angular.module('app',['services','controllers']);
    </script>
</body>
</html>

Difference between module dependency and service dependency in AngularJS

There are 3 best solutions below

Related Questions in ANGULARJS

Related Questions in DEPENDENCY-INJECTION

Related Questions in ANGULARJS-MODULE

Related Questions in ANGULARJS-INJECTOR

Trending Questions

Popular # Hahtags

Popular Questions