https://github.com/angular/angular.js/blob/master/docs/content/guide/bootstrap.ngdoc
本页讲解Angular的初始化过程,以及你在需要的时候如何手动初始化。
<script>
标签下面这个例子是我们推荐的“自动初始化Angular”的方式:
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
...
<script src="angular.js">
</body>
</html>
把<script>
标签放在页面的底部。这样做可以减少页面的导入时间,因为HTML的导入过程不会因为导入angular.js
而阻塞。你可以从http://code.angularjs.org获取最新版的angularjs。注意,不要在你的生产环境的代码中引用这个url,因为这样做有安全问题。但是在开发过程中这么做是没问题的。
* `angular-[version].js`是一个未经压缩的版本,可读性好,适合开发及调试,但体积较大* `angular-[version].min.js`是压缩过的版本,体积小,适合生产环境
把ng-app
放在程序的根结点,如果你想让angularjs自动初始化你的程序,最好放在<html>
标签中。
如果你想使用以前的指令(directive)风格ng:
,你需要在html
中包含xml-namespace以兼容IE。(我们不推荐使用ng:
,写在这里仅仅是因为历史原因)
Angular在DOMContentLoaded
事件时自动初始化,此时它会寻找ng-app
这个表示根程序的directive。找到了,则:
导入该directive关联的module 创建程序injector 把ng-app
这个directive当作程序的根来编译DOM。这样允许你仅仅把页面中的一部分当作交给Angular
I can add: {{ 1+2 }}.
<script src="angular.js"></script>
如果你需要对初始化过程进行更多的控制,你可以手动调用初始化方法。当你想使用一个第三方的script loaders来管理导入(如headjs等),或者想在Angularjs初始化页面之前先执行某些操作的时候,你可能需要手动初始化。
这里是一个手动初始化的示例。它与直接使用ng-app
的directive效果相同。
Hello {{'World'}}!
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});
</script>
你的代码应该遵循以下顺序:
bootstrap
方法来编译模板,把它变成一个可执行的、双向绑定的程序