ANGULARJS implementation process Detailed introduction _angularjs

First, the start-up phase

As you all know, when a browser loads an HTML page, it parses the HMTL page into a DOM tree, and then loads each element node in the DOM tree one at a time. We can use the Angularjs as a jquery-like JS Library, we introduce <script> tags into the HTML, then angular as a normal DOM node waiting for browser parsing, when the browser resolves to this node, Found that it is a JS file, then the browser will stop parsing the remaining DOM nodes, start executing this JS (ie angular.js), while angular will set up an event listener to monitor the browser domcontentloaded events. When angular hears this event, it starts the angular application.

Second, the stage of initialization

When angular starts, it looks for the Ng-app instructions, initializes a series of necessary components (i.e., $injector, $compile Services, and $rootscope), and then starts to parse the DOM tree again.

Third, compile, link

$compile Service finds DOM elements that have declarative directives by traversing the DOM tree. When a DOM element with one or more directives is encountered, it sorts the instructions (based on the priority priority of the instruction) and then uses the $injector service to find and collect the compile function of the instruction and execute it.

After each node's compilation method is run, the $compile service invokes the link function. This link function sets the monitoring for the instructions that bind the enclosing scope. This behavior creates a live view.

Finally, when the $compile service is complete, the ANGULARJS is ready to run.

Iv. operation phase

Angular provides an event loop of its own. The instruction itself registers the event listener, so when the event is triggered, the instruction function runs in the Angularjs $digest loop. The $digest loop waits for the $watch expression list, and when the model changes are detected, the $watch function is called, and then the $watch list is viewed again to ensure that no model is changed.

Once the $digest loop stabilizes and detects no potential changes, the execution moves away from the angular context and usually goes back to the browser, where the DOM will be rendered.

Draw the key steps of the above process into a graph, as follows:

The above is the ANGULARJS implementation process of the detailed introduction, follow-up to continue to collate relevant information, thank you for your support to this site.