Angularjs HTML compiler detailed and sample code _ANGULARJS

The original text is renewed, the book is connected to ... Still refer to Http://code.angularjs.org/1.0.2/docs/guide/compiler

First, the overall

Angular's HTML compiler allows developers to customize new HTML syntax. compiler allows us to append behavior to arbitrary HTML elements or attributes, even to new HTML tags, attributes (such as <beautiful girl= "CF" ></beautiful >). Angular these additional behaviors as directives.

HTML has many predefined HTML style structures that specifically format static documents (you can tell the browser how to display the contents of the markup). Suppose something needs to be centered, and we don't need to teach the browser how to do it (omit n words here). We just need to simply add align= "center" to the label that needs to be centered. This is where the language of the declarative language (declarative) is in the cow X.

But declarative language also has its limitations, that is, you can't tell the browser how to handle syntax outside the predefined range. For example, we can't simply tell the browser how to make text snap at 1/3 of the browser. So, we need a way to keep our browsers abreast of the times and learn new grammar.

Angular a number of directives that are useful for building applications. We can also create our own unique directives of application. These directive extensions will become the "domain-specific language" (Domain specific Language) of our own application.

These compilations will only occur on the browser side, without service-side or precompiled steps.

Second, Compiler

compiler, as a service for angular, is responsible for traversing the DOM structure and looking for attributes. The compilation process is divided into two phases:

1. Compile (Compile): Traverse the DOM node tree to collect all directives. The return result is a linked function (linking functions).

2. Link: Bind directives to a scope (scope) and create a live view. Any changes in scope will be reflected in the view (update view), and any user's activity (change) to the template will be reflected in the scope model (bidirectional binding). This allows the scope model to reflect the correct values.

Some directives, such as ng-repeat, replicate a specific element (combination) for each element in the collection (collection). Compile and link the two phases to improve performance. Because the cloned template (template) only needs to be compiled once, and then a link to the elements in each collection (similar to the template cache).

Third, directive

Directive is a behavior that is triggered when a particular HTML structure is encountered during compilation. Directives can be placed in the element's name, attribute, class, or even comment. Here are several ways to reference ng-bind (a built-in Directive):

<span ng-bind= "Exp" ></span>

<span class= "NG-BIND:EXP;" ></span>

<ng-bind></ng-bind>

<!--directive:ng-bind exp-->

Directive is just a function that executes when the compiler encounters in the DOM. The directive API documentation explains in detail how to create a directive.

Here's a sample that lets an element play Hide-and-seek with your mouse ...

<! DOCTYPE html>  

Adding the attribute "Wildcat" to any element will cause the element to have a new behavior. In this way, we taught the browser how to deal with Hide-and-seek elements (rest assured that you are not in a room, you will not hang-_-!). We have expanded the "vocabulary" of browsers through this approach. For any person familiar with HTML rules, this is a natural way.

It's already late at night, tomorrow will continue ... See you after the ad.

=================== Gorgeous split Line =======================

Iv. Understanding Views (view)

There are many template systems outside, which typically connect to the data through a template string, generate the final HTML string, and write the result into an element with the innerHTML attribute.

This means that when any data changes, it is necessary to merge the data, the template into a string, and then write back to the corresponding element as a innerhtml. Here are some questions: there is no way to understand literal translation. Only yy) assumes that there is a scene where the template contains an input box. User input in the input box, template synchronization update. The Normal template updates the view through innerHTML, strings and data connections, which interrupts the user's input and experiences poorly.

Angular is different from the others. The angular compiler (compiler) handles the DOM through directives instead of processing the string template. The processing result is a link function (linking function) that is merged with the scope model group to generate a real-time template. The view's binding to the scope model is transparent to us. Developers do not need to do any action to update the view, model. Also, user input is not interrupted because the view template is not updated with innerHTML. In addition, angular directives can bind not only literal values but also the structure that owns the behavior (behavioral constructs).

The

Angular This approach produces a stable dom. This means that in the life cycle of a DOM element, it is always bound to an instance of the model, and this relationship does not change. This also means that the code can maintain a reference to a DOM object, register the event function, and that the reference is not destroyed by the template data merge.