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方法开始启动过程，主要工作如下：

  1. 加载ngApp指定的模块
  2. 创建应用程序的依赖注入对象（injector）。此时$compile，$rootScope会被注入，用于后续的compile过程。有关依赖注入过程有后文。
  3. 以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）机制的更多相关文章

  1. AngularJS 启动执行过程

    一.浏览器下载HTML/CSS/JavaScript等 当你转到一个页面地址后,浏览器先回下载这个HTML,同时,会开启一些辅助线程下载所关联的script标签和link标签里引用的文件. 二.浏览器 ...

  2. Angularjs启动入口， splash画面，与加快启动的技巧

    Angularjs启动入口, splash画面,与加快启动的技巧 Angularjs启动入口 * 自动响应DOMContentLoaded event * 从ngApp指定的入口启动: 在angula ...

  3. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  4. Linux开机启动(bootstrap)上

    Linux开机启动(bootstrap)   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 计算机开机是一个神秘的过程.我们只是 ...

  5. AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能

    AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能 核心代码如下 1.index.html <!DOCTYPE html> < ...

  6. AngularJS 脏检查机制

    脏检查是AngularJS的核心机制之一,它是实现双向绑定.MVVM模式的重要基础. 一.digest循环 AngularJS将双向绑定转换为一个堆watch表达式,然后递归检查这些watch表达式的 ...

  7. 手写AngularJS脏检查机制

    什么是脏检查 View -> Model 浏览器提供有User Event触发事件的API,例如,click,change等 Model -> View 浏览器没有数据监测API. Ang ...

  8. AngularJS中bootstrap启动

    对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html ...

  9. 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

    环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...

  10. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

随机推荐

  1. [Vue]组件——通过$emit为组件自定义事件

    1.在定义组件时调用内建的 $emit 方法并传入事件的名字,来向父级组件触发一个事件enlarge-text: Vue.component('blog-post', { props: ['post' ...

  2. windows系统下，安装多个版本的jdk，java -version

    问题描述: 开始安装了 jdk8 后来装了jdk9,可以为项目配置不同的jdk,相安无事: 今天发现软件需要jdk8的环境,结果我的java -version始终是jdk9.0.1: 解决办法:使ja ...

  3. unity调用Android百度地图

    由于个人是Android小白,在这个配置上面被折磨了很久,因此写下这篇文章 工具:eclipse + unity5.6.1 首先去百度地图开发者平台下载你需要的资源,我只需要显示地图和定位,这个时候你 ...

  4. 搞懂分布式技术10：LVS实现负载均衡的原理与实践

    搞懂分布式技术10:LVS实现负载均衡的原理与实践 浅析负载均衡及LVS实现 原创: fireflyc 写程序的康德 2017-09-19 负载均衡 负载均衡(Load Balance,缩写LB)是一 ...

  5. Python list降序排序

    test = [6,1,2,3,4,5] a = sorted(test,reverse=True) print a 结果如下: [6, 5, 4, 3, 2, 1] 你可以参考下sorted,里面是 ...

  6. 玲珑oj 1028 贪心

    http://www.ifrog.cc/acm/problem/1028 很有趣的一道题,求从n个数里挑出不同的两个,使得他俩'|','&','^'后的值尽量大,求这个最大的结果. 求最大的异 ...

  7. printf %m

    最近看别人的项目发现有 printf("%m") 这种写法,这是什么输出格式呢? 通过 man 查找得知: m (Glibc extension.) Print output of ...

  8. django 自定义用户表替换系统默认表

    首先新建一个users应用,编写这个应用的models类. from django.contrib.auth.models import AbstractUser class UserProfile( ...

  9. 关于python中urllib.urlencode的时候出错：UnicodeEncodeError: ‘ascii’的记录

    原文我参见了:http://hi.baidu.com/setcookie/item/ddc6b694b1f13435336eeb3c 为毛我要费事的写下了,就是为了让自己记录一下,下面的也是直接摘录过 ...

  10. LeetCode之Regular Expression Matching

    [题目描述] Implement regular expression matching with support for '.' and '*'. '.' Matches any single ch ...