AngularJS Life Cycle

Whenever an AngularJS application loads in the browser, it consists 3 phases mentioned below:

Bootstrap – This phase occurs when the AngularJS JavaScript library is downloaded into the browser. After that AngularJS initializes their own necessary components and then initializes our application module, which the ng-app directive points to. Once the module is loaded, and if there are any dependencies injected into our application module, then that module is available within the module.

Compilation- In this phase static HTML DOM is replaced with dynamic HTML DOM which is referred as AngularJS view.

This phase itself consist of two phases:

Compile: In this phase AngularJS traverses the static DOM and collects all the directives.

Link: All the directives linked to the respective JavaScript functionality present in the AngularJS built-in library or in the custom directive code. All the directives has their own scope’s to produce the dynamic view.

Runtime Data Binding- This is the final phase of the AngularJS, this phase exists until the user reloads the web page or navigates away from a web page. At this point, any changes happens in the scope are reflected in the view, and any changes happens in view are directly updated in the scope. Which makes the scope the only source of data for the view.