AngularJs Module Loading

Module Loading in AngularJS

Components in AngularJS Modules

We have now seen how modules are created in AngularJS.

You might now be wondering what are the components which can be registered or attached to a particular module.

Well, an Angular Module can contain 'n' number of components like:

• Controllers

• Directives

• Filters

• Services

It is possible to attach any component of our choice to a module of our choice. This means that a module created for controllers can also have a directive component attached to it, though this is not a good practice.

Each and every module should contain relevant components.

Additionally, a module can have dependent modules too.

Module Loading

We have now seen that we can associate different components to an Angular module.

You might be wondering how the components registered in a module are made visible and accessible from an Angular web page. We need to perform module loading for this.

• Module Loading is the process of loading a module so as to make all the components registered in the module become visible and accessible in the Angular web page.

• Additionally, loading a particular module will also load all its dependent modules.

• Consider the modules which we had created earlier:

• Here, 'controllers' module is defined in controllers.js file and 'app' module is defined in app.js file.

• We can observe that 'app' module has 'controllers' module as one of its dependent modules.

When we load the module 'app':

• all components attached to the 'app' module will get loaded and become accessible.

• Additionally, the dependent module 'controllers' also gets loaded automatically.

• As a module is loaded, all the components which are registered with it and its dependents become accessible in the web page.

Now that we know what happens when a module is loaded, lets see how a module can be loaded.

Module loading can be done in two modes: “Automatic” or “Manual”.

Automatic Module Loading:

• Automatic module loading happens along with automatic bootstrapping with the help of the directive ng-app

• We load the respective module just by assigning the name of that module to the directive ng-app.

• e.g. . This loads the module named “app”.

Manual Module Loading:

There can be cases where components like controllers might be registered in independent modules and we need to load these multiple independent modules at the same time, in the web page. This is where manual module loading helps us.

• As the 'ng-app' directive which is used for automatic bootstrapping and automatic module loading, does not accept multiple module names at the same time, manual bootstrapping is required for manually loading one or more modules.

• Manual module loading hence supports loading of multiple independent modules at the same time for the same Angular page.

• angular.bootstrap() method is used for manual bootstrapping. We can pass the module name to be used for the entire document or for a selected element, as the second argument to the bootstrap() method. This will load the mentioned module manually, along with manually bootstrapping the Angular web page.

For e.g.

• angular.bootstrap(document, [‘app’]) can be used for manual bootstrapping the entire document. Here, the module 'app' is mentioned while bootstrapping the entire document. This implies that all the components registered with 'app' modules and the dependent modules of the 'app' module will be accessible inside the document.

• angular.bootstrap(document.getElementById(“heading”),['app']) can be used if we want to bootstrap a particular element by the Id 'heading'. Here the 'app' module will be accessible only inside the element 'heading'.