The first article of AngularJs study notes series, I hope I can keep writing it. The content of this article mainly comes from the content of the http://docs.angularjs.org/guide/ document, but it also adds some of your own understanding and attempt results.
1. Summary
This article explains the process of Angular initialization and how to manually initialize Angular when you need it.
2. Angular <script> tag
This example is used to show how to integrate Angular through the recommended path to achieve automatic initialization.
<!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html>
Place the sciprt tag at the bottom of the page. This can prevent the loading of HTML by loading angular.js, thereby reducing the loading time of the application. We can get the latest version of angularJs in http://code.angularjs.org. For security reasons, do not directly refer to this address in the product to load the script. But if it is just for research and learning, it doesn’t matter if it is direct connection.
Select: angular-[version].js is a version that is convenient to read and is suitable for daily development and debugging.
Select: angular-[version].min.js is a compressed and obfuscated version that is suitable for use in the final product.
Place "ng-app" into the root node of the application. If you want angular to automatically start your application, you can usually place it in the <html> tag.
<html ng-app>
If we need to use the old school-style directive syntax "ng:", then we need to add an xml-namespace into the html tag to "please" the IE. (This is a historical reason, and we don't recommend using ng:)
<html xmlns:ng="http://angularjs.org">
3. Automatic initialization
Angular will be automatically initialized in the DOMContentLoaded event, and Angular will find the application root node specified by you through the ng-app directive. If found, Angular will do the following:
Load directives related to module.
Create an application-related injector (dependence manager).
Specify the root node with ng-app and start the relevant "compilation" work of the DOM. In other words, a portion of the page (not <html>) can be used as the root node, thereby limiting the scope of angular.
<!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> Here is the outside of ng-app~~{{1+2}} <div ng-app> Here is the inside of ng-app~~~{{1+3*2}}</div> <script src="../angular-1.0.1.js" type="text/javascript"></script></body></html>Note: The "ng-cloak" in it is used before the angular.js compilation is completed (yes! That's right! It's before the compilation is completed, not before the angularjs loads. Therefore, if you want to avoid this situation well, the best way is to optimize the application's loading process, or combine CSS to process uncompiled templates. Since the evil ie6 and 7 do not support attribute selectors, it is best to use class="ng-cloak" method. After the compilation is completed, this class or attribute will be deleted.) Hide the template to avoid displaying the original template on the page.
4. Manual initialization
If we want to further control the initialization process (for example, you need to load angular.js through script loader or do some operations before angular compilation page), then we can use a manually called startup method instead.
The following example is equivalent to using ng-app, the 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> Here is the outside of ng-app~~{{1+2}} <div id="rootOfApp">This is the inside of 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. After the page and other code are loaded, find the root node of the application template;
2. Call angular.bootstrap and let angular compile the template into an executable, two-way binding application!
We will continue to add relevant articles in the future. Thank you for your support for this site!
Related articles:
AngularJs bootstrap is equipped with the front-end framework - js control part
AngularJs bootstrap is equipped with front-end framework - basic page
AngularJs bootstrap equipped with front-end framework - preparation work
AngularJs bootstrap detailed explanation and sample code