AngularJS 初始化过程以及如何手动将 AngularJS 初始化（延迟启动）

分类：Javascript| 发布：佚名| 查看：5930 | 发表时间：2014/8/13

概述

这一章讲述 Angular 初始化过程以及必要的时候用户如何能够手动将 Angular 初始化。

Angular `<script>` 标签

下面例子展示了推荐的在应用中使用 Angular 的自动初始化的代码路径设置。

1<!doctype html>
2<html xmlns:ng="http://angularjs.org" ng-app>
3  <body>
4    ...
5    <script src="angular.js">
6  </body>
7</html>

在HTML页面底部放置 script 标签。这样可以优化应用的加载时间，因为避免了HTML加载时被 angula.js 脚步的加载阻滞。你可以在在这里 http://code.angularjs.org 获取 Angular 的最新版本。注意，别再你的产品代码中连接这个 URL，因为这样会在你的网站中暴露一个安全问题。当然，在开发的时候连接是没有问题的。
- 选择 angular-[version].js 这样一个可读的版本，用来作为开发和调试用
- 选择 angular-[version].min.js 这样一个压缩版本，用来作为产品发布时用
如果你想要你的应用自动启动 Angular 的话，那就把 ng-app 放在应用的根结点中，通常情况下是 <html> 标签中，像下面这样：

view source
print ?
1 <html ng-app>
如果你的应用需要支持 IE7 ，那么加上 id="ng-app"

view source
print ?
1 <html ng-app id="ng-app">
如果你要使用 ng: 这样的老风格的指令方式，那就在 html 中加入 xml命名空间 ，这样也能让 IE 得瑟下。（译注：历史原因，你懂的，所以 ng: 这种方式现在已经不推荐了。

view source
print ?
1 <html xmlns:ng="http://angularjs.org">

自动初始化

Angular自动初始化流程

Angular 在以下两种情况下自动初始化，一个是在 DOMContentLoaded 事件触发时，或者在 angular.js 脚本被执行的同时如果 document.readyState 被置为 'complete' 的话。初始化时，Angular 会去找 ng-app(ng.directive:ngApp)这个指明应用开始所在的指令。如果 ng-app(ng.directive:ngApp) 指令被找到的话，Angular 会做以下几件事：

加载 ng-app 指令所指定的模块
创建应用所需的 injector（AUTO.$injector）
以 ng-app（ng.directive:ngApp）所在的节点为根节点，开始遍历并编译DOM树（ng-app 指出了应用的哪一部份开始时 Angular 去编译的）

1<!doctype html>
2<html ng-app="optionalModuleName">
3  <body>
4    I can add: 3.
5    <script src="angular.js"></script>
6  </body>
7</html>

手动初始化

如果你想在初始化阶段拥有更多的控制权，你可以使用手动方法启动应用。你需要手动启动的可能会是你想要在你的应用中使用脚本加载器，或者你可能想要在 Angular 编译页面之前执行一些别的操作。

下面是一个手动初始化 Angular 的例子：

01<!doctype html>
02<html xmlns:ng="http://angularjs.org">
03  <body>
04    Hello World!
05    <script src="http://code.angularjs.org/angular.js"></script>
06    <script>
07       angular.element(document).ready(function() {
08         angular.module('myApp', []);
09         angular.bootstrap(document, ['myApp']);
10       });
11    </script>
12  </body>
13</html>