Angularjs Learning Notes series of the first, I hope I can stick to write down. This article is mainly from the content of the http://docs.angularjs.org/guide/document, but also add a bit of their own understanding and trial results.
First, the overall
This article is used to explain the process of angular initialization and how to manually initialize angular when you need it.
Second, angular <script> label
This example shows how to automate initialization by consolidating angular through recommended paths.
<!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html>
Place the Sciprt label at the bottom of the page. This avoids loading the HTML because of loading angular.js, thereby reducing 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 you're just studying and using it, it's OK to connect directly.
Selection: Angular-[version].js is a convenient reading version, suitable for daily development, debugging and use.
Selection: Angular-[version].min.js is a compressed, confusing version, suitable for final product use.
Place "Ng-app" into the root node of the application, and if you want angular to automatically start your application, you can usually place it in the
If we need to use the old fashioned directive syntax "NG:" Then we need to add a xml-namespace to the HTML tag to "please" IE. (This is a historical reason and we do not recommend NG:)
Third, automatic initialization
Angular will automatically initialize in the Domcontentloaded event, angular will find the application root node that you specified through Ng-app this directive. If found, angular will do the following things:
Loads the directive associated with the module.
Create an application-related injector (dependency manager).
Start the related "compile" work on the DOM by specifying the root node in Ng-app. In other words, you can limit the scope of angular by taking part of the page (not
<! DOCTYPE HTML>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
<title> Bootstrap-auto </ title>
<style type = "text / css">
.ng-cloak {
display: none;
}
</ style>
</ head>
<body>
This is outside the ng-app ~~ {{1 + 2}}
<div ng-app class = "ng-cloak"> This is inside ng-app ~~~ {{1 + 3 * 2}} </ div>
<script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script>
</ body>
</ html>
Note: the "Ng-cloak" inside, which is used before the Angular.js compilation is complete (yes!). That's right! Before the compilation is complete, not before the ANGULARJS load completes. Therefore, if you want to avoid this situation, the best way is to optimize the application of the loading process, or the combination of CSS to do not compile the 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, this class or attribute is deleted. Hide the template to avoid displaying 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 through the script loader or do something in front of the angular compile page), then we can use a manually invoked startup method instead.
The following example is equivalent to using ng-app this directive:
<! DOCTYPE HTML>
<html lang = "zh-cn">
<head>
<meta charset = "UTF-8">
<title> Bootstrap-manual </ title>
<style type = "text / css">
.ng-cloak {
display: none;
}
</ style>
</ head>
<body>
This is outside the ng-app ~~ {{1 + 2}}
<div id = "rootOfApp" class = "ng-cloak"> This is inside ng-app ~~~ {{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>
</ html>
That is, our code can be written in the following steps:
1. The root node of the application template is found after the page and other code loading is completed;
2. Call Angular.bootstrap, let angular to compile the template into an executable, two-way binding application!
Follow-up to continue to add related articles, thank you for your support of this site!
Related articles:
Angularjs Bootstrap carries the front frame--js Control Section
Angularjs Bootstrap with front frame--Basic page
Angularjs Bootstrap equipped with front frame--Preparation
Angularjs Bootstrap detailed and sample code
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
