从jQuery 到 AngularJS：思维转换指南

如果你是一个已经熟悉 jQuery 的开发者，刚开始接触 AngularJS 的时候，可能会感到不少困惑甚至愤怒。这是正常的，因为这两者在理念上有很大的差异。但相信我，坚持下去，你会发现 AngularJS 的价值所在。

AngularJS vs. jQuery

大不同：工具包 vs. 编译器

jQuery 提供了一套工具，用于选择 DOM 的任意部分并进行随意的修改。你可逐个片段地做几乎任何事情。而 AngularJS 则完全不同，它提供的是一个编译器。

AngularJS 会从上到下读整个 DOM，并将其视为代码。它寻找特定的指令（directives），告诉编译器该如何操作。当发现符合某指令的 DOM 元素时，它会调用该指令的函数，传递相关的 DOM 元素、属性及当前的 $scope（本地变量存储）。

（注：jQuery 和 AngularJS 不是互斥的，AngularJS 可以自动使用页面中的 jQuery，或者其自带的简化版 jQuery Lite。）

从不干扰的 JavaScript 到声明性模板

在 jQuery 中，JavaScript 代码通常是作为独立的模块，而 HTML 是语义化的。然而在 AngularJS 中，你会发现自定义属性（如 ng-click 等）无处不在。这些指令是模板与数据模型连接的主要方式。

AngularJS 把你的 HTML 视为模板，并将其编译成实际的网页。模板本身驱动整个应用，这是一种控制反转，可能需要一些时间来适应。

在 AngularJS 中，模板驱动应用，JavaScript 不再是主控。

HTML 语义化 vs. 模型语义化

在 jQuery 中，HTML 页面应具有语义化的内容，而切断 JavaScript 后，内容仍能访问。但在 AngularJS 中，HTML 仅作为模板，实际的语义数据存在于模型中。AngularJS 会将你的 DOM 和模型编译成语义化的页面。