Angularjs 了解高级框架。Angular.js中控制器、指令、css和服务的执行顺序是什么？

当您观察控制台日志/浏览器输出时，controller、directive、css、services、factories等在Angular.js中的执行顺序是什么？我正在我目前的公司观察angular的一个电视流媒体应用程序项目，我很难理解这些部分是如何执行的&何时执行的，以及它们是如何连接的。我假设这是一个线性同步过程，但如何实现呢

有没有详细的视觉解释？我看到了许多双向数据绑定概念的图表，但它非常肤浅，没有阐明代码的每个组件如何影响其余部分。例如，如果我在控制器中更改了一个变量，什么会受到影响，其余的代码现在如何知道如何处理这些数据

我习惯于同步执行的小型javascript应用程序。我可以设置断点并观察何时执行。但对于角度（以及反应）来说，似乎所有事情都是同时发生的，并且无法理解何时何地发生了什么。它似乎是一个压倒性的连接网格，几乎没有关于何时/如何/为什么的文档

不同的角度部分/组件在何时何地执行？

---

我正在寻找一个类似于但与所有角度（React）组件或大多数框架相关的解释

与普通JS相比，这些框架提供的主要区别在于，它们抽象掉了DOM更新和数据绑定。现在，这似乎是一件简单的事情，但以同步的方式正确地、高效地完成这件事并不容易，因为当某些内容更新时，整个应用程序会变得滞后，同时更新

在AngularJS中，有一个特殊的批处理更新周期，称为

$digest

cycle，它执行所有DOM检查，观察变量的更改并更新所有数据绑定。它通过用户交互（单击、悬停、滚动等）、网络请求和定期更新来激活

其工作原理的要点是：

• 事情发生了
• AngularJS触发了一个新的循环
• 你的JS代码运行
• AngularJS在您的范围变量上运行一个diff，以查找更改并在必要时更新DOM

这意味着代码可以以非线性的方式进行批处理，从而使数据看起来可以同时更新

---

如果您想了解更多关于编译的信息并深入了解AngularJS的内部结构，这是一个很好的起点$compile，正如在其他答案中提到的那样，您应该关注的“神奇事物”是AngularJS摘要循环

Angular在自定义指令中使用事件，如ng click或ng keyup

事件由Angular Context（$scope）处理，它有观察者来检查是否有任何属性发生了更改

Angular通过使用$digest来实现这一点，它遍历了所有的观察者

整个过程称为消化循环

官方文件：

要获得更直观的方法，您可以观看Coursera上的三个摘要周期视频：