【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开发人员欲罢不能.再加上已经 ...
随机推荐
- SSH密钥登陆免密码方法
原帖地址:http://ask.apelearn.com/question/798 用Putty实现A机器远程登陆B机器,具体实现请看链接:http://www.cnblogs.com/ImJerry ...
- [Vue]Vue语法糖v-bind、v-on
语法糖 :是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发,简化代码是书写. Vue.js的v-bind和v-on指令都提供了语法糖,也可以说是缩写. 1.v-bind可以省略, ...
- javascript中的__proto__ 和prototype
不错的一张图
- CUDA JPEG编码
基于英伟达的jpegNPP工程,分离实现独立的JPEG压缩. 由于原工程是直接把解码时的jpeg图片的信息直接作为编码时的信息,所以在做独立的JPEG编码时,需要自己来填充各种信息. 1.JPEG编码 ...
- spoj-ASSIGN-bitDP
ASSIGN - Assignments #dynamic-programming Problem Your task will be to calculate number of different ...
- 【转】ftrace 简介
ftrace 简介 ftrace 的作用是帮助开发人员了解 Linux 内核的运行时行为,以便进行故障调试或性能分析. 最早 ftrace 是一个 function tracer,仅能够记录内核的函数 ...
- Windows音频SDK的发展历程
WASAPI is one of several native audio libraries in Windows. PortAudio actually supports five of them ...
- spring配置bean的生命周期
配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...
- Python 脚本注册为Windows Service
这部分内容就如同标题所讲的,其他的也不说了,直接上代码吧 需要说明的是,此代码在我的Win10 下可以正常使用,而在windows server 2008没有运行成功. 如果出现拒绝访问的错误,请使用 ...
- 上下行分流下行负载方式和能ping通但不能打开
1 下行线路负载方式选择 目的端口+协议 否则有可能出现微信443端口图片打不开的情况. 2.彭ping通但是打不开的情况下将上行线路mtu值改小 由1500改为1450