Understanding AngularJS Life Cycle

Understanding the life cycle of an AngularJS application makes it easier to understand how to design and implement your code. Once you understand how an AngularJS application is bootstrapped, many of the implementation details of the framework will make sense. The reason for this is that the startup process provides insight into the way that many of the components of the framework are linked together.

AngularJS Life Cycle has three phases:

  1. Bootstrap
  2. Compilation
  3. Run-time

The three phases of the life cycle of an AngularJS application happen each time a web page is loaded in the browser. The following sections describe these phases of an AngularJS application.

The Bootstrap Phase

The first phase of the AngularJS life cycle is the bootstrap phase, which occurs when the AngularJS JavaScript library is downloaded to the browser. AngularJS initializes its own necessary components and then initializes your module, which the ng-app directive points to. The module is loaded, and any dependencies are injected into your module and made available to code within the module.

The Compilation Phase

The second phase of the AngularJS life cycle is the HTML compilation stage. Initially when a web page is loaded, a static form of the DOM is loaded in the browser. During the compilation phase, the static DOM is replaced with a dynamic DOM that represents the AngularJS view.

This phase involves two parts: traversing the static DOM and collecting all the directives and then linking the directives to the appropriate JavaScript functionality in the AngularJS built-in library or custom directive code. The directives are combined with a scope to produce the dynamic or live view.

The Run-time Data Binding Phase

The final phase of the AngularJS application is the run-time phase, which exists until the user reloads or navigates away from a web page. At that point, any changes in the scope are reflected in the view, and any changes in the view are directly updated in the scope, making the scope the single source of data for the view.

AngularJS behaves differently from traditional methods of binding data. Traditional methods combine a template with data received from the engine and then manipulate the DOM each time the data changes. AngularJS compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than traditional methods.

The following flow diagram depicts the various steps of the life cycle of an AngularJS application.

life-cycle-of-angular-js-app

When a request for an URI is made, the AngularJS framework file that is referenced in the HTML page gets downloaded and a bootstrap callback is registered by the browser. Once the HTML file and its other referenced files are fully downloaded, the callback is executed.

Angular then traverses through the DOM tree of the HTML file to find the ng-app directive. Once the ng-app directive is found, Angular makes the element that has ng-app directive as the root of the application’s DOM. Now, $injector is created for dependency injection. The injector also creates the root scope object ($rootScope) that would become context for the app’s model. Angular then compiles the entire DOM starting with ng-app and all the way down the DOM tree including any directives and bindings that it might come across. The view now gets displayed to the end user.

Once the view has become available, Angular waits for any browser events to occur. When ever an event occurs, Angular checks for any changes to the model. If changes to the model are found, Angular updates the affected bindings with in the view and thus implements two-way binding.

Top