Home > Developer > Web Develop
The Angular js framework is briefly introduced in the previous section. In this section, the Angular Bootstrap and Compiler compilation mechanisms will continue.
I. Bootstrap: Angular Initialization
1: The automation initialization of Angular recommendations is as follows:
<! Doctype html>
<Html xmlns: ng = "http://angularjs.org" ng-app>
<Body>
...
<Script src = \ '# \' "/p>
</Body>
</Html
Use ngapp to identify the root node of the application to be automatically guided. Generally, it is an html tag. Angular triggered by the DOMContentLoaded event will automatically search for ngapp as the root node of the application. If it is found, the following operations will be performed:
& Lt ;! Doctype html>
<Html ng-app = "optionalModuleName">
<Body>
I can add: {1 + 2 }}.
<Script src = \ '# \' "/script>
</Body>
</Html>
2: manual initialization:
If you want to have more control over initialization, you can use a custom manual Bootstrap Method to initialize instead of angular's automatic initialization. For example, you need to do something before angular compiles the template, for example, changing the template content. The manual guide method is as follows:
<! Doctype html>
<Html xmlns: ng = "http://angularjs.org">
<Body>
Hello {'World '}}!
<Script src = \ '# \' "// code.angularjs.org/angular.js"> </script>
<Script>
Angular. element (document). ready (function (){
Angular. bootstrap (document );
});
</Script>
</Body>
</Html>
Ii. Compilation of Compiler: Angular
Angular's compilation mechanism allows developers to add new Html syntaxes to browsers, and allows us to add html nodes, attributes, and even create custom nodes and attributes. Angular expands these behaviors into directive ctictives. Angular brings useful direve VE and allows us to create directive for specific fields.
1: Compiler processing involves two steps:
2: Directive direve ve
Directive is a behavior that will be specially edited by html design. It can be placed in node names, attributes, class, or even html comments. The following is the equivalent method of ng-bind provided by Angular:
Directive is just a function that will be executed by Angular In the dom. The following is a drag-and-drop instance, which can be applied to the attribute of span and div:
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 );
}
}
});
3: view Comprehension
Many template engines are designed to merge templates and models to return a string, and then append innerHTML to the DOM node, this means that any changes to the data must be re-merged to generate new content appended to the DOM. This is a one-way binding technology:
650) this. width = 650; "style =" border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px "title =" 2012-8-13 23-33-08 "border =" 0 "alt =" 2012-8-13 23-33-08 "height =" 304 "src =" http://www.bkjia.com/uploads/allimg/131228/125G21W0-0.png "/>
Angular uses different directive commands instead of strings. The returned value is a link function that combines data models. The binding of view and model is automatic and transparent. You do not need to add additional actions to update the view. Angular is not only the binding of data model, but also the concept of behavior. As a two-way binding, such:
650) this. width = 650; "style =" border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px "title =" 2012-8-13 23-33-08 "border =" 0 "alt =" 2012-8-13 23-33-08 "height =" 315 "src =" http://www.bkjia.com/uploads/allimg/131228/125G26293-1.png "/>
MATERIALS:
Angular essay:
Other chapters are still being translated... I hope you will give me more advice. I will not translate them completely according to the original text, but I will understand them myself.
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
