5

I am new to AngularJS. I have been reading the excellent book Mastering Web Application Development with AngularJS by Pawel Kozlowski and Peter Bacon Darwin. However, I am still a bit fuzzy on some concepts, so I have decided to go through their sample application line by line to try and get a better understanding of how AngularJS is used in a real-world app.

In some places I see notation that I can't see explained in their book, nor in the API docs. I am wondering if anyone can shed some light on this, as seen in the /client/src/app/projectsinfo/projectsinfo.js file of the project linked to above:

angular.module('projectsinfo', [], ['$routeProvider', function($routeProvider){ 
    ...
}]);

My understanding of the angular.module method is that it accepts three arguments:

  • the name of the module
  • an array of other modules that this module might depend on
  • an optional configuration function

However, in the above example, for the third argument an array is being provided, with the first element in the array being a string (I am assuming a provider?), followed by a function. Can anyone explain what is going on here?

Jeff Fohl
  • 2,047
  • 2
  • 23
  • 26

1 Answers1

12

The syntax of angular.module() is:

angular.module(name, [requires], configFn);

where:

  • name is the name of the module,
  • requires is an optional list of modules on which this module depends, and
  • configFn is a function used to configure the module.

Here the configFn can be a function or a array:

  • If it is a function, then the dependencies injected to it will be injected based on the name of the parameters.
  • If it is an array, then we can use the array to specify the name of the services that need to be injected and then use some other name as the function parameter. This is useful when your code might be obfuscated by a minifier.

The code in the said files seems to be fine.

Toby Speight
  • 27,591
  • 48
  • 66
  • 103
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • Great - thanks. I had been under the impression that dependency injection (DI) notation (the array form) only occurred on service creators (such as services, factories, and providers). However, I found in the API documentation where it discusses this: http://docs.angularjs.org/guide/di#dependency-injection_dependency-annotation The documentation says that this notation is permissible throughout Angular. I gather that the DI array form is permissible whenever a function is expected as an argument? – Jeff Fohl Nov 22 '13 at 16:04
  • 1
    OK, yes. The next question then becomes: Where in AngularJS is DI possible? It appears that the module config is one of those places. In searching around looking for a definitive answer, I found these two helpful documents: http://stackoverflow.com/questions/16828287/what-things-can-be-injected-into-others-in-angular-js/16829270 https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection – Jeff Fohl Nov 22 '13 at 16:30