Angular-1.5.x 组件树的加载是如何工作的？

Question

我从 AngualrJS 阅读文档：https://docs.angularjs.org/guide/component
当我阅读“组件树示例”部分时，我对组件树的加载方式感到困惑，因为无法找到加载顺序。

角度如何找到根指令和嵌套指令（可能在模板中）？哪个组件应该首先开始工作？我的意思是，如果嵌套组件（）在其指令出现之前被调用，它会在其指令出现时被稍后调用吗？当指令/模板加载时，角度如何知道要调用的适当组件？或者只是迭代所有组件方法？还是先加载所有组件，然后根据 index.html 组成组件层次结构，然后正确调用？

有没有好心人解释一下？非常感谢！

Answer 1

谢谢estus！您的回答真的很有帮助！根据AngularJS : How does the HTML compiler arrange the order for compiling? 和 Pete Bacon Darwin 的example ：

---

在我看来：
Angular首先调用所有组件的comiple()方法来完成整个模板加载，然后调用它们的controller()方法来处理指令层次结构。

---

这来自：How directives are compiled

需要注意的是，Angular 是在 DOM 节点上运行的，而不是在 字符串。通常，您不会注意到此限制，因为当 页面加载后，Web 浏览器会自动将 HTML 解析为 DOM。

HTML 编译分三个阶段进行：

1. $compile 遍历 DOM 并匹配指令。
   如果编译器发现某个元素与指令匹配，则将该指令添加到与 DOM 匹配的指令列表中 元素。一个元素可以匹配多个指令。
2. 一旦所有与 DOM 元素匹配的指令都被识别出来，编译器就会按照它们的priority 对指令进行排序。
   每个 指令的compile 函数被执行。每个compile 函数 有机会修改 DOM。每个compile 函数返回一个 link 函数。这些功能组成一个“组合”链接 函数，它调用每个指令返回的 link 函数。
3. $compile 通过调用上一步中的组合链接函数将模板与范围链接起来。这反过来将 调用各个指令的链接函数，注册 监听元素并设置$watchs scope 每个指令都配置为执行。