您的位置：首页 > Web前端 > AngularJS

AngularJS学习笔记2——AngularJS的初始化

2013-11-24 00:07 387 查看

　　本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化。

　　Angular <script> Tag

下面通过一小段代码来介绍推荐的自动初始化过程：

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
...
<script src="angular.js">
</body>
</html>

把script标签放在页面的底部可以缩短应用加载的时间，因为这样的话Html的加载不会被angular.js脚本的加载阻塞。

angular-[version].js是具有可读性的版本，适用于开发和调试。

angular-[version].min.js是压缩和混淆后的版本，适用于产品代码。

如果你想让angular自动初始化的话，可以在<html>标签中加上ng-app

<html ng-app>
…
</html>

如果要支持IE7的话需要加上id="ng-app"

<html id="ng-app" ng-app>
…
</html>

如果要使用旧版的指令语法（ng:）的话，要支持IE还需要在<html>标签中引入xml的命名空间（因为一些历史原因，现在已经不推荐使用ng:的语法了）

<html xmlns:ng="http://angularjs.org">
…
</html>

　　自动初始化（Automatic Initialization）

在DOMContentLoaded事件触发时Angular会执行自动初始化过程。这时，Angular会查找ng-app指令，并用它来标明整个应用的根作用域。如果找到了ng-app指令，Angular会做一下几件事：

加载和指令（directive）内容相关的模块（module）

创建一个应用“注入器”（injector）

将含有ng-app指令的节点作为根节点来编译DOM。这样一来，你可以只指定一部分DOM作为Angular应用。

　　手动初始化（Manual Initialization）

如果你想更多的来控制初始化的过程，你可以手动的执行引导程序。比如你需要用到脚本加载器（script loader）或者要在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>

注意：angular.bootstrap函数签名如下：

参数	类型	说明
element	Element	作为Angular应用根作用域的DOM元素
modules (optional)	Array<String\|Function\|Array>	数组中为所有需要加载的模块的的名称，每个模块的名字需要在此之前定义，Angular不会在运行到这里时自己去定义模块。

如果手动调用初始化函数的话，代码的书写需要遵循以下顺序：

等到页面加载完成后，找到AngularJS的根元素（通常是文档的根元素）。

调用angular.bootstrap函数将模板编译成可以执行的、数据双向绑定的应用程序。

延迟引导（Deferred Bootstrap）

这个特性使得像Batarang这样的工具和一些test runner能够在Angular的引导过程中建立钩子，在注册需要注入的依赖的时候可以增加或者替换注入的service，或者mock一些比较重的依赖。当angular.bootstrap被调用时如果window.name中包含前缀NG_DEFER_BOOTSTRAP!，引导过程将会被暂停直到angular.resumeBootstrap()被调用。angular.resumeBootstrap()可以传入一个可选的模块数组作为参数，这个数组中的模块会被加到引导函数的模块数组中一起被初始化。

=============Angular JS学习笔记系列=============

AngularJS学习笔记1——什么是AngularJS？

AngularJS学习笔记2——AngularJS的初始化

=========================================

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航