作者说 "AngularJS has compiled the DOM" 究竟是什么意思?

What does it actually mean when authors say "AngularJS has compiled the DOM"?

我正在阅读 Lukas Ruebbelke 的 AngularJS in Action,

作者在全书中多处放置,

视图在AngularJS中是HTML 由 AngularJS 编译后

我真的不明白编译过程的作用是什么以及幕后到底发生了什么?

或者它与粘合的行为有关HTML 控制器 以及 范围?

AngularJS 编译以不同的方式工作。它直接作用于 HTML DOM 而不是字符串,并根据需要对其进行操作。它在模型和视图之间使用双向数据绑定来同步您的数据。

Agular 的 HTML 编译器允许将新行为或属性附加到任何 HTML 元素。 Angular 将这些行为称为指令。 AngularJS编译过程发生在网络浏览器中;不涉及服务器端或预编译步骤。 Angular 使用 $compiler 服务编译你的 Angular HTML 页面。

angular' 编译过程在 HTML 页面(静态 DOM)完全加载后开始。它分两个阶段进行:

1.Compile

它遍历 DOM 并收集所有指令。结果是 linking 函数。

2.Link

它将指令与范围结合起来并生成实时视图。范围模型中的任何更改都反映在视图中,并且与视图的任何用户交互都反映在范围模型中。 compile 和 link 的概念来自 C,您首先编译代码,然后 link 实际执行它。 AngularJS 中的过程也非常相似。

所以我们可以说,AngularJS中的一个view就是它拥有后的HTMLAngularJS.

编译

来自本书的作者,他在接下来的章节中对此进行了解释:

只需将 编译 视为 将 HTML 和控制器粘合在一起范围

AngularJS 编译周期分为两部分:

1) the compilation phase and,
2) the linking phase.

当HTML完全加载时,AngularJS解析DOM编译所有AngularJS指令的列表;这称为编译阶段。一旦 HTML、AngularJS 进入 链接阶段,负责将 AngularJS 部分链接到适当的范围实例.

一旦 AngularJS 模板 与其适当的 控制器链接通过 scope,绑定变为活动状态,两个(视图和控制器)可以通信。

编译过程是隐式的,链接b/w AngularJS 模板和作用域是无缝的,但您也可以手动将模板和作用域编译在一起。需要实际执行此操作是一种边缘情况,但函数调用在说明正在发生的事情方面出奇地有效。

$compile(element.contents())(scope);

在方法调用中,我们获取 HTML 元素的内容并使用范围对象将其压缩。

我相信您已经阅读了 Angular 关于 the compilation 的官方文档,但我已经可以告诉您我对该主题的理解。

是的,它实际上是将数据保存在范围内的控制器与模板的 HTML 之间的粘合剂。基本上,它执行模板引擎(MustacheJS 和合作伙伴)所做的事情:编译器实际上将 HTML 模板中的变量与其在范围内的相应值匹配。 它更像是编译您的指令,但您可以在文档中阅读更多相关信息。