In the previous section, the Angular js framework is briefly introduced. In this section, Angular's Bootstrap (bootstrap) and Compiler (compilation) mechanisms will be continued.
1: Bootstrap: Angular initialization
1: The initial automation recommended by Angular is as follows:
<!doctype html><html xmlns:ng="http://angularjs.org" ng-app><body>...<script src="angular.js"></body></html
Use ngapp to mark the root node where you need to automatically boot the application, which is generally a html tag. When the DOMContentLoaded event triggers Angular, it will automatically find the ngapp as the root node of the application. If it is found, the following operations will be performed:
1. Load module (module) related directive (instructions).
2. Create an application injector (Angular's injection mechanism).
3. Compile and process ng-app as the root node instructions. This allows you to customize the selection of DOM node as the application root node.
<!doctype html><html ng-app="optionalModuleName"><body>I can add: {{ + }}.<script src="angular.js"></script></body></html>2: Manual initialization:
If you want to have more control over the initialization, you can use a custom manual boot method to initialize instead of angular's automatic initialization. For example, you need to do something before angular compiling the template, such as changing certain contents of the template. The manual boot method will be as follows:
<!doctype html><html xmlns:ng="http://angularjs.org"><body>Hello {{'World'}}!<script src="http://code.angularjs.org/angular.js"></script><script>angular.element(document).ready(function() {angular.bootstrap(document);});</script></body></html>1. After all the code on the page is loaded, find the html template root node (typical document element).
2. Call api/angular.bootstrap (angular.bootstrap(element[, modules])) to compile the template to make it executable.
Two: Compiler: Angular's translation
Angular's compilation mechanism allows developers to add new HTML syntax to the browser, allowing us to add some html nodes, attributes, and even create some custom nodes, attributes. Angular expands these behaviors into directives.Angular brings useful directives and allows us to create domain-specific directives.
1: Compiler processing is divided into two steps:
1. Convert DOM, collect directive, and return Link (connection) function.
2. Merge the instructions and Scope to generate a living View. Any changes in the scope mode will be reflected into the view and user interactions from the view will also be synchronized to the scope model, and scope is a single data source.
2: Directive command
Directive is an act that will be processed by special HTML design editing. It can be placed on the names, attributes, class of the node, or even in the html comment. Here is the equivalent writing method of Angular's own ng-bind:
<span ng-bind="exp"></span><span></span><ng-bind></ng-bind><!-- directive: ng-bind exp >
Directive is just a function that will be executed by Angular in the dom. Here is an example of dragging and drops that can be applied to the attribute of span and 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
you can drag and move me to anywhere!
3: View understanding
Many template engines are designed to merge templates and models to return a string, and then append to the DOM node using innerHTML, which is thought that any changes in data must be re-merged to generate new content and appended to the DOM. The following figure belongs to one-way binding technology:
Angular does not use directive instructions rather than strings. The return value is a link function that merges data model. The binding of view and model is automatic and transparent, and does not require developers to add additional actions to update the view. Angular is not only a binding of data model, but also a concept of behavior. As a two-way binding, the shape is as follows:
material:
1.Angular official website: http://angularjs.org/
2. Code download: https://github.com/angular/angular.js
The above is the Angular Bootstrap and Compiler mechanisms introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!