简(浅)析Angular和Jquery根本区别

Angular最根本、最核心思想是数据驱动，Jquery是操作DOM元素。

下面以在div中插入文本（p标签为例）：

Angular通过结构性指令 *ngFor="let item of textAry"，textAry是一个数组，item为数组中每一个元素，{{item}}为Angular插值表达式即绑定item代表的值到p标签文本中。此例textAry数组每一项均为字符串，来当做插入p标签中的文本内容。从图中可看出来p标签数量和textAry数组长度相对应，且每个标签的文本内容对应数组的每一个元素，所以只需要关注textAry数组长度，无需关注何时插入p标签及文本内容是什么，Angular会通过ngFor指令自动生成与绑定数据长度相等的元素个数，并用数组每一项来绑定生成DOM元素的文本内容。因此，Angular是纯数据驱动，无需操作DOM。

Jquery则需要考虑选中插入p标签元素的父元素$('div.fater')，然后通过append("<p>文本内容</p>")来插入DOM元素，这个选择父元素及插入子元素的过程就是在操作DOM。

假如，项目中需求很多行文本（假设p标签），Angular只需要从后台拿数据，然后HTML模板页面绑定拿到的数组即可，而用Jquery则需手动重复append()操作（当然文本相同的情况下可以循环遍历）。

这样一个示例下来，通过比较大概就能对Angular和Jquery的区别有所了解了，可能例子不够贴切恰当，但能使大家明白其中的区别即可，欢迎大家各抒己见，共同进步。