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.

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

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.

angular.module('myAppModule_1', []).service('service_1',function(){});

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

angular.module('myAppModule_1', []).service('service_2',function(){});

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

angular.module('myAppModule_1').service('service_3',function(){});

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

Best Practice to create an angular.module

//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’]);

     ...
})();

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.

(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) {

     ...
    }])
})();

    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.

(function(){
"use strict";
  angular.module('mymod')
    .run(['$rootScope', function ($rootScope) {

        ...
    }])
})();

Building Intuitive Frontend Interfaces with AngularJS