AngularJS 学习笔记---Bootstrap

发布时间：2020-12-17 10:08:38 所属栏目：安全来源：网络整理

导读：This page explains the Angular initialization process and how you can manually initialize Angular if necessary. Angular script Tag This example shows the recommended path for integrating Angular with what we call automatic initialization.

This page explains the Angular initialization process and how you can manually initialize Angular if necessary.

Angular`<script>`Tag

This example shows the recommended path for integrating Angular with what we call automatic initialization.

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <body>
    ...
    <script src="angular.js"></script>
  </body>
</html>

Place thescripttag at the bottom of the page. Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of theangular.jsscript. You can get the latest bits fromhttp://code.angularjs.org. Please don't link your production code to this URL,as it will expose a security hole on your site. For experimental development linking to our site is fine.
- Choose:angular-[version].jsfor a human-readable file,suitable for development and debugging.
- Choose:angular-[version].min.jsfor a compressed and obfuscated file,suitable for use in production.
Placeng-appto the root of your application,typically on the<html>tag if you want angular to auto-bootstrap your application.
If you choose to use the old style directive syntaxng:then include xml-namespace inhtmlto make IE happy. (This is here for historical reasons,and we no longer recommend use ofng:.)

Automatic Initialization

Angular initializes automatically uponDOMContentLoadedevent or when theangular.jsscript is evaluated if at that timedocument.readyStateis set to'complete'. At this point Angular looks for thengAppdirective which designates your application root. If thengAppdirective is found then Angular will:

load themoduleassociated with the directive.
create the applicationinjector
compile the DOM treating thengAppdirective as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.

<!doctype html>
<html ng-app="optionalModuleName">
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

As a best practice,consider adding anng-strict-didirective on the same element asng-app:

<!doctype html>
<html ng-app="optionalModuleName" ng-strict-di>
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

This will ensure that all services in your application are properly annotated. See thedependency injection strict modedocs for more.

Manual Initialization

If you need to have more control over the initialization process,you can use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.

Here is an example of manually initializing Angular:

<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module('myApp',[])
      .controller('MyController',['$scope',function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(document).ready(function() {
      angular.bootstrap(document,['myApp']);
    });
  </script>
</body>
</html>

Note that we provided the name of our application module to be loaded into the injector as the second parameter of theangular.bootstrapfunction. Notice thatangular.bootstrapwill not create modules on the fly. You must create any custommodulesbefore you pass them as a parameter.

You should callangular.bootstrap()afteryou've loaded or defined your modules. You cannot add controllers,services,directives,etc after an application bootstraps.

Note:You should not use the ng-app directive when manually bootstrapping your app.

This is the sequence that your code should follow:

After the page and all of the code is loaded,find the root element of your AngularJS application,which is typically the root of the document.
Callangular.bootstraptocompilethe element into an executable,bi-directionally bound application.

Things to keep in mind

There a few things to keep in mind regardless of automatic or manual bootstrapping:

While it's possible to bootstrap more than one AngularJS application per page,we don't actively test against this scenario. It's possible that you'll run into problems,especially with complex apps,so caution is advised.
Do not bootstrap your app on an element with a directive that usestransclusion,such asngIf,ngIncludeandngView. Doing this misplaces the app$rootElementand the app'sinjector,causing animations to stop working and making the injector inaccessible from outside the app.

Deferred Bootstrap

This feature enables tools likeBatarangand test runners to hook into angular's bootstrap process and sneak in more modules into the DI registry which can replace or augment DI services for the purpose of instrumentation or mocking out heavy dependencies.

Ifwindow.namecontains prefixNG_DEFER_BOOTSTRAP!whenangular.bootstrapis called,the bootstrap process will be paused untilangular.resumeBootstrap()is called.

angular.resumeBootstrap()takes an optional array of modules that should be added to the original list of modules that the app was about to be bootstrapped with.

（编辑：李大同）