The original text is continued, and the book continues to last. . . Still refer to http://code.angularjs.org/1.0.2/docs/guide/compiler
1. Summary
Angular's HTML compiler allows developers to customize new HTML syntax. compiler allows us to attach behavior to any HTML element or attribute, or even new HTML tags, attributes (such as <beautiful girl="cf"></beautiful >). Angular calls these additional behaviors directives.
HTML has many predefined HTML style structures that specifically format static documents (which can tell the browser how to display the tagged content). Suppose something needs to be centered, and we don’t need to teach the browser how to do it (N words omitted here). We just need to simply add align="center" to the tags that need to be centered. This is the great thing about declarative language.
But declarative languages also have their limitations, that is, you can't tell the browser how to handle syntax outside the predefined scope. For example, we can't tell the browser very simply how to get the text aligned 1/3 of the browser. So, we need a way to keep the browser moving with the times and learn new grammars.
Angular pre-binds some directives that are helpful in building applications. We can also create unique directives for our own applications. These directive extensions will become the "Domain Specific Language" of our own applications.
These compilations will only occur on the browser side and do not require server side or precompilation steps.
2. Compiler
As an Angular service, Compiler is responsible for traversing the DOM structure and finding properties. The compilation process is divided into two stages:
1. Compile: traverse the DOM node tree and collect all directives. The result is a linking function.
2. Link: Bind directives into a scope and create a live view. Any changes in scope will be reflected in the view (update the view); any user's activity (change) to the template will be reflected in the scope model (two-way binding). This allows the scope model to reflect the correct value.
Some directives, such as ng-repeat, copy a specific element (combination) once for each element in the collection. Compilation and linking are two stages to improve performance. Because the cloned template only needs to be compiled once, and then link the elements in each collection once (similar to template cache).
3. Directive
Directive is a behavior that is triggered when a specific HTML structure is encountered during compilation. Directives can be placed in the name, attribute, class, and even comments of elements. Here are a few ways to reference ng-bind (a built-in directive):
<span ng-bind="exp"></span><span></span><ng-bind></ng-bind><!-- directive: ng-bind exp -->
Directive is just a function that executes when the compiler encounters it in the DOM. The directive API documentation explains in detail how to create a directive.
Here is a sample that allows an element to play hide-and-seek with your mouse...
<!DOCTYPE html><html lang="zh-cn" ng-app="HideAnkSeek"><head> <meta charset="UTF-8"> <title>Hidden and seek</title> <style type="text/css"> .ng-cloak { display: none; } </style></head><body><span wildcat> I ran away as soon as I touched~~Come me~~</span><script src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript"> angular.module("HideAnkSeek", []).directive("wildcat", function ($document) { var maxLeft = 400,maxTop = 300; var msg = ["I flash~~", "Catch me~~~", "Yafen butterfly~~", "Oh yes~~", "You are so inferior~!","It's just a little bit!","Continue~~ One day I'll be tired"]; return function (scope, element, attr) { element.css({ "position":"absolute", "border":"1px solid green" }); element.bind("mouseenter", function (event) { element.css({ "left":parseInt(Math.random() * 10000 % maxLeft) + "px", "top":parseInt(Math.random() * 10000 % maxTop) + "px" }).text(msg[parseInt(Math.random() * 10000 % msg.length)]); }).bind("click",function (event) { element.text("Oh My Lady Gaga... You caught..."); element.unbind("mouseenter"); }); }; });</script></body></html>Adding the "wildcat" attribute to any element will make the element have new behavior. In this way, we taught the browser how to deal with elements that will hide and seek (don't worry, you are not in a certain room, you won't hang -_-!). We have expanded the browser's "vocabulary" through this approach. This is a relatively natural way for anyone who is familiar with HTML rules.
It's late at night now, and we'll continue tomorrow. . . See you after the ad
======================= Gorgeous dividing line=============================
4. Understand the View (View)
There are many template systems outside, which usually connect to data through template strings, generate the final HTML string, and write the result into an element through the innerHTML attribute.
This means that when any data changes, the data and templates need to be merged into strings again, and then written back to the corresponding element as innerHTML. There are some problems here: (I really can't understand the literal translation here...only YY) Suppose there is such a scene, and the template contains the input box. The user enters the input box and the template is updated synchronously. Normal templates update views through innerHTML, strings and data connections, which will interrupt user input and have a bad experience.
Angular is unique. Angular compiler (compiler) processes DOM through directives, not by processing string templates. The processing result is a linking function that combines with scope model and generates a real-time template. The binding of the view to the scope model is transparent to us. Developers do not need to do any actions to update views or models. Moreover, since the view template is not updated with innerHTML, user input will not be interrupted. In addition, angular directives can not only bind text values, but also be behavioral constructs.
This processing method of Angular produces a stable DOM. This means that during the life cycle of the DOM element, it is always bound to an instance of a certain model, and this relationship will not change. This also means that the code can keep a reference to a DOM object, register event functions to it, and that this reference will not be destroyed by template data merging.