Overview
This section explains the process of AngularJS initialization and how you should modify AngularJS initialization when needed.
AngularJS's <script> tag
This example shows our recommended method of integrating AngularJS, which is called "auto-initialization".
The code copy is as follows:
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
...
<script src="angular.js"><script>
</body>
</html>
formatDate
1. Place the script tag in the above code at the bottom of the page. Putting the script tag at the bottom shortens the application loading time, because the HTML loading will not be blocked by the loading of the angular.js script. You can get the latest version from http://code.angularjs.org. Please do not refer to this URL in your code, as it will expose the security risks of your site. If it is just an experimental development, there is no problem linking to our site.
1).angular-[version].js is a readable version suitable for development and debugging.
2).angular-[version].min.js is a compressed and obfuscated version, suitable for deployment in molded products.
2. Please put the ng-app directive into the root node of your application's tag. If you want AngularJS to automatically execute the entire <html> program, put it in the <html> tag.
The code copy is as follows:
<html ng-app>
3. If you want to use the old version of the instruction syntax: ng:, you also need to write xml-namespace in <html> to make AngularJS work normally under IE. (This is done for some historical reasons, and we do not recommend continuing to use the ng: syntax.)
The code copy is as follows:
<html xmlns:ng="http://angularjs.org">
Automatic initialization
AngularJS will be executed when the DOMContentLoaded event is triggered and will use the ng-app directive to find your application root scope. If the ng-app directive is found, AngularJS will:
1. Load modules related to instruction content.
2. Create an application's "injector".
3. The ng-app directive tag is the root node to compile the DOM. This allows you to specify only a portion of the DOM as your AngularJS application.
The code copy is as follows:
<!doctype html>
<html ng-app="optionalModuleName">
<body>
I can add: {{ 1+2 }}.
<script src="angular.js"></script>
</body>
</html>
Manual initialization
If you need to take the initiative to control the initialization process, you can use the method of manually executing the boot program. For example, when you use a "script loader" or need to do some operations before AngularJS compiles the page, you will use it.
The following example demonstrates how to manually initialize AngularJS. Its effect is equivalent to using the ng-app directive.
The code copy is 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>
Here are some orders that your code must follow:
1. After the page and all scripts are loaded, find the root node of the HTML template - usually the root node of the document.
2. Call api/angular.bootstrap to compile the template into an executable, data-binding application.