AngularJS 应用程序的引导/初始化流程
Posted
技术标签:
【中文标题】AngularJS 应用程序的引导/初始化流程【英文标题】：Bootstrap / initialization flow of AngularJS apps 【发布时间】：2015-04-17 12:53:01 【问题描述】：我想知道 AngularJS 应用程序的初始化流程是否可以根据 html 文档中不同块的执行顺序来预测。
我看了这个问题What is meant by Bootstrapping in angular JS?，里面解释了很多过程，但是没有详细回答我的问题。
我有一个 plunker 示例 http://plnkr.co/edit/boVFjHWoxdbiADq41dXC?p=preview，我在其中 console.log() 编号，按照我认为它们会执行的顺序。不过有点令人惊讶的是 .run() 块的执行似乎被推迟了。
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<!--<script src="script.js"></script>-->
<script>
// Code goes here
console.log(1);
angular.module('app', [])
.run(function ()
console.log(2);
setTimeout(function ()
console.log(6);
);
);
</script>
<script>
console.log(3);
</script>
</head>
<body>
<img src="http://www.mrwallpaper.com/wallpapers/Sicily-Italy.jpg" />
<script>
setTimeout(function ()
console.log(5);
)
</script>
<img src="http://www.wishsicily.com/gallery/1370_scicli-ragusa.jpg" />
<script>
console.log(4);
</script>
<h1>Hello Plunker!</h1>
</body>
</html>
所以我有几个问题：
-
是否可以肯定地说，在控制台中以数字“2”标记的 run() 块将始终在处理完页面的其余部分后执行？
我知道启动 .run() 块执行的是调用 angularInit()，它由 DOM 就绪时的调用 ready() 执行。对吗？
这是否意味着实际上 run() 块的执行发生在同一个滴答上，就像它被分配给 window.onload 时一样？
【问题讨论】：
【参考方案1】：https://github.com/angular/angular.js/blob/ce669edfa14dc7eb7c389d2f82c9c98399a9009b/docs/content/guide/module.ngdoc 上实际上有关于运行块的文档
运行块
Run 块是 Angular 中最接近 main 方法的东西。一次跑步 block 是启动应用程序需要运行的代码。它 在所有服务都已配置并且 注射器已创建。运行块通常包含以下代码 难以进行单元测试，因此应该单独声明 模块，以便在单元测试中可以忽略它们。
angularInit 函数初始化模块，然后调用它们自己的运行块。这发生在 src/angular.suffix
jqLite(document).ready(function()
angularInit(document, bootstrap);
);
所以运行函数总是会在文档加载后被调用。 由于 Angular 将在那时开始初始化，window.load 和初始化之间可能会有一段时间。
【讨论】：
以上是关于AngularJS 应用程序的引导/初始化流程的主要内容，如果未能解决你的问题，请参考以下文章