【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开发人员欲罢不能.再加上已经 ...
随机推荐
- 服务器22端口连接超时 ssh: connect to host *** port 22: Operation timed out
最近酸酸乳出问题,连接v社服务器发现碰到 ssh: connect to host master port 22: Connection timed out 的问题.现在对该问题做一下可能出现的问题 ...
- poj2823单调队列
这个裸题,滑动窗口求最大最小值,单调队列来两边,一次单调递增q[s]就是最小值,一次单调递减q[s]就是最大值 cin会超时,解除同步也没用... #include<map> #inclu ...
- B-Tree和B+Tree
目前大部分数据库系统及文件系统都采用B-Tree或其变种B+Tree作为索引结构,在本文的下一节会结合存储器原理及计算机存取原理讨论为什么B-Tree和B+Tree在被如此广泛用于索引,这一节先单纯从 ...
- 极小极大搜索 的个人理解(alpha-beta剪枝)
极小极大搜索的算法过程: 参考文档:http://www.xqbase.com/computer/search_minimax.htm (经典) 主要思想比较简单,但说清楚也不大容易.其核心思想是通过 ...
- linux下鼠标穿透和取消穿透--linux小白,大神无视
最近在用qt写一个跨平台的软件,因为设置了无边框,并且我自己给程序窗口加了阴影,阴影范围又比较大 所以必须给阴影区域加上鼠标穿透才能有更好的体验. 上网查了一下,在windows下使用SetWindo ...
- Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图
Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...
- CF910C
题解: 首先考虑暴力不行 然后采用贪心 按位展开 然后注意不能有前缀0 代码: #include<bits/stdc++.h> using namespace std; ],ans; ], ...
- Unix系统中system函数的返回值
网上关于system函数的返回值说明很多很详细但却不直观,这里搬出apue 3rd Editon中实现system函数的代码来说明其返回值. #include <sys/wait.h> # ...
- Code Cache相关知识总结
codecache代码缓存区,主要存放JIT所编译的代码,同时还有Java所使用的本地方法代码也会存储在codecache中.不同的jvm.不同的启动方式codecache的默认值大小也不尽相同. J ...
- office在繁体系统下 导入导出 功能灰显的解决方法
当在win7系统使用繁体中文版的office时,或系统是繁体版时,可能会导致office的导入导出功能无法使用 解决方法: 控制面板--区域和语言--格式--中文简体