Of Stack

The AngularJS initialization process analyzes the of bootstrap

  • 2020-03-30 04:31:47
  • OfStack

An overview of

This section explains the initialization process of AngularJS and how you can modify the initialization of AngularJS if necessary.

AngularJS < Script> The label

This example demonstrates our recommended method of integrating AngularJS, which is called "automatic initialization." 



<!doctype html>

<html xmlns:ng="http://angularjs.org" ng-app>

    <body>

        ...

    <script src="angular.js"><script>

    </body>

</html>

formatDate

1. Place the script tags from the above code at the bottom of the page. Placing the script tag at the bottom reduces the loading time of the application, because the loading of the HTML 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 could expose your site's security. If it's just experimental development, there's nothing wrong with linking to our site.

1). Angular -[version]. Js is a readable version for development and debugging.
2). Angular -[version]. Min. js is a compressed and confused version suitable for deployment into a molded product.

2. Please place the ng-app instruction in the root node of the label of your application, if you want AngularJS to automatically execute the whole. Html> The program just puts it on < Html> Tag. 



<html ng-app>

3. If you want to use the old command syntax: ng:, you also need to write xml-namespace in < Html> In order for AngularJS to work properly under IE. (for historical reasons, we do not recommend continuing with ng: syntax.) 



<html xmlns:ng="http://angularjs.org">

Automatic initialization

AngularJS will execute when the DOMContentLoaded event fires and find your application's root scope using the ng-app directive. If the ng-app command is found, then AngularJS will:

1. Load the module related to the instruction content.
2. Create an application's injector.
3. The label of ng-app instruction is the root node to compile the DOM. This allows you to specify only a portion of the DOM for your AngularJS application. 



<!doctype html>

<html ng-app="optionalModuleName">

    <body>

        I can add: {{ 1+2 }}.

        <script src="angular.js"></script>

    </body>

</html>

Manual initialization

If you need active control over the initialization process, you can use manual bootstrapping. For example, when you use a "script loader" or need to do something 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. 



<!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 of the order your code must follow:

1. After the page and all the scripts have loaded, locate 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-bound application.

Related articles: