Angular JS series – the AngularJS application LIFE-CYCLE

Angular JS series – the AngularJS application LIFE-CYCLE

Angular JS series – the AngularJS application LIFE-CYCLE


Now that we have had a look at what AngularJS is all about, AngularJS magical 2-way data binding and a little introduction about AngularJS Scope & Scope creation and inheritance we will have a further look at the AngularJS application LIFE-CYCLE.



AngularJS LIFE-CYCLE – 3 phases

A basic understanding about the AngularJS life cycle makes it easier to understand and know how to design and implement your future code at best. The life-cycle has three identifiable phases.


The bootstrap phase

The first phase of the AngularJS life cycle can be identified as the bootstrap phase, which occurs when the AngularJS JavaScript library is included at page load. AngularJS initializes itself with the necessary components and then initializes your application (using the ng-app directive).

As stated, Angular initializes automatically (or forced manually using angular.bootstrap(element, [modules], [config]) ) upon the DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to ‘complete’.

The module is loaded and the dependencies are injected into your application and application modules and made available for module usage (dependency injection upon bootstrap phase).


The Compilation Phase

The second phase of the AngularJS life cycle is the compilation stage. When the webpage is loaded, a static DOM is loaded in to the browser. During this compilation phase the static DOM is replaced with a dynamic DOM that represents the Angular parsed view.

Angular JS compilation phase starts once the static DOM is loaded into browser. This involves a two step compilation process.

Compile: Traverses the static DOM and collects all the directives.
Link: Links all the collected directives to appropriate functionality in the Angular built-in library or custom directive. The directives are combined with the scope objects to produce the dynamic view.


The Runtime Data Binding Phase

The final phase of the AngularJS application is the runtime phase, which persists until the application is reloaded or navigated away from.
At this Data Binding Phase 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.

About the Author

Daan is a Creative-Geek who loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]