Home>

First of all, let ’s look at a small piece of code (index.html).What does angular do step by 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 your browser to access index.html, the browser does the following things in order:

Load html and parse it into dom;Load angular.js script;angularjs waits for the domcontentloaded event to fire;angularjs looks for the ng-app instruction and determines the application boundary according to this instruction;Configure $injector with the module specified in ng-app;Use $injector to create $compile service and $rootscope;Compile the dom using the $compile service and link it to $rootscope;The ng-init instruction assigns a value to the variable name in the scope;Replace the expression {{name}},So it says "hello world!"

The whole process can be represented by this diagram:

Well, through the above example we know how angularjs renders a page step by step.So how does it interact with the browser's event loop?Or how do you interact with the user?Roughly speaking,There are three main phases:

1. The browser's event loop has been waiting for the event to fire,Events include user interaction, timed events, or network events (such as server responses);

2. Once an event is triggered,Will enter the context of javascript, generally modify the dom through a callback function;

3. After the execution of the callback function is completed,The browser renders a new page based on the new dom.

As the next picture shows,The interaction process consists of several loops:

AngularJS modifies the general javascript workflow and provides its own event handling mechanism.This separates the javascript context into two parts,One part is the context of native javascript and the other is the context of angularjs. Only operations in the context of angularjs can enjoy angular data-binding, exception handling, property watching and other services. It ’s not that we do n’t meet at all,You can use the $apply () function provided by angularjs to wrap these outsiders into the context of angularjs to make angular aware of the changes they generate.

Next, let's take a look at how these loops work during the interaction?

1. First, the browser will always be listening.Once an event is triggered,Will be added to an event queue, and the events in the event queue will be executed one by one.

2. If the events in the event queue are wrapped by $apply (),Will enter the context of angularjs, where fn () is the function we want to execute in the context of angularjs.

3. angularjs will execute fn () function, usually,This function changes some states of the application.

4. Then angularjs will enter the $digest loop consisting of two small loops, one loop is used to process the $evalasync queue (to schedule some operations that need to be processed before rendering the view,Usually implemented by settimeout (0), the speed will be slower,There may be problems with view jitter), a loop is processing a $watch list (a collection of expressions,Once something changes,Then the $watch function will be called). The $digest loop will iterate until the $evalasync queue is empty and the $watch list is empty.That is, there is no longer any change in the model.

5. Once the $digest loop of angularjs ends,The entire execution will leave the context of angularjs and javascript, and then the browser will re-render the view with the changed data.

Next, let's parse it with code:

<! 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 code and the previous code is that there is an input to receive user input.When using a browser to access this html file,The ng-model instruction on the input will bind the keydown event to the input, and will suggest a $watch for the name variable to receive notification of the variable value change.The following series of events occur during the interaction phase:

1. When the user presses a key on the keyboard (such as a), the keydown event on the input is triggered;

2. The instruction on the input detects the change in the value in the input.Call $apply ("name =" a "") to update the model in the context of angularjs;

3. angularjs assigns "a" to name;

4. The $digest cycle starts,$watch list detected a change in the value of name,Then notify the {{name}} expression and update the dom;

5. Exit the context of angularjs, and then exit the keydown event in the context of javascript;

6. The browser re-renders the view.

  • Previous Graphical tutorial for installing LAMP on Ubuntu Server 1604 LTS
  • Next JS component series initializes JS components using data attributes of HTML tags