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. 处理指令(编译和链接)
  • 相关阅读:
    2016某天闲谈
    APP测试入门篇之APP基础知识(001)
    windows服务器下frp实现内网穿透
    nginx使用与配置
    spring boot 实现优雅的关闭
    spring boot 自定义sql分页查询
    java获取类加载路径和项目根路径的5种方法
    linux下 启动node 和关闭node
    docker 安装 fastdfs
    docker 常用命令和常用容器启动
  • 原文地址:https://www.cnblogs.com/gaoBlog/p/9449999.html
Copyright © 2011-2022 走看看