angularJS权威教程24
- 准备阶段
当浏览器触发DOMContentLoaded事件时,Angular就开始工作。它首先寻找ng-app指令 如果浏览器在DOM中找到ng-app指令,它会为我们自动启动应用(或期望我们手动启动)。 Angular会使用ng-app指令的值配置创建一系列必要的组件: $injector服务,$compile服务以及$rootScope。 解析DOM树。 - 编译阶段
$compile服务会遍历DOM树并搜集它找到的所有指令,然后将所有指令的链接函数合并为一个单一的链接函数。 然后这个链接函数会将编译好的模板链接到$rootScope中(也就是附属于ng-app所在的DOM元素的作用域) 链接函数为绑定了封闭作用域的指令设置监控。这一行为会创建实时视图。 $compile服务完成(渲染完成),angular运行准备好。 - 运行时
事件循环($digest循环)
在AngularJS模块化和依赖注入的基础上,来分析模块加载的详细过程。以如下代码为例:
<div id="app1" ng-app="MyModule">
<div ng-controller="MainCtrl">
<p ng-bind="name"></p>
</div>
</div>
<script>
var app = angular.module('MyModule', [])
app.controller('MainCtrl', ["$scope", function($scope) {
$scope.name = 'World';
}]);
</script>
这里angular会自动从MyModule这个模块启动。接下来进行分析AngularJS在启动加载的整个过程中各个模块是如何加载的。
回顾AngularJS的启动过程
- bindJQuery
- publishExternalAPI
2.1 为angular对象扩展工具方法
2.2 定义angular.module方法
2.3 注册ngLocale和ng模块
ps:如果在angular.js之后引入别的文件,比如angular-ngroute.js等等、都是在注册模块
- angularInit(DOM ready的时候) 3.1 找到ng-app 3.2 调用bootstrap 3.3 创建注射器,加载模块