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:
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 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.
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.
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.