了解高级框架。在Angular.js中，控制器，指令，css，服务以什么顺序执行？

Question

当您观察控制台日志/浏览器输出时，在Angular.js中以什么顺序执行控制器，指令，css，服务，工厂等？我目前在一家公司观察一个电视流媒体应用程序项目，我很难理解所有这些部分的执行方式和时间以及它们之间的连接方式。我认为这是一个线性同步过程，但是如何。

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

我习惯于同步执行的小型javascript应用程序。我可以设置断点并观察什么时候执行。但是，使用Angular（和反应也是如此），似乎一切都立即发生，并且无法掌握何时何地发生的情况。似乎压倒一切，几乎没有关于何时/如何/为什么的文档。

不同的Angular节/组件何时何地执行？ 我正在寻找一种类似于this的解释，但涉及所有Angular（也包括React）组件或通常针对大多数框架的解释。

Answer 1

与普通的普通JS相比，这些框架提供的主要区别在于它们抽象了DOM更新和数据绑定。现在，这看起来似乎很简单，但是以同步的方式正确，高效地执行操作并不容易，因为当某些内容更新且整个应用程序立即更新时，应用程序会变得迟钝。

在AngularJS中，有一个特殊的批处理更新周期，称为$digest周期，它执行所有DOM检查，观察变量的变化并更新所有数据绑定。它会通过用户互动（点击，悬停，滚动等），网络请求并定期激活。

其工作原理如下：

• 发生事件。
• AngularJS触发新的循环。
• 您的JS代码运行。
• AngularJS在您的范围变量上运行差异以查找更改并在必要时更新DOM。

这意味着可以以非线性方式批量处理代码，因此可以使数据看起来同时更新。

如果您想了解更多有关编译的知识并深入了解AngularJS的内部知识，那么这是一个不错的起点https://code.angularjs.org/1.6.0/docs/api/ng/service/ $ compile和https://code.angularjs.org/1.6.0/docs/guide/scope

Answer 2

如其他答案所述，您应该关注的“神奇的事物”是AngularJs Digest循环。

1. Angular在ng-click或ng-keyup等自定义指令中使用事件
2. 该事件由Angular Context（$ scope）处理，该观察器可让观察者检查是否更改了任何属性。
3. Angular通过使用遍历所有观察者的$ digest来做到这一点

这整个过程称为摘要循环。

官方文档：https://docs.angularjs.org/guide/scope

要获得更直观的方法，您可以在Coursera上观看三个Digest Cycle视频： https://www.coursera.org/lecture/single-page-web-apps-with-angularjs/lecture-14-part-1-digest-cycle-DeEZV