这一章讲述 Angular 初始化过程以及必要的时候用户如何能够手动将 Angular 初始化。
Angular <script>
标签
下面例子展示了推荐的在应用中使用 Angular 的自动初始化的代码路径设置。
<!doctype html>
<html ng-app>
<body>
...
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">
</body>
</html>
- 在HTML页面底部放置
script
标签。这样可以优化应用的加载时间,因为避免了HTML加载时被angular.js
脚步的加载阻滞。你可以在在这里 http://code.angularjs.org 获取 Angular 的最新版本。- 选择
angular-[version].js
这样一个可读的版本,用来作为开发和调试用 - 选择
angular-[version].min.js
这样一个压缩版本,用来作为产品发布时用
- 选择
-
如果你想要你的应用自动启动 Angular 的话,那就把
ng-app
放在应用的根结点中,通常情况下是<html>
标签中,像下面这样:<html ng-app>
-
如果你的应用需要支持 IE7 ,那么加上
id="ng-app"
<html ng-app id="ng-app">
-
自动初始化
Angular 在以下两种情况下自动初始化,
一个是在 DOMContentLoaded
事件触发时,
或者在 angular.js
脚本被执行的同时如果 document.readyState
被置为 'complete'
的话。
初始化时,Angular 会去找
这个指明应用开始所在的指令。ng-app
如果
指令被找到的话,Angular 会做以下几件事:ng-app
- 加载
ng-app
指令所指定的 模块 - 创建应用所需的
injector
- 以
所在的节点为根节点,开始遍历并编译DOM树(ng-app
ng-app
指出了应用的哪一部份开始时 Angular 去编译的)
<!doctype html>
<html ng-app>
<body>
I can add: 6+7
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>
手动初始化
如果你想在初始化阶段拥有更多的控制权,你可以使用手动方法启动应用。
你需要手动启动的可能会是你想要在你的应用中使用脚本加载器,
或者你可能想要在 Angular 编译页面之前执行一些别的操作。
下面是一个手动初始化 Angular 的例子:
<!doctype html> <html> <body> Hello Beyond! <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script> angular.element(document).ready(function() { angular.module('myApp', []); angular.bootstrap(document, ['myApp']); }); </script> </body> </html>
注意,在上面的例子中,我们提供了我们应用要加载的模块名作为 angular.bootstrap
函数的第二个参数。
需要注意的是 angular.bootstrap
不会凭空创建模块,在我们将模块作为参数注入之前,必须创建任一自定义的 模块。
以下是你的 Angular 代码运行时遵循的顺序:
-
在HTML页面以及所有代码加载完毕后,Angular 会去找到应用的根元素(通常是文档的根节点)
-
调用
angular.bootstrap
去 编译 各元素成为一个可执行的且双向绑定的应用
延迟启动
当angular.bootstrap
被调用时,
如果 window.name
包含 NG_DEFER_BOOTSTRAP!
前缀,
引导进程会被暂停直到 angular.resumeBootstrap()
被调用。
angular.resumeBootstrap()
以一个可选的数组作为参数。
这个数组是包含了应用启动时需要被注入的模块。