Angularjs life cycle with diagram:
The Angularjs Application Bootstrap Process
Once you understand how an Angular.js 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. As seen in Figure 1.1, I’ve compiled a flow diagram to illustrate this important process. Also note that I’ve placed certain term in italics that are important to understanding the Angular.js framework.
Figure 1.1 Angular.js Application Bootstrap Process Flow Diagram
When an HTML page is loaded that includes the Angular.js framework, Angular begins its work by traversing the DOM tree searching for ng-app. Ok, so you are probably wondering what the significance of this ng-app thing is. This ng-app thing is called a directive, and this is a very important concept to the fundamental importance of what makes the Angularjs framework so special. A directive can be viewed as an extension to the HTML DOM API. It can be an element, an attribute, or even a class. A directive commands (or “directs”) Angular to take the respective action that is correlated with that directive. This may include attaching a model object to the DOM node for the directive, executing some form of DOM manipulation, or even inserting a custom UI component, for example.
The significance of ng-app is that it symbolizes where you want Angular to define the root of your application. Normally this will be right on the opening HTML tag, but in some cases, such as very large web applications where another architectural framework may co-exist with Angularjs or where Angularjs is only being used to manage the functionality of a single component or sub-section of an application, it is possible to find ng-app declared somewhere other than the opening HTML tag, as seen below.
<html lang="en" ng-app="myApp">
Once ng-app is located, Angular pulls out it’s secret weapon: the $Injector (sounds intimidating, does it not?). The Injector is how Angular.js implements a design pattern known as dependency injection. Although the term may sound representative of a complex subject, its really not. Simply put, dependency injection just means giving an object its instance variables instead of having it construct them itself. Angular’s Injector acts as a “registration center” for the $provide object, and is responsible for keeping references to registered objects, instantiating types, invoking methods, and loading up modules. Importantly, the Injector initializes the root $scope object, which will serve as the context for the application model. Understanding scopes is another fundamental importance of learning Angular.js, so we will explore it in more detail in Part 2 of this architectural analysis.
Finally, Angular continues its work by compiling all of the directives and data bindings so that it can respond to events that change the application model by updating the display of any bound data when a change occurs. Data Binding is another important concept to the Angular.js framework
Good one
ReplyDeleteThanks for the flow diagram.
ReplyDelete