AngularJS的初始化
AngularJS的初始化
本文主要介绍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的初始化
=========================================
作者：make dream
AngularJS的初始化的更多相关文章
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- 04、AngularJS的ng-bind、多个控制器和apply
这篇,讲一下angularjs的ng-bind指令,多个控制器,以及手动触发angularjs的脏检查,我直接把代码贴,顺着代码讲. <!DOCTYPE html> <html> ...
- AngularJS 源码分析1
AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方式来组件化前端开发,可以去它的官网看看,请戳这里 再贴上一个 ...
- 理解angularjs的作用域
<!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...
- AngularJS快速入门指南04：指令
AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...
- AngularJS开发指南1：AngularJS简介
什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于, ...
- AngularJS + ui-router + RequireJS异步加载注册controller／directive／filter／service
一般情况下我们会将项目所用到的controller/directive/filter/sercive预先加载完再初始化AngularJS模块,但是当项目比较复杂的情况下,应该是打开对应的界面才加载对应 ...
- AngularJS.directive系列：嵌套directive的通讯及scope研究
一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...
- AngularJS.js: 杂项
ylbtech-AngularJS.js: 杂项 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多 ...
随机推荐
- 10个devexpress ASPxPivotGrid常见问题
原文:10个devexpress ASPxPivotGrid常见问题 1.DXperience ASPxGridView如何开启lightweight模式 描述:ASPxGridView样式主题中pa ...
- UVA11983 - Weird Advertisement(扫描线)
UVA11983 - Weird Advertisement(扫描线) 题目链接 题目大意:给你n个覆盖矩形,问哪些整数点是被覆盖了k次. 题目大意:这题和hdu1542是一个题型.可是这题求的是覆盖 ...
- Asp.Net+Easyui实现重大CRUD
今天周四称,这应该给自己一个休息,好好休息休息,但无奈自己IT这是痴迷.甘心的想加加班把目标功能实现,功夫不负有心人.经过6个小时的鏖战,我最终成功了. 在此和大家分享下成果,希望大家给个赞. 我的目 ...
- C#-简单的定时器(C# ConsoleApp) ---ShinePans
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2hpbmVwYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- cocos2d-x 3.0游戏实例学习笔记 《跑酷》第四步--地图循环&主角加入动作
说明:这里是借鉴:晓风残月前辈的博客,他是将泰然网的跑酷教程,用cocos2d-x 2.X 版本号重写的,眼下我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 ...
- linux 安装httpd（验证通过）
一.安装apache(http服务) 1. 从apache.org下载源码安装包 2. 解压缩 # tar zxf httpd-2.2.4.tar.gz # cd httpd-2.2.4 3. 安装a ...
- Installshield设置feature为必须选中状态，即必定安装状态
原文:Installshield设置feature为必须选中状态,即必定安装状态 上一篇: 解决卸载时残留目标文件夹的问题Installation Designer --> Organizati ...
- or1200于IMMU分析
以下摘录<步骤吓得核心--软-core处理器的室内设计与分析>一本书 1 IMMU结构 OR1200中实现IMMU的文件有or1200_immu_top.v.or1200_immu_tlb ...
- 初探Django线程发送邮件
最近一直在纠结一个邮件发送的问题. 在本地Linux下搭建程序,不填写EMAIL设置就可以成功发送邮件,在远端的云服务器下的Linux环境就发送不了.在windows下搭建的程序也不能发送注册邮件,很 ...
- 了解ASP.NET 5
通过3个Hello World应用来了解ASP.NET 5应用是如何运行的(1) 微软在开发ASP.NET 5(当时被称为ASP.NET vNext)是采用的代号为Project K,所以运行时被称为 ...