I.T. aware

The notion of module AngularJS has nothing to do with the ECMAScript planned for the next version. The concept is closer to the Guice modules to help facilitate tests by loading certain modules for the test. It is also an elegant way to organize your code for some classes together.

A module can declare:

• directive
• controller
• filter
• constant
• service

It also allows to declare initialization code of the application via the run method and configure routes (URLs pointing to views) with the config method:

 angular.module ('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config (['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/view1', {templateUrl 'partials/partial1.html' controller: MyCtrl1});
    $routeProvider.when('/view2', {templateUrl 'partials/partial2.html' controller: MyCtrl2});
    $routeProvider.otherwise({redirectTo '/view1'});
  }]) 

ngApp directive automatically initializes the application. Assigning a value containing an identifier involves loading the module with this ID:

 ... 

angular.module ("MyApp", []);

The [] list dependent modules

angular.module("myApp.directives", []).directive(...).directive(...);
angular.module("myApp.filters", []).filter(...).filter(...);
angular.module("myApp.services", []).factory(...).factory(...);
angular.module("MyApp", ["myApp.directives", "myApp.filters", "myApp.services"]);

services

Which in our Java has become an evidence to distribute application logic is also found in AngularJS. As its name suggests, the service can declare a class dedicated to a specific function. Be careful each service is and can only be (at least for now), a singleton.
In the following example MessageService manage a list of message: add, list, displayed in an alert. $window is injected into our service injected itself into the controller. Though you mind the syntax, although there are other ways it is the most readable. The injections are passing an array whose last element is the function with the same parameters as in the foregoing table such as:

angular.module("modulename", []).factory("servicename", ["dependance1", "dependency2", function (d1, d2) {...}]);

You can forgive the parameters if you use same parameter name as the service name but if you minify your JS it will not work.

Enter a message and click « Add » to add a message to the service. Repeat this action several times then load the messages. These will be displayed in list and for each message a button « display » opens an alert() with the message as content:

Although this syntax is unconventional it has the advantage of presenting a clear dependency injection. Again it is this approach that makes everything easily testable.
The temptation to build the code in the controller is easy, the service is here to avoid this.

Here we use factory(name, fn) method to create our service, but there is also service(name, fn) method. The factory method takes as parameter a function whose parameters are injected and this function returns an instance of the service object:

myModule.factory('myService', function (dep1, dep2) {
  // Construct the service instance
  serviceInstance return;
});

The service method will instantiate the service object using the constructor provided, just as if he had been called with the new operator, but the constructor is injected with dependencies

myModule.service('myService', function (dep1, dep2) {
  // Instantiate "this" just as a constructor Would
});

The following syntax is also possible:

var MyService = function(dep1, dep2) {
}

MyService.prototype.protoMethodA = function() {}
MyService.prototype.protoField = 'some field';

myModule.service('myService' MyService);

The main difference between the two is that factory() object reference service while service() made a new oject on the service and return « this ».

After the turn of the key concepts we see in the next section how to build an application AngularJS before addressing the tests.

Tweet