2 应用初始化

我就是我 2022-05-26 00:28 208阅读 0赞

# 应用初始化 #

AngularJS应用引导过程有3个重要点：

1.  注入器(injector)将用于创建此应用程序的依赖注入(dependency injection)；
2.  注入器将会创建根作用域作为我们应用模型的范围；
3.  AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。

## 自动初始化 ##

通过内置的 ngApp 指令来指定启动时加载的模块。

![concepts-startup.png][]

Angular的自动初始化发生在两个时机：

*  DOMContentLoaded 事件触发。（页面文档完全加载并解析完毕后会触发该事件，不会等待图片、样式文件）
 *  angular.js 脚本被执行的同时 document.readyState 被置为 ‘complete’。（兼容IE8，页面完全加载，相当于load事件触发）

这时，Angular会调用`angularInit`方法进行初始化。初始化时，Angular 会去找 `ng-app` 这个指明应用开始所在的指令。如果 `ng-app` 指令被找到的话，Angular 会做以下几件事：

1.  加载 `ng-app` 指令所指定的 模块
2.  创建应用所需的 `injector`(依赖注入)
3.  以 `ng-app` 所在的节点为根节点，开始遍历并编译DOM树（`ng-app` 指出了应用的哪一部份开始时 Angular 去编译）

## 手动初始化 ##

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

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

<!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.module('myApp', []); angular.bootstrap(document, ['myApp']); }); </script>
    </body>
    </html>

注意，在上面的例子中，我们提供了我们应用要加载的模块名作为 `api/angular.bootstrap` 函数的第二个参数。需要注意的是 `angular.bootstrap` 不会凭空创建模块，在我们将模块作为参数注入之前，必须创建任一自定义的 模块。

**注意： 使用手动启动时，不要再指定 ngApp 指令。**

以下是你的 Angular 代码运行时遵循的顺序：

1.  在HTML页面以及所有代码加载完毕后，Angular 会去找到应用的根元素（通常是文档的根节点）
2.  调用 `api/angular.bootstrap` 去 编译 各元素成为一个可执行的且双向绑定的应用

## 延迟启动 ##

有时，开发者不仅需要在启动阶段添加功能，还需要等待一些依赖项而延迟启动过程。这时可以使用`angular.resumeBootstrap`方法。

这个特色可以让像 Batarang 一样的测试工具横插一杠进入 Angular 的引导进程，并且溜进模块中的DI注册机制中，这样就可以替换或者增强DI提供的服务。

当 `api/angular.bootstrap` 被调用时，如果`window.name`包含 `NG_DEFER_BOOTSTRAP!` 前缀，引导进程会被暂停直到 `angular.resumeBootstrap()`被调用。

`angular.resumeBootstrap()` 以一个可选的数组作为参数。这个数组是包含了应用启动时需要被注入的模块。

注意：在使用延迟启动时需要指定ngApp或者手动调用bootstrap方法，否则会报错：resumeBootstrap不是一个函数。原因是指定ngApp会内部调用bootstrap方法，而resumeBootstrap方法定义于bootstrap方法内部，如果没有指定ngApp，又没有手动调用bootstrap，则resumeBootstrap未定义。

**总结**：如果需要加载额外的模块而需要延迟启动，则**需定义window.name为NG\_DEFER\_BOOTSTRAP!**，然后在所有模块加载完毕后，调用**resumeBootstrap**方法，继续启动，并加载指定模块。angular在自动加载时会调用bootstrap方法，如果没有指定ng-app，则需手动调用bootstrap方法。由于resumeBootstrap方法定义于bootstrap方法内部，因此如果bootstrap没有调用，就会报resumeBootstrap is not a function的错误。

[concepts-startup.png]: /images/20220526/d7adc1d81bab48abb2deb9820d1f1cbc.png