• 【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只会绑定第一次加载的对象。
    • 后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。
  • 相关阅读:
    6.简单总结一下类与对象
    5.创建对象内存分析
    4.构造器详解
    3.类和对象的关系
    业余草推荐18个Java开源免费的CMS系统
    业余草教你解读Spark源码阅读之HistoryServer
    业余草公众号运营攻略:教你一天涨粉200以上
    从菜鸟到大牛的码农升职必学文章推荐
    倒排索引的AND操作
    程序员,如何在工作之外,增加自己的收入
  • 原文地址:https://www.cnblogs.com/peterYong/p/10098868.html
Copyright © 2020-2023  润新知