Overview
AngularJS's HTML compiler allows the browser to recognize new HTML syntax. It allows you to associate behaviors to HTML elements or attributes, and even allows you to create new elements with custom behaviors. AngularJS calls this behavior extended to "instructions"
HTML has many declarative structures to control the format when writing static pages. For example, if you want to center a content, you don’t have to tell the browser to “find the midpoint of the window and combine it with the middle of the content.” You just need to add an align="center" attribute to the element that needs to be centered. This is the power of declarative language.
But declarative languages also have something that cannot be achieved, and one of the reasons is that you cannot use it to enable browsers to recognize new syntax. For example, if you don’t center the content, but to 1/3 of the left, it won’t be able to do it. So we need a way to enable the browser to learn new HTML syntax.
AngularJS students come from some instructions that are very useful for creating apps. We also hope that you can create some instructions that are useful for your own applications. These extended instructions are the "Domain Specific Language" that you create the APP.
The compilation process will occur on the browser side; the server side will not participate in any steps, nor will it be precompiled.
Complier
The compiler is a service provided by AngularJS. It searches for properties related to it by traversing the DOM. The entire compilation process is divided into two stages.
1. Compilation: traverse the DOM and collect all relevant instructions to generate a link function.
2. Link: Bind a scope to the directive and generate a dynamic view. Any changes to the scope model will be reflected on the view, and any user actions on the view will be reflected on the scope model. This makes the scope model the only thing you need to care about in your business logic.
There are some instructions, such as ng-repeat, which clones every DOM element in the data set once. The practice of dividing the entire compilation process into two stages: compilation and linking improves overall performance, because the cloned template only needs to be compiled once in total, and then linked to their respective model instances.
instruction
The directive indicates "the action that should be performed when the associated HTML structure enters the compilation phase". Directives can be written in the name of the element, in the attribute, in the css class name, and in the comments. Below are several examples of using the ng-bind directive with the same function.
The code copy is as follows:
<span ng-bind="exp"></span>
<span></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->
Directives are essentially just functions that need to be executed when the compiler compiles to the relevant DOM. You can find more detailed information about directives in the directive API documentation.
Below is a command that makes elements draggable. Note the draggable attribute in the <span> element.
index.html:
The code copy 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:
The code copy 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);
}
}
});
This new behavior can be achieved by adding the draggable attribute. The beauty of our improvement is that we give the browser new capabilities. We have used a natural way to expand the browser's ability to understand new behaviors and new syntaxes as long as the developer is familiar with HTML rules.
Understand the view
There are many template systems online. Most of them "bind static character templates and data, generate new characters, and insert them into page elements through innerHTML".
This means that any changes in the data will cause the data to be recombined with the template to generate new characters and then inserted into the DOM. The problems that arise include: user input needs to be read and combined with model data, user input needs to be overwritten, the entire update process needs to be manually managed, and the lack of rich expressions.
AngularJS is different. The AngularJS compiler uses DOM with instructions, rather than string templates. It returns a link function, which combines with the scope model to generate a dynamic view. The binding process of this view and model is "transparent". The developer does not need to do anything about updating the view. And the application does not use innerHTML, so we don’t have to overwrite the user’s input. More particularly, Angular's directives can not only use string binding, but also use some structures that indicate behavior.
AngularJS compilation will generate a "stable DOM". This means that instances of DOM elements bound to the data model will not change during the life cycle of the binding. This also means that the code can obtain instance references of DOM elements and register events, without worrying that this reference will be lost when the template and data are combined.