Home > Developer > Web Develop
http://my.oschina.net/fuckBAT/blog/375579
Angular 's compilation mechanism allows developers to add new HTML syntax to the browser , allowing us to add some HTML nodes,attribute , and even create some custom nodes,attribute. Angular The expansion of these acts into an instruction directives. Angular brings useful Directiveand allows us to create directive in specific areas .
First, the process of angular initialization
How to manually initialize a angular when you need it.
Second,Angular <script> label
<!doctype html>
<body>
...
<script src= "Angular.js" >
</body>
· Place the sciprt tag at the bottom of the page. This avoids loading the HTML by loading angular.js, which reduces the load time of the application. We can get the latest version of Angularjs in http://code.angularjs.org. For security reasons, do not refer to this address directly in the product to load the script. But if it's just research and learning, it doesn't hurt to connect directly.
· Select: Angular-[version].js is a convenient version, suitable for daily development, debugging and use.
· Select: Angular-[version].min.js is a compressed, obfuscated version that is suitable for final product use.
· Place "Ng-app" into the app's root node, and if you want angular to start your app automatically, you can usually place it in the
Third, automatic initialization
Angular is automatically initialized in the domcontentloaded event, Angular will find the application root node that you specified by ng-app this directive. If found, angular will do the following things:
Loads the directive associated with the module.
Create an app-related injector (dependency manager).
Specify the root node with Ng-app and begin the related "compile" work on the DOM. In other words, one part of the page (not
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Bootstrap-auto</title>
<style type= "Text/css" >
. ng-cloak {
Display:none;
}
</style>
<body>
here is Ng-app outside the ~~{{1+2}}
<div ng-app> Here is Ng-app inside ~~~{{1+3*2}}</div>
<script src= ". /angular-1.0.1.js "type=" Text/javascript "></script>
</body>
Note: Inside the "ng-cloak", this is used before the Angular.js compilation is completed (right!) That's right! Is before the ANGULARJS load is completed before the completion of the compilation. Therefore, if you want to avoid this situation well, the best way is to optimize the application loading process, or the combination of CSS to the non-compiled template processing. And because of that evil IE6, 7 does not support the property selector, so it is best to use the class= "ng-cloak" approach. When the compilation is complete, the class or attribute is deleted. ) Hide the template and avoid showing the original template on the page.
Four, manual initialization
If we want to further control the initialization process (for example, if you need to load angular.js via script loader or do something in front of the angular compile page), then we can replace it with a manual invocation of the startup method.
The following example is equivalent to using the NG-APP directive:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Bootstrap-manual</title>
<style type= "Text/css" >
. ng-cloak {
Display:none;
}
</style>
<body>
This is ng-app outside of ~~{{1+2}}
<div id= "Rootofapp" > here is Ng-app inside ~~~{{1+3*2}}</div>
<script src= ". /angular-1.0.1.js "type=" Text/javascript "></script>
<script type= "Text/javascript" >
Angular.element (document). Ready (function () {
Angular.bootstrap (Angular.element (document.getElementById ("Rootofapp"));
});
</script>
</body>
That is, our code can be written in the following steps:
1. after loading the page and other code, find the root node of the application template;
2. call Angular.bootstrap, let angular to compile the template into an executable, two-way binding application! Here Angular.bootstrap (element,[modules]) is a compile command,[modules] does not seem to write, the problem will be updated later
Angularjs Learning Note 11_ Manual initialization
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
