【angularJS】启动（bootstrap）机制
Angular的启动分为手动和自动两种。
自动启动
定义模块的例子中，采用的就是自动的方式：通过内置的指令ngApp 来指定启动时加载的模块。<html ng-app="myApp">
根据官方文档，Angular的自动初始化发生在两个时机：
1、响应DOMContentLoaded事件（页面文档完全加载并解析完毕后会触发该事件，不会等待图片、样式文件）
2、document.readyState的值为'complete'。（兼容IE8，页面完全加载，相当于load事件触发）
这时，Angular会调用angularInit方法进行初始化，首先查找ngApp directive，该directive指定了应用程序的根结点，通常位于初始页面的<html>标记上。当然，ngApp如果位于某个子结点（如div元素），则可以将Angular应用程序限制在DOM树的一部分上。如果Angular找到了ngApp，则会调用bootstrap方法开始启动过程，主要工作如下：
- 加载ngApp指定的模块
- 创建应用程序的依赖注入对象（injector）。此时$compile，$rootScope会被注入，用于后续的compile过程。有关依赖注入过程有后文。
- 以ngApp为根结点，compile整个DOM树。有关compile过程，在后续文章中详谈。
手动启动
有些情况下，开发者需要在初始化阶段做些额外的配置或控制，比如include一些模块或者需要在compile过程之前完成一些工作。这就需要手动启动。手动启动通过angular.bootstrap方法。一个例子如下：
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
该方法的第一个参数指定了Angular应用所在的根DOM元素；
第二个参数定义了需要依赖加载的模块（相当于ngApp），该模块必须事先定义完成（包括其controller，directive等组件），bootstrap方法不会定义该模块。
（该方法还有第三个参数，参见这里）。一个Anuglar应用一旦启动，就不能再添加controller, service等组件。
值得注意的是：
- angular.bootstrap只会绑定第一次加载的对象。
- 后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示。
【angularJS】启动（bootstrap）机制的更多相关文章
- AngularJS 启动执行过程
一.浏览器下载HTML/CSS/JavaScript等 当你转到一个页面地址后,浏览器先回下载这个HTML,同时,会开启一些辅助线程下载所关联的script标签和link标签里引用的文件. 二.浏览器 ...
- Angularjs启动入口， splash画面，与加快启动的技巧
Angularjs启动入口, splash画面,与加快启动的技巧 Angularjs启动入口 * 自动响应DOMContentLoaded event * 从ngApp指定的入口启动: 在angula ...
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...
- Linux开机启动(bootstrap)上
Linux开机启动(bootstrap) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 计算机开机是一个神秘的过程.我们只是 ...
- AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能
AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能 核心代码如下 1.index.html <!DOCTYPE html> < ...
- AngularJS 脏检查机制
脏检查是AngularJS的核心机制之一,它是实现双向绑定.MVVM模式的重要基础. 一.digest循环 AngularJS将双向绑定转换为一个堆watch表达式,然后递归检查这些watch表达式的 ...
- 手写AngularJS脏检查机制
什么是脏检查 View -> Model 浏览器提供有User Event触发事件的API,例如,click,change等 Model -> View 浏览器没有数据监测API. Ang ...
- AngularJS中bootstrap启动
对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html ...
- 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目
环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
随机推荐
- 前端构建大法 Gulp 系列
参考: 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp ...
- 2-2-sshd服务安装管理及配置文件理解和安全调优
大纲: 1. 培养独自解决问题的能力 2. 学习第二阶段Linux服务管理的方法 3. 安装sshd服务 4. sshd服务的使用 5. sshd服务调优 6. 初步介绍sshd配置文件 ###### ...
- nyoj998——欧拉+折半查找
Sum 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 给你一个数N,使得在1~N之间能够找到x使得x满足gcd( x , N ) >= M, 求解gcd( ...
- java和python互相调用
java和python互相调用 作者:xuaijun 日期:2017.1.1 python作为一种脚本语言,大量用于测试用例和测试代码的编写,尤其适用于交互式业务场景.实际应用中,很多网管系统 ...
- 【zzuli-2276】跳一跳
题目描述 今天跳跳去公园游玩,第一个游戏就难倒了跳跳,游戏规则是跳跳站在一个面积无限大的矩形土地上,开始时跳跳在左上角(即第一行第一列),每一次跳跳都可以选择一个右下方格子,并瞬间跳过去(如从下图中的 ...
- Linux下MySQL小尝试
因为我用的linux机器事先已经装好了mysql,所以安装部门就先忽略. 进入mysql,如果发现没权限的话,使用 mysql -uroot -p 输入密码即可 首先我们使用 create datab ...
- 在QT中使用静态对象
最近做教研室的项目,需要只能存在一个接收数据的线程,那么我就想把这个线程设置成一个静态对象.但是在connect信号与槽的时候出了一点问题,最后搞好了,现在这mark一下: 比如说一个声明了一个静态的 ...
- vue.js 源代码学习笔记 ----- instance state
/* @flow */ import Dep from '../observer/dep' import Watcher from '../observer/watcher' import { set ...
- (转)Mahout Kmeans Clustering 学习
一.Mahout命令使用 合成控制的数据集 synthetic_control.data 可以从 此处下载,总共由600行X60列double型的数据组成, 意思是有600个元组,每个元组是一个时间序 ...
- Shell 命令行，实现一个获取任意位数的随机密码的脚本
Shell 命令行,实现一个获取任意位数的随机密码的脚本 每次我们想要获得一个密码的时候都很头疼,于是我之前自己用nodejs写了一个 Shell 脚本.这两天在学习 bash Shell 所以,想用 ...