Angular JS Modules - Begin to Advanced

Angular JS is a very easy learning language, But if you keep exploring, then it is able to find so much of awsome things in angular. The Angular programming starts with module. We are creating an angular application as a module. By using the module concept in angular, it is able to package your program. It is also possible to create reusable modules so that the module can be added with other modules

Angular JS Module

We can define the module as a container. The container contains several angular components such as controllers, services, filters, directives...etc.

In a javascript application, we can able to find a main method which is the starting point of execution. From the main method it is invoking other depending child method and progressing the program. This is the normal working flow of a javascript program. But in the case of Angular Js there is no main methods are there. Instead modules declaratively specify how an application should be bootstrapped. The AngularJS module having several advantages such as

• It is very easy to understand the code.
• It is able to package the module as reusable, So that the module features can be imported on other module.
• The depending modules can be loaded on any order.
• Unit tests only have to load relevant modules, which keeps them fast.
• End-to-end tests can use modules to override configuration.

Here it is created a module myApp and reffered tha module on the html page with ng-app attribute. So by doing this angular bootstraps the app using your module. The empty array in angular.module('myApp', []). This array is the list of modules myApp depends on.

Module Advanced View

Here ends the basic usage of Angularjs, Lets explore bit the advanced.

Suppose two blocks of modules run during bootstrap process. By bootstrap process we mean that they are run before any directive code or before any controller code. They essentially run before any developer written code. The two blocks are:

• Configuration blocks
• Run blocks

Angular JS the calling order is follows:
app.config()
app.run()
directive's compile functions (if they are found in the dom)
app.controller()
directive's link functions (again, if found)

Configuration Block

Configuration blocks are added by using .config() on module. Example:

In configuration blocks, we can inject any provider.

The provider() function allows us to create a configurable service where we can set input per application for the service created using the provider(). For example, if we need to set API key to access a service on the application level, we can set that in the module config and pass input to the provider using the $provide service. All the others ways to create services internally use the $provide service.

Some other built in providers we can inject to .config() are $locationProvider, $compileProvider, $filterProvider, $routerProvider etc. Essentially you can inject any provider.

You cannot inject services into configuration blocks. Configuration blocks are meant for configuring your modules. And services are meant for writing business logic. There shouldn’t be use of any business logic during configuration phase.

Where is the use of provider

Services are provided by providers. eg: $http is provided by $httpProvider. At low level serives are encapsulated into providers. It is possible that providers have some properties and the functionality of the service depends on a particular property. Usually all the properties of the provider has sane default configurations and services use these defaults. But if we want services to behave differently we need to overrirde these defaults. If you are not used the $httpProvider in your application then $http works with default confguration. But if you needs to changes some characteristics of $http then you should override the $provider

For Example: By default after every http response, the digest cycle runs which brings the view in sync with model. But digest cycle take a while to run. If you want performance improvements, you can tell $http to combine processing of multiple http responses and run a single digest cycle after several responses.

This can be achieved by setting a configuration property on $httpProvider.

So you would inject $httpProvider in your code and change this default.

Angular Run Block

Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the services have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.

we know that in config() block can't inject any instances. run() executed after the config() block and here we have facility with this block to inject any instance and constants in our application. This block is just like main() method in other language. This block is a great place to put any event handlers that we need to be executed at the root level for the application. For example, authentication handlers.

Points To Remember

From the above discussion we can conclude like An Angular Module use Configuration and Run blocks to inject dependencies (like providers, services and constants) which get applied to the angular app during the bootstrap process.