Personally, it is necessary to understand the operation mechanism of ANGULARJS, so as to avoid falling into the pit. In this article, I will be based on the information on the Internet and their understanding of the Angularjs in the start, each step has done something, do a more clear and detailed analysis.
First a little piece of code (index.html), combining the code let's see what angular has done in one step.
<!doctype html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body>
<png-init=" name='World' ">Hello {{name}}!</p>
</body>
</html>
When you use the browser to visit the index.html, the browser does the following things in turn:
The whole process can be represented by this picture:
Well, through the example above we know how ANGULARJS is rendering one page at a one step. So how does it interact with the browser's event loop? Or how to interact with the user? Roughly speaking, it is divided into three main stages:
1. The event loop of the browser waits for the trigger of the event, including the user's interactive operation, timed event or network event (such as server response, etc.);
2. Once an event is triggered, it will go into the JavaScript context, usually through the callback function to modify the DOM;
3. When the callback function completes, the browser renders the new page based on the new DOM.
As shown in the following illustration, the interaction process consists primarily of several loops:
Angularjs modifies the generic JavaScript workflow and provides its own event-handling mechanism. This separates the JavaScript context into two parts, one in the context of native JavaScript and the other in Angularjs. Only in the context of ANGULARJS operation to enjoy the angular data-binding, exception handling, property watching and other services, But for outsiders (such as native JavaScript operations, custom event callbacks, third party libraries, etc.), angular is not an audience, you can use the $apply () function provided by ANGULARJS to wrap these outsiders into the ANGULARJS context. Let angular perceive the changes they have made.
Next, let's take a look at how these loops work in the interactive process.
1. First of all, the browser will always be in the listening state, once the event is triggered, it will be added to an event queue, events queue in a single execution.
2. Events in the event queue, if they are wrapped by $apply (), are entered into the ANGULARJS context where FN () is the function we want to execute in the ANGULARJS context.
3. Angularjs will perform the FN () function, which in general will change some of the states of the application.
4. Then Angularjs will enter into a $digest loop consisting of two small loops, a loop that is used to process $evalasync queues (used to schedule some operations that need to be handled before rendering the view, usually through settimeout (0), The speed will be slower, the problem of the view jitter may occur), and a loop is to process the $watch list (a collection of expressions that, if any change occurs, the $watch function will be invoked). The $digest loop will iterate until the $evalasync queue is empty and the $watch list is empty, that is, the model no longer has any changes.
5. Once the Angularjs $digest cycle is over, the entire execution leaves the context of angularjs and JavaScript, and the browser then renders the data changed view again.
Next, we will combine the code to parse:
<!doctype html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body>
<input ng-model="name">
<p>Hello {{name}}!</p>
</body>
</html>
The only difference between this piece of code and the previous one is that you have an input to receive the user's input. When using the browser to access this HTML file, the Ng-model instruction on input will bind the KeyDown event to input, and will give the name variable a $watch to receive notification of variable value change. The following sequence of events occurs primarily during the interaction phase:
1. When the user presses a key on the keyboard (for example, a), triggering the KeyDown event on input;
2. Input on the instructions to detect changes in input values, call $apply ("Name= ' A") update in the context of the ANGULARJS model;
3. Angularjs assigns ' A ' to name;
4. $digest loop begins, $watch list detects changes to the name value, and then notifies the {{name}} expression to update the DOM;
5. Exit the context of the ANGULARJS and exit the KeyDown event in the JavaScript-box;
6. The browser renders the view again.
The above is the ANGULARJS working principle of data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
