AngularJS 初始化

1. 自动初始化

用 ng-app 指令初始化。AngularJS 在以下两种情况下自动初始化:

  1. 在 DOMContentLoaded 事件触发时
  2. 在 angular.js 脚本被执行的同时如果 document.readyState 被置为 ‘complete’ (兼容老版本 IE,DOMContentLoaded 事件在 IE9 才开始被支持)

初始化时,AngularJS 会去找 ng-app 这个指明应用开始所在的指令。如果 ng-app 指令被找到的话,AngularJS 会做以下几件事:

  1. 加载 ng-app 指令所指定的模块
  2. 创建应用所需的 injector
  3. 以 ng-app 所在的节点为根节点,开始遍历并编译 DOM 树(ng-app 指出了应用的哪一部份开始是 AngularJS 去编译的)

在 CodePen 中查看示例代码
AngularJS 初始化

2. 手动初始化

用 angular.bootstrap 方法初始化。如果你想在初始化阶段拥有更多的控制权,你可以使用手动方法启动应用。为保证 angular.bootstrap 方法正常运作,你需要在 HTML 页面以及所有代码加载完毕后再执行它。如果 angular.bootstrap 方法正常运作的话,AngularJS 会做以下几件事:

  1. 找到应用的根节点(通过 angular.bootstrap 方法的第一个参数指定,通常会指定文档的根节点)
  2. 加载 angular.bootstrap 方法所指定的模块
  3. 创建应用所需的 injector
  4. 从应用的根节点开始编译各元素,使其成为一个可执行的且双向绑定的应用

在 CodePen 中查看示例代码