Home > Developer > JavaScript
AngularJS HTML compiler introduction, angularjs Compiler
Overview
AngularJS's HTML compiler allows the browser to recognize the new HTML syntax. It allows you to associate behavior with HTML elements or attributes, and even allows you to create new elements with custom behavior. AngularJS calls this behavior extension as "command"
HTML has many declarative structures to control the format when writing static pages. For example, if you want to center a content, you do not have to tell the browser to "locate the midpoint of the window and then combine it with the content ". You only need to add an align = "center" attribute to the element that needs to center the content. This is the power of declarative languages.
But declarative languages are also powerful, because one of the reasons is that you cannot use them to let browsers recognize New syntaxes. For example, if you don't want to center the content, but place it between the left and the 1/3, then it won't work. Therefore, we need a way for the browser to learn the new HTML syntax.
AngularJS comes with some commands that are very useful for creating apps. We also hope that you can create some useful commands for your own applications. These extended commands are the Domain Specific Language you create an APP )".
The compilation process will occur on the browser side. The server side will not participate in any of these steps, nor do pre-compilation.
Compiler (complier)
The compiler is a service provided by AngularJS. it traverses the DOM to find its related attributes. The entire compilation process is divided into two phases.
1. Compile: traverse the DOM and collect all relevant commands to generate a link function.
2. Link: bind a scope to the command to generate a dynamic view. Any changes to the scope model are reflected in the view, and any user operations on the view are also reflected in the scope model. This makes the scope model the only thing you need to care about in your business logic.
There are some commands. For example, ng-repeat clones each DOM element in the dataset. The entire compilation process is divided into two phases: Compilation and linking to improve the overall performance, because the cloned template only needs to be compiled once in total, then you can link to your model instance.
Command
The command indicates "operations that should be performed when the associated HTML structure enters the compilation stage ". Commands can be written in the element name, attribute, css class name, and comment. Below are several examples of using the ng-bind command with the same functions.
Copy codeThe Code is as follows:
<Span ng-bind = "exp"> </span>
<Span class = "ng-bind: exp;"> </span>
<Ng-bind> </ng-bind>
<! -- Directive: ng-bind exp -->
An instruction is essentially a function that needs to be executed when the compiler compiles the relevant DOM. You can find more detailed instructions in the instruction API documentation.
The following is an instruction that can make elements drag and drop. Note the draggable attribute in the <span> element.
Index.html:
Copy codeThe Code is as follows:
<! Doctype html>
<Html ng-app = "drag">
<Head>
<Script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<Script src = "script. js"> </script>
</Head>
<Body>
<Span draggable> Drag ME </span>
</Body>
</Html>
Script. js:
Copy codeThe Code is as follows:
Angular. module ('drag', []).
Directive ('draggable', function ($ document ){
Var startX = 0, startY = 0, x = 0, y = 0;
Return function (scope, element, attr ){
Element.css ({
Position: 'relative ',
Border: '1px solid red ',
BackgroundColor: 'lightgrey ',
Cursor: 'pointer'
});
Element. bind ('mousedown ', function (event ){
StartX = event. screenX-x;
StartY = event. screenY-y;
$ Document. bind ('mousemove ', mousemove );
$ Document. bind ('mouseup', mouseup );
});
Function mousemove (event ){
Y = event. screenY-startY;
X = event. screenX-startX;
Element.css ({
Top: y + 'px ',
Left: x + 'px'
});
}
Function mouseup (){
$ Document. unbind ('mousemove ', mousemove );
$ Document. unbind ('mouseup', mouseup );
}
}
});
By adding the draggable attribute, any HTML element can implement this new behavior. The beauty of our improvement lies in our new browser capabilities. We use a method that extends the browser's ability to understand New syntaxes as long as developers are familiar with HTML rules.
Understanding View
There are many template systems on the Internet. Most of them are "binding static character templates to data, generating new characters, and inserting them into page elements through innerHTML ".
This means that any changes to the data will cause the data to be replayed with the template to generate new characters and then inserted into the DOM. The following problems may occur: the user input needs to be read and combined with the data of the model. The user input needs to be overwritten, and the entire update process needs to be manually managed, which lacks rich forms of representation.
AngularJS is different. The AngularJS compiler uses a DOM with instructions, rather than a string template. It returns a linked function, which is combined with the scope model to generate a dynamic view. The binding process between this view and the model is "Transparent ". Developers do not need to update the view. In addition, the application does not use innerHTML, so we do not need to overwrite user input. What's more, Angular commands can not only be bound in the form of strings, but also use some structures that indicate behavior.
AngularJS compilation generates a "stable DOM ". This means that the instance bound to the DOM element of the data model will not change in the bound lifecycle. This also means that the code can get the instance reference of the DOM element and register the event. You don't have to worry that this reference will be lost when the template and data are combined.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
