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