最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同，如果不能认识到这点而对于之前做jQuery开发的程序员，去直接学习angularjs的话，很可能学了很久还不知道这个东西能用来干什么以及怎么使用，怎么和UI进行结合等问题,在stackoverflow上找到一篇关于这方面的文章，阅读之后颇有收获，在此基础上将它译成中文，以求抛砖引玉大家一同学习。 原问题：假如我熟悉利用jQuery去开发客户端应用，那么我怎么上手angularjs,能否描述下所需要的模式转变，下面这些问题能够帮助你给出一个回答： 1.在设计客户端web应用的时候有什么区别，最大的区别是什么？ 2.我应该停止使用哪些技术，同时又使用哪些技术作为替代？ 3.是否存在服务端需要考虑的东西或者说一些限制呢？ 回答： [b]1.不要首先设计好你的页面，然后再通过DOM操作去修改它[/b] 在jQuery中，你首先设计了一个page，然后再去动态修改它的内容，这是因为jQuery被设计用来进行扩展并在这个前提下大幅度地增加和修改内容，但是在angularjs中，你必须在心中先设计好你的架构， 从一开始，你就要摒弃“我拥有一个DOM元素并且想让它去做某件事”，代之为“我需要完成什么任务，然后接着设计你的应用，最后再去设计你的视图view层”。 [b]2.不要使用angularjs去扩展jQuery[/b] 相应地，不要存在说让jQuery去干某些事情，然后在此基础上添加angularjs的功能让它去管理model以及controller的想法。所以我一般不推荐AngularJS开发新手同时使用jQuery，至少在他们还没有适应AngularJS的开发模式之前不会去推荐这样做，但是当你真正开始适应angularjs 的方式之后，你会发觉这是一件很诱人的事情。 我曾经看到过很多开发者采用将150到200行代码的jQuery插件利用angularjs的回调以及$apply方法封装起来，这种方式使得代码看起来极其复杂，但是实际上他们让这些插件跑起来了！问题在于，在大部分情况下jQuery插件能够用angularjs进行重写，并且可能只会使用很少量的代码，同时这种重写使得代码很直观且易于理解，这显然好过于将jQuery代码直接做封装。 所以最后说，当你遇见问题的时候，首先要以angularjs的思维进行思考，如果找不到解决方案，可以求助于社区，如果说没有人能够给出一个简单的方案，那么才考虑使用jQuery，不要让jQuery成为你的拐杖，否则你永远掌握不了AngularJS。 [b]3.要以架构为中心进行思考[/b] 首先你要知道单页应用属于web应用，它们不是传统的多网页网站，所以我们要同时作为一个服务端和客户端开发者的思维进行思考，我们需要思考如何将我们的应用分为独立的，可扩展的以及可测试的部分。 那么接下来我们如何采用AngularJS思维去工作呢，以下是一些将其与jQuery对比之后的基本准则： [b]以下是某个应用的视图层：[/b] 在jQuery中，我们动态地去修改这个视图，我们使用ul去定义一个dropdown menu 在jQuery中，我们采用如下逻辑使用这个dropdownMenu 让我们回头看看这个view，你会发现它的功能并不是很直白，对于小型应用来讲，这样是可以的，但是对于大型应用来讲，这种方式会让人费解并且难以维护； 在angularjs中，这个视图实际上是一项基于视图的功能，我们可以这样来定义ul

[url=/hello]

好了，现在我们可以写一个测试用来测试这个不存在的指令when-active了 我们直接run测试用例，你会发现是失败的，这时候需要创建这个指令，如下： 再次run这个测试用例，你会发现通过了并且菜单如请求的样子显示，我们的开发是兼有反复性和可测试性，非常酷吧！ [b]5.从概念上讲，指令不是打包的jQuery[/b] 你常常听说，dom操作只能在指令中，这是必须的，你必须严肃对待。 让我们深入讨论， 某些指令仅仅是装饰我们的视图（例如ngClass），因此有时候直接操作dom是可以的，但是当一个指令类似于一个小物件并且拥有自己的模板，那么它应该当做一个分离的关注点，这就是说，它的模板需要和link中的执行逻辑以及其他controller函数分离开。 AngularJS拥有一整套的工具可以是这种分离更简单，使用ngClass指令，我们可以动态地更新class,使用ngBind我们可以进行双向数据绑定，使用ngShow和ngHide 我们 可以采用编程的形式显示和隐藏一个元素，也包括我们自己写的很多指令。换句话说，我们可以不用Dom操作而完成所有工作，dom操作越少，指令越容易测试，越容易指定他们的style属性，就越容易在将来改变他们，那么他们就越容易复用和分发。 我看过很多AngularJS新手使用指令封装一大串 jQuery代码，换句话说，既然我不能在controller里面进行dom操作，那么我可以将他放在指令中，虽然这相对于直接操作dom好很多，但是任然是错误的。 看看我们在上面的记录，即使我们将其放在一个指令中，我们任然需要以Angular的方式去操作它，这种方式不执行dom操作！在很多时候dom操作是需要的，但是这种情况比你想的要少得多。当我们需要做dom操作的时候先问问自己这里是否必须这样做，这才是一种更好的方式。 下面是一个简单的例子用来表明我常常见到的一种模式，我们需要I一个可切换的button： 在以上例子中存在以下错误： 1.首先，jQuery是不必要的，这里的工作完全不需要jQuery！ 2.第二，即使我们已经在页面中引入了jquery,但是我们没有理由去使用它，我们可以使用angular.element而我们的组件也能够运行，即使这个项目中没有引入jQuery。 3.第三，假设jquery是需要的在我们的指令中，我们可以使用jqLite去进行替代，只要引入jQuery即可，所以我们不必使用$而是使用angular.element; 4.第四，和第三点联系很紧密，jqLite元素不必使用$包裹起来，element元素传递到link函数中已经是一个jQuery对象了； 5.第五，我们之前已经说过，为什么不将我们的模板和逻辑混合起来呢? 以上指令可以按照如下方式来重写，即使在最复杂的情况下看起来也如此简单。 模板元素是在 template属性中，你可以很容易替换掉它的style，而逻辑根本不用发生变化，达到了完全复用！ 还有其他的好处，比如测试起来很简单，不管模板里面是什么，指令API都不会发生改变，所以重构它很简单。你可以随意多次改变你的模板而不用改变指令，无论你怎么改变，你的测试总能通过！ 所以说指令不是一堆jQuery代码的集合，比如函数等，而是HTML代码的扩展，如果HTML代码不能实现你需要的功能，你可以写一个指令去实现它，然后像使用HTML那样去使用它。 以另外一种方式讲，AngularJS如果不做额外的事情，想想我们怎么能够使用ngClick,ngClass指令呢？ [b]总结[/b] 不要总使用jquery ,甚至不要去引用它，它会阻止你前进，当我们回到这个问题—你知道你怎么在AngularJS中以jquery方式解决问题，但是当你使用诸如$等选择器时，你要想想它们实际上是禁锢了AngularJS，如果你不知道怎么不用jQuery实现，那么去请教别人，一次一次去问，最好的方式是不需要使用jQuery，使用jQuery只会导致你的工作量提升。