zoukankan      html  css  js  c++  java
  • angular的启动原理

    当你用浏览器去访问index.html的时候,浏览器依次做了如下一些事情:

    1. 加载html,然后解析成DOM;
    2. 加载angular.js脚本;加载完成后自执行,生成全局angular对象,监听DOMContentLoaded事件
    3. DOMContentLoaded事件的触发,AngularJS寻找ng-app指令,自动引导启动框架;
    4. 引导第1步:使用ng-app中指定的模块,创建注入器$injector
    5. 引导第2步:使用$injector创建$compile服务和$rootScope;
    6. 引导第3步:使用$compile服务编译DOM子树    
    7. 编译第1步 : 匹配指令 $compile遍历DOM树,如果发现有元素匹配了某个指令,那么这个指令将被加入 该DOM元素的指令列表中。一个DOM元素可能匹配多个指令。
    8. 编译第2步 :执行指令的编译函数 。当一个DOM元素的所有指令都找齐后,编译器根据指令的优先级/priority指令进行排序。 每个指令的compile函数被依次执行。每个compile执行的结果产生一个link函数,这些 link函数合并成一个复合link函数。
    9. 编译第3步 :执行生成的链接函数  执行完所有指令的compile函数后,再依次执行指令的link函数,将模板和scope链接起来。结果就是一个DOM视图和scope对象模型 之间的动态数据绑定。

    angular的启动过程 

    1. 加载html,然后解析成DOM;当浏览器渲染一个页面时,本质上是读html标识,然后建立dom节点,当dom树创建完毕之后广播一个事件给我们.
    2.  加载angular.js脚本;加载完成后自执行,生成全局angular对象,监听上面的dom完成事件
    3. dom完成事件触发,查找带有ng-app属性的元素,自动引导启动框架
    4. 当找到这样的元素之后,以这个元素的起点,递归遍历所有的子元素,查找出所有的指令
    5. 处理指令(编译和链接)
  • 相关阅读:
    java_000.JAVA语言课堂测试试卷01
    2018暑假第八周总结&暑假代码成果总结(8.27-9.2)
    C#_最基础的计算器
    Java_学生信息管理系统——数组版——初次编写
    Java_计算器001,支持加减乘除,括号,小数点,√,^ 运算
    Java_计算器001,支持加减乘除,括号运算
    2018暑假第七周总结(8.20-8.26)
    2018暑假第六周总结(8.13-8.19)
    2018暑假第五周总结(8.6-8.12)
    poj 1984(带权并查集)
  • 原文地址:https://www.cnblogs.com/gaoBlog/p/9449999.html
Copyright © 2011-2022 走看看