• 【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只会绑定第一次加载的对象。
    • 后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。
  • 相关阅读:
    YII2安装中遇到的错误解决Calling unknown method: yiiwebUrlManager::addRules()
    BZOJ 2049: [Sdoi2008]Cave 洞穴勘測 LCT
    【C语言】编写一个函数实现n^k,使用递归实现
    Kivy A to Z -- 怎样从python代码中直接訪问Android的Service
    java并发 使用ScheduledExecutor的温室控制器--thinking in java 21.7.5
    算法之-归并排序算法,插入排序算法
    J2EE之ServletContext读取资源文件
    STOMP 客户端 API 整理
    jQuery easyui datagrid 的数据加载
    扩展struts2的结果集StrutsResultSupport 自定义Result处理JSON
  • 原文地址:https://www.cnblogs.com/peterYong/p/10098868.html
Copyright © 2020-2023  润新知