angular的启动原理

时间:2023-03-10 06:52:50
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. 处理指令(编译和链接)