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