Lets know more about angular module

Modularizing your application is a good practice because it makes the components reusable, configurable and testable.

As we know that angular is on the global scope itself whereas angular.module is a global place to create, register or retrieve angular modules. In other words,  angular.module is a container for other units of your angular application like services, controllers, providers, constants etc.

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

angular.module must have a name. It can also contains dependencies enclosed in brackets ([]) as second parameter and an optional configurable function.

 NOTE: If dependencies brackets ([]) are specified then new module is being created. Otherwise the module is being retrieved for further configuration.

[js]
angular.module(‘myAppModule_1’, []).service(‘service_1’,function(){});
[/js]

It creates a new module having name myAppModule_1 and service ‘service_1’.

[js]
angular.module(‘myAppModule_1’, []).service(‘service_2’,function(){});
[/js]

It overwrites module ‘myAppModule_1’ by creating a new module having name myAppModule_1 and service ‘service_2’.

[js]
angular.module(‘myAppModule_1’).service(‘service_3’,function(){});
[/js]

It will update module ‘myAppModule_1’ adding a new service ‘service_3’.

Best Practice to create an angular.module

[js]
//NOTE: the immediately invoked function expression is used to exemplify different files and is not required
(function(){
//using the function form of use-strict
"use strict";
//Pass a second parameter ONLY THIS ONE TIME because
//Re-declaration of second parameter creates bugs which are difficult to detect
angular.module(‘myApp’, [‘ngResource’, ‘ngAnimate’]);

…
})();
[/js]

Angular module contains the following core types of objects and components, which can be injected into each other using AngularJS dependency injection mechanism :

• Value
• Constant
• Provider
• Factory and
• Service.

We’ll discuss these later. 

There are  two types of blocks:

    Config block : This is the place where application-wide stuff is configured, which needs to be performed on module loading. Only providers and constants can be injected here.

[js]
(function(){
// using the function form of use-strict
"use strict";
// accessing the module in another file by calling angular.module without the brackets([]).
angular.module(‘mymod’)
.config([‘$provide’, function ($provide) {

…
}])
})();
[/js]

    Run blocks : They get executed after the injector is created and you would configure further system configuration here. Only instances and constants can be injected here.

[js]
(function(){
"use strict";
angular.module(‘mymod’)
.run([‘$rootScope’, function ($rootScope) {

…
}])
})();
[/js]

Building Intuitive Frontend Interfaces with AngularJS