不要用jQuery思维写AngularJS应用jQuery and AngularJS 苹果、橙简单的例子比较不要用jQuery思维写AngularJS应用

jquery 和 angularjs 就像苹果和橙，本身不是一类东西，注重点也不同。

jquery 主要是用来操作dom，作用就是消除各浏览器的差异，简化和丰富dom 的api，比如 dom 文档的转换，事件处理，动画，和 ajax 交互等。

angularjs 是一个完整的框架，试图解决现代 web 2.0 应用程序开发的各个方面。 angularjs 有着诸多特性，最为核心的是：mvc、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。(看到了flex 和 spring 的影子)

最重要的是，用 angularjs 以一种完全不同的方法构建用户界面，其中以声明方式指定视图的模型驱动的变化。而 jquery 常常需要编写以dom为中心的代码，随着项目的增长（无论是在规模和交互性方面）将会变得越来越难控制。

用 angularjs 以现代的web应用程序开发的整体方法，并试图让浏览器更好的发展平台。

几个例子看出他们的不同点

在jquery里面，会用编程的方式来修改视图，像下面这样用<code>ul</code>标签来定义一个下拉列表：

在jquery里面，会像下面这行代码一样来创建这个下拉列表：

如果我们仅仅看视图代码，我们无法立刻发现它有什么功能。对于小型的应用来说，这样做还算可以。但是对于大型应用来说，很快就会变得混乱并难以维护。

然而，在angularjs中，视图是一种模板，一种潜规则，<code>ul</code>声明看起来就像下面这样：

两种方式的效果完全相同，但是在 angularjs 的版本中，每一个看到模板的人都知道它在做什么（潜规则）。 不管什么时候开发团队有新人进来，她看到这种代码之后就会立即明白，存在一个叫做<code>dropdownmenu</code>的指令，这个指令负责操控这个视图。凭直觉就可以知道答案，没有必要看任何代码。视图本身已经告诉了我们这里会发生什么。这样就更加清晰了。

数据绑定作为 angularjs 的特性之一，更新视图，无需操纵 dom ，剩下很多代码（ 想想 flex ）。在jquery更新视图的步骤是这样的，将设有如下视图

我要在<code>ul</code>插入<code>li</code>,需要操作 dom 来添加节点元素。

假设，此时，我要删除<code>log</code>视图，那我不得不去 操作 dom,把ajax 里面的添加方法修改了。太蛋疼了。其实在 js 里面写 html 本身就是一件困难的事，因为 html 包含尖括号、属性、双引号、单引号、方法，在 js 需要对这些特殊符号进行转义 ，代码将会变得冗长易出错且难以识别。 如下面的例子：

看下 angularjs 是怎么干的，先定义一个界面模板

而后更新数据

视图就会根据数据自动刷新了。而界面改成什么样，并不需要去修改更新数据的接口，比如改成下面的样子

用 angularjs 模型为中心和 jquery dom为中心的范式完全不同。经验丰富的jquery开发者开发 angularjs 可能会陷入“范式的陷阱”。建议你跳过 jquery 的依赖，同时学习用 angularjs（只是不想回到旧的习惯和学会用angularjs方式解决问题）。不要混合使用 jquery 和 angularjs 。不要使用 jquery 。最好不要引入它。当你遇到一个问题，而这个问题你知道如何使用 jquery 去解决，那么在你使用$之前， 请思考一下如何以 angularjs 的方式去解决它。 jquery 从来就不是必须的。

<a href="https://www.packtpub.com/web-development/mastering-web-application-development-angularjs">mastering web application development with angularjs</a>

<a href="http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background">http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background</a>