The angular JS framework is briefly described in the previous section, where the angular bootstrap (bootstrap) and compiler (compilation) mechanisms will continue.
One: Initialization of Bootstrap:angular
The initial automation recommended by 1:angular is as follows:
<!doctype html>
Use Ngapp to mark the root node of the application that you need to automatically boot, typically HTML tag. The domcontentloaded event triggers the angular to automatically look for Ngapp as the root node of the application and, if found, does the following:
1. Load module (module) related directive (instruction).
2. Create the application injector (angular injection mechanism).
3. Compile the instructions that handle Ng-app as the root node. This allows you to customize the Select Dom node as the application root node.
<!doctype html>
2: Manual initialization:
If you want to have more control over the initialization, you can initialize the automatic initialization instead of the angular by using a custom manual boot method. For example, you need to do something before angular the template, such as changing some of the template's content. The manual boot method will be as follows:
<!doctype html>
1. After all the page code is loaded, locate the HTML template root node (typically the document element).
2. Call Api/angular.bootstrap (Angular.bootstrap (element[, modules)) to compile the template so that it can be executed.
Second: the compilation of Compiler:angular
Angular's compilation mechanism allows developers to add new HTML syntax to the browser, allowing us to add some HTML nodes, attribute, or even create custom nodes, attribute. Angular the extension of these actions into instructions Directives.angular brings useful directive and allows us to create directive in specific areas.
1:compiler processing is divided into two steps:
1. Convert DOM, collect Directive, return link (join) function.
2. Merge directives and scope create a living view. Any changes in SCOP mode are reflected in the view, and the user interaction from view is synchronized to the scope model, and scope is a single data source.
2: Instruction directive
Directive is a behavior that will be handled by special HTML design edits. It can be placed on the nodes ' names, attributes, class, or even HTML annotations. The following is the equivalent of the angular ng-bind:
<span ng-bind= "Exp" ></span> <span class= "NG-BIND:EXP;" ></span> <ng-bind></ng-bind> <!--directive:ng-bind exp–>
Directive is just a function that will be executed in the DOM by angular. Here is a drag-and-drop example that can be applied to the attributes of Span,div:
Angular.module (' drag ', []). directive (' draggable ', function ($document) {
var startx =,
starty =,
x =,
y =;
return function (scope, element, attr) {
element.css {
position: ' relative ',
border: ' px 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);
}
}
);
Demo
Can drag and move me to anywhere!
3:view understand
There are a number of template engines that are designed to merge the template (template) and data (model) to return a string and then use innerHTML to append to the DOM node, which means that any changes to the data must be merged to generate new content appended to the DOM. The figure below is a one-way binding technique:
Angular, however, uses the directive instruction instead of the string, and the return value is a link function that merges the data model. The view and model bindings are automatic, transparent and do not require the developer to add additional actions to update view,angular here is not only the data model binding, but also the concept of behavior. As a two-way binding, form the following figure:
Information:
1.Angular Official website: http://angularjs.org/
2. Code Download: https://github.com/angular/angular.js
The above is a small set to introduce the angular of the Bootstrap (guide) and compiler (compilation) mechanism, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
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
