Angular-Bootstrap and Compiler

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.