Home > Developer > JavaScript
AngularJS Initialization Process Analysis (Pilot Program), angularjs Initialization
Overview
This section explains the initialization process of AngularJS and how to modify the initialization of AngularJS when necessary.
<Script> label of AngularJS
This example shows the recommended method for integrating AngularJS, which is called "automatic initialization ".
Copy codeThe Code 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. Put the script tag at the bottom to shorten the application loading time, because HTML loading will not be blocked by the loading of angular. js scripts. You can get the latest version from the http://code.angularjs.org. Please do not reference this URL in your code, because it will expose the security risks of your site. If it's just lab-based development, it's okay to link 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 and is suitable for deployment in molding products.
2. Place the ng-app command in the tag root node of your application. If you want AngularJS to automatically execute the entire
Copy codeThe Code is as follows:
<Html ng-app>
3. If you want to use the old command syntax ng:, you also need to write xml-namespace in
Copy codeThe Code is as follows:
<Html xmlns: ng = "http://angularjs.org">
Automatic Initialization
AngularJS runs the command when the DOMContentLoaded event is triggered and uses the ng-app command to find the root scope of your application. If the ng-app command is found, AngularJS will:
1. Load modules related to the instruction content.
2. Create an injector for the application )".
3. You already have the ng-app command label as the root node to compile the DOM. This allows you to specify only a part of the DOM as your AngularJS application.
Copy codeThe Code 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 Bootstrap program. For example, if you use "script loader" or you need to perform some operations before AngularJS compiles the page, you will use it.
The following example demonstrates how to manually initialize AngularJS. The effect is equivalent to using the ng-app command.
Copy codeThe Code 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>
Below are some of the sequence 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, two-way data binding application.
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
