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

  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只会绑定第一次加载的对象。
  • 后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。

 

posted @ 2018-12-10 20:24  peterYong  阅读(2097)  评论(0编辑  收藏  举报