Home > Article > Web Front-end > AngularJS initialization process analysis (bootstrap)_AngularJS
AngularJS initialization process analysis (bootstrap)_AngularJS
- WBOYOriginal
- 2016-05-16 16:28:431123browse
Overview
This section explains the AngularJS initialization process and how you can modify AngularJS initialization when needed.
AngularJS’s <script> tag </strong></p>
<p>This example shows our recommended method of integrating AngularJS, which is called "auto-initialization". </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="79377" class="copybut" id="copybut79377" onclick="doCopy('code79377')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code79377">
<br>
<!doctype html><br>
<html xmlns:ng="http://angularjs.org" ng-app><br>
<body><br>
...<br>
<script src="angular.js"><script><br>
</body><br>
</html><br>
</div>
<p><strong>formatDate</strong></p>
<p>1. Place the script tag in the above code at the bottom of the page. Placing the script tag at the bottom shortens the application loading time because the loading of HTML will not be blocked by the loading of angular.js scripts. You can get the latest version from http://code.angularjs.org. Please do not reference this URL in your code, as it will expose your site's security risks. If this is an experimental development, there is no problem with linking to our site. </p>
<p>1).angular-[version].js is a readable version suitable for development and debugging. <br>
2).angular-[version].min.js is a compressed and obfuscated version, suitable for deployment into mature products. </p>
<p>2. Please put the ng-app directive in the tag root node of your application. If you want AngularJS to automatically execute the entire <html> program, put it in the <html> tag. <br>
</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="71091" class="copybut" id="copybut71091" onclick="doCopy('code71091')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code71091">
<br>
<html ng-app><br>
</div>
<p>3. If you want to use the old version of the instruction syntax: ng:, you also need to write the xml-namespace in <html> to make AngularJS work properly under IE. (This is done for some historical reasons, we do not recommend continuing to use the ng: syntax.) </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="49065" class="copybut" id="copybut49065" onclick="doCopy('code49065')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code49065">
<br>
<html xmlns:ng="http://angularjs.org"><br>
</div>
<p><strong>Automatic initialization</strong></p>
<p>AngularJS will execute when the DOMContentLoaded event is triggered and find your application root scope through the ng-app directive. If the ng-app directive is found, AngularJS will: </p>
<p>1. Load modules related to the content of the command. <br>
2. Create an application "injector". <br>
3. Already have the label of the ng-app directive as the root node to compile the DOM in it. This allows you to specify only a portion of the DOM for your AngularJS application. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="88586" class="copybut" id="copybut88586" onclick="doCopy('code88586')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code88586">
<br>
<!doctype html><br>
<html ng-app="optionalModuleName"><br>
<body><br>
I can add: {{ 1 2 }}.<br>
& Lt; script src = "angular.js" & gt; & lt;/script & gt; <br>
</body><br>
</html><br>
</div>
<p><strong>Manual initialization</strong></p>
<p>If you need to actively control the initialization process, you can use the method of manually executing the boot program. For example, you will use it when you use a "script loader" or need to do some operations before AngularJS compiles the page. </p>
<p>The following example demonstrates the method of manually initializing AngularJS. Its effect is equivalent to using the ng-app directive. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="70023" class="copybut" id="copybut70023" onclick="doCopy('code70023')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code70023">
<br>
<!doctype html><br>
<html xmlns:ng="http://angularjs.org"><br>
<body><br>
Hello {{'World'}}!<br>
<script src="http://code.angularjs.org/angular.js"></script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});