AngularJs - Bootstrapping

AngularJs Bootstrapping

Bootstrapping in AngularJS

What is Bootstrapping?

In our first Angular web page which we created, we mentioned about the ng-app which designates the application root.

Let us try to understand the relevance of attaching the ng-app to the tag.

ng-app designates the root of an Angular application and is typically placed near the root element of the page - e.g. on the or tags.

The presence of ng-app bootstraps an Angular application.

Wondering what bootstrapping means? Lets see what bootstrapping is and why boostrapping is required.

Bootstrapping refers to initialization process of Angular application.

Bootstrapping phase is the phase where AngularJS specific code present in the web html page like expressions, directives, etc get interpolated.

If the ng-app directive is used , bootstrapping happens automatically when an Angular web page is rendered.

It is also possible to control the bootstrap process manually.

Let us explore, what happens during the bootstrapping process in AngularJS.

Bootstrap process in AngularJS:

Step 1 to 3 : When the web page loads in the browser and DOM is prepared, the JavaScript DOMContentLoaded event is triggered

Step 4 : Angular searches for ng-app directive which is the root of Angular app compilation. If found, the bootstrapping is initiated. The module associated with this directive, if any, is then loaded.

Step 5 : Application injector that helps browser handle AngularJS part within the DOM, is then created which then instantiates the HTML compiler, $compile.

Step 6 : The HTML compiler walks the DOM to look out for Angular components like directives.

Step 7 : The compiler compiles the DOM by treating ng-app directive as root of compilation and updates the DOM accordingly.

Automatic Bootstrapping

Types of Bootstrapping

You might have observed that for the Angular web page which we created, bootstrapping was happening when the page is getting loaded, as all components were interpolated for us.

You might be wondering now, if Angular gives any facility to the developers to control this bootstrapping process. Yes, of course. Angular provides support for ‘automatic bootstrapping’ as well as ‘manual bootstrapping’.

Automatic Bootstrapping:

Automatic bootstrapping happens if the directive ng-app is added.

As soon as this directive is found, after DOMContentLoaded event triggers, the bootstrapping of the entire document occurs.

This is generally the most preferred approach.

For example :

CODE/PROGRAM/EXAMPLE

<html ng-app>

ng-app is used only once per application.

Only one AngularJS application can be auto-bootstrapped per HTML document.

Manual Bootstrapping:

Gives us the control over the bootstrapping process.

Manual bootstrapping is generally preferred only when specific scenarios like:

Performing some operations before Angular compiles a page.

When script loaders need to be used.

To run multiple applications in an HTML document.

angular.bootstrap is used for manual bootstrapping

Code for bootstrapping should be written within the ready function just to ensure that bootstrapping process finds the element in the DOM that has to be bootstrapped.

For example :

#Bootstrapping_in_AngularJS #Bootstrap_in_Angular #angular_bootstrap #angularjs_bootstrap #angular_bootstrap_4 #angular_4_bootstrap #bootstrap_for_angular_7 #angular_2_bootstrap

(New page will open, for Comment)

Not yet commented...