berimbolo berimbolo - 6 months ago 29
AngularJS Question

Angular Dependencies

Recently I have been learning Angular and getting on ok but there is something about the dependency injection that is still not clear to me.

Is there any reason to declare in my app.js file the other pieces of my application (services, controllers etc)?

It seems sometimes tutorials show this and sometimes they dont:

var calculatorApp = angular.module('calculatorApp', [
'config',
'ngRoute',
'calculatorControllers', //Do I need to declare these comnponents here?
'calculatorServices'
]);


Equally do I need to declare ALL of the dependencies for the entire app in app.js? It seems I can also declare dependencies in any module (here ngResource is not declared in app.js just in services.js):

var calculatorServices = angular.module('calculatorServices', ['ngResource']);


If dependencies are only passed into the function and not first declared in an array does this mean the libraries are not preloaded, is there a benefit to doing this (calculatorService is not declared in app.js this time):

angular.module('myApp')
.controller('MainCtrl', function ($scope, $location, calculatorService)


Finally is there any difference in the way these modules are declared? The first doesnt reference the main module, the second example does:

var calculatorServices = angular.module('calculatorServices', ['ngResource']);

angular.module('myApp')
.controller('MainCtrl', function ($scope, $location, calculatorService)

Answer

If a module depends on services, controllers or directives of other modules they must be injected. However, you do not need to inject the dependencies of your dependencies, since Angular flattens the hierarchy for you.

In your example, the calculatorApp will have available to itself the four dependencies that you injected, as well as anything they depend on in their definitions. However, if your calculatorApp needs to use ngResource directly, it should still inject it in its own definition, because if you decide to rewrite your calculatorServices so that it doesn't need ngResource any more, it will probably not be desirable to rewrite calculatorApp as well.

Note, that in reality, dependencies are only instantiated once. Therefore, if calculatorApp and calculatorServices both inject someDependency, then one instance will be shared among these two modules.

Angular does not perform lazy-loading automatically, so there is little difference if you use the array notation or just pass the object to the function directly. The difference between these two syntaxes is that the array notation will not break during minification and uglification of your app. This is so, because strings are not altered during either of these processes, and variable names can be changed to make the file smaller.

Your last point demonstrates the creation of an angular module and the use of an angular module.

var calculatorServices = angular.module('calculatorServices', ['ngResource']);

This creates an empty calculator services module and injects ngResource into it.

angular.module('myApp')
    .controller('MainCtrl',  function ($scope, $location, calculatorService)

This adds the MainCtrl controller to the already existing myApp module. More about this can be found in the Angular docs.