angularjs compiler compiler

Angularof theHTML Compilerallows developers to customize newHTMLsyntax. compilerallow us to anyHTMLelement or attribute, even a newHTMLtags, attributes (such as<beautiful girl="CF" ></beautiful >) additional behavior. AngularThese additional behaviors are calleddirectives.

< Span style= "Color:rgb (51,51,51); Font-family:verdana,arial,helvetica,sans-serif; font-size:13px; line-height:24px ">html html Style structure"

But declarative languages also have limitations, such as the inability to handle syntax beyond predefined ranges. While angular pre-binds some directives "attributes" that help build your app, you can also build your own unique directive, and these directive will become our own "domain-specific language"

It is also important to note that these compilations occur only in the native browser, without the need for a server and pre-compilation process.

Second, we will introduce in detail the next compiler

First compiler as a service for angular, is responsible for traversing the DOM structure, looking for attributes, its compilation process is divided into two steps:

1. Compile (compiler): Traverse the DOM node tree and return a link function

2. Link: Bind directives to a scope, create a live view (view), and a small change in scope scope will be updated and displayed with the view, and any user changes to the template will be reflected in the scope Model (bidirectional data binding) so that the scope model can reflect the correct values

somedirectives, such asng-repeat, will be for each in the collection (Collection) to copy a specific element (group) at a time. Compile and link the two phases to improve performance. Because the cloned template(template)only need to compile once and then link the elements in each collection once (similar to the template cache)

Third, directive

Directiveis a behavior that is encountered during the compilation process of a specificHTMLstructure, it will be triggered. directivescan be placed in the element'sname,attribute,classeven in comments. Here are a few referencesNg-bind(a built-inDirective) Method:

<span ng-bind= "exp" ></span><span class= "NG-BIND:EXP;" ></span><ng-bind></ng-bind><!--directive:ng-bind Exp---

Directive Just one when the compiler is in dom function ). directive api In the document detailed how to create a

Below is a sample that allows an element to play hide-and-seek with your mouse ...

<! DOCTYPE html>
AngularCompiler (compiler) bydirectivesprocessingDOM, rather than by processing a string template. The processing result is aScope Modelgroup Merge to generate a link function for the live template (linking function). View andScope Modelthe bindings are transparent to us. Developers do not need to update views,Modeldo any action. And, because there is no useInnerHTMLupdate the view template, so user input is not interrupted. In addition,Angular Directivesnot only can you bind literal values, but it can also be a structure that has behavior