最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同，如果不能认识到这点而对于之前做jQuery开发的程序员，去直接学习angularjs的话，很可能学了很久还不知道这个东西能用来干什么以及怎么使用，怎么和UI进行结合等问题,在stackoverflow上找到一篇关于这方面的文章，阅读之后颇有收获，在此基础上将它译成中文，以求抛砖引玉大家一同学习。
原问题：假如我熟悉利用jQuery去开发客户端应用，那么我怎么上手angularjs,能否描述下所需要的模式转变，下面这些问题能够帮助你给出一个回答：
1.在设计客户端web应用的时候有什么区别，最大的区别是什么？
2.我应该停止使用哪些技术，同时又使用哪些技术作为替代？
3.是否存在服务端需要考虑的东西或者说一些限制呢？
回答：
1.不要首先设计好你的页面，然后再通过DOM操作去修改它
在jQuery中，你首先设计了一个page，然后再去动态修改它的内容，这是因为jQuery被设计用来进行扩展并在这个前提下大幅度地增加和修改内容，但是在angularjs中，你必须在心中先设计好你的架构，
从一开始，你就要摒弃“我拥有一个DOM元素并且想让它去做某件事”，代之为“我需要完成什么任务，然后接着设计你的应用，最后再去设计你的视图view层”。
2.不要使用angularjs去扩展jQuery
相应地，不要存在说让jQuery去干某些事情，然后在此基础上添加angularjs的功能让它去管理model以及controller的想法。所以我一般不推荐AngularJS开发新手同时使用jQuery，至少在他们还没有适应AngularJS的开发模式之前不会去推荐这样做，但是当你真正开始适应angularjs 的方式之后，你会发觉这是一件很诱人的事情。
我曾经看到过很多开发者采用将150到200行代码的jQuery插件利用angularjs的回调以及$apply方法封装起来，这种方式使得代码看起来极其复杂，但是实际上他们让这些插件跑起来了！问题在于，在大部分情况下jQuery插件能够用angularjs进行重写，并且可能只会使用很少量的代码，同时这种重写使得代码很直观且易于理解，这显然好过于将jQuery代码直接做封装。
所以最后说，当你遇见问题的时候，首先要以angularjs的思维进行思考，如果找不到解决方案，可以求助于社区，如果说没有人能够给出一个简单的方案，那么才考虑使用jQuery，不要让jQuery成为你的拐杖，否则你永远掌握不了AngularJS。
3.要以架构为中心进行思考
首先你要知道单页应用属于web应用，它们不是传统的多网页网站，所以我们要同时作为一个服务端和客户端开发者的思维进行思考，我们需要思考如何将我们的应用分为独立的，可扩展的以及可测试的部分。
那么接下来我们如何采用AngularJS思维去工作呢，以下是一些将其与jQuery对比之后的基本准则：
以下是某个应用的视图层：
在jQuery中，我们动态地去修改这个视图，我们使用ul去定义一个dropdown menu
<ul class="main-menu">
<li class="active">
<a href="#/home">Home</a>
</li>
<li>
<a href="#/menu1">Menu 1</a>
<ul>
<li><a href="#/sm1">Submenu 1</a></li>
<li><a href="#/sm2">Submenu 2</a></li>
<li><a href="#/sm3">Submenu 3</a></li>
</ul>
</li>
<li>
<a href="#/home">Menu 2</a>
</li>
</ul>
</div>
在jQuery中，我们采用如下逻辑使用这个dropdownMenu
$('.main-menu').dropdownMenu();
</div>
让我们回头看看这个view，你会发现它的功能并不是很直白，对于小型应用来讲，这样是可以的，但是对于大型应用来讲，这种方式会让人费解并且难以维护；
在angularjs中，这个视图实际上是一项基于视图的功能，我们可以这样来定义ul
<ul class="main-menu" dropdown-menu>
...
</ul>
</div>
这两种方式实际上做了同样的事情，但是在AngularJS方式下任何人看到这个视图模板就知道接下来要干什么。无论何时当一个新成员加入开发团队之后他都能够看到这里并发现这里有一个叫做dropdownMenu的指令去操作view，他不需要去猜想正确的答案或者审查其他的代码，这个视图就直接告诉我们它要做什么，相比于jQuery，它更为简洁。
常常有些AngularJS新手问这样的问题：我怎么才能找到某个确切类型的所有link并在此基础上添加一个directive，但是当我们回答了“你不应该这样去做，你这是一种半jQuery半angularjs的想法”时，他们会觉得很吃惊。
问题在于他们试图在AngularJS背景下用jQuery去做某件事，这通常不是一种好的方式，在指令之外你不需要去做任何dom操作，而指令是直接内添加在视图上的，所以意图已经很明显了。记住，不要先设计好之后再去修改，而是先有架构然后在这个框架下再去设计。
数据绑定
这是到目前为止AngularJS最令人瞩目的特性了，在数据绑定方面它舍弃了对DOM的操作方式，而这一切都是由AngularJS来自动更新视图，你不必写操作dom的代码，在jQuery中，我们常常按照以下方式响应事件并修改视图：
$.ajax({
url: '/myEndpoint.json',
success: function ( data, status ) {
$('ul#log').append('<li>Data Received!</li>');
}
});
</div>
相对于这样一个视图
<ul class="messages" id="log">
</ul>
</div>
除了混杂的问题之外，我们还存在我之前提到的如何表明自己意图的问题。但是更为重要的是，我们必须人工手动去引用并更新这个DOM节点，如果我们想删除其中一条，那么必须以编程方式去操作那个DOM元素，那么在这种情况下我们怎么去测试DOM节点之外的逻辑呢，亦或者我们想改变展示方式呢？
以上代码显得凌乱又脆弱，但是在AngularJS中，我们可以这样做：
$http( '/myEndpoint.json' ).then( function ( response ) {
$scope.log.push( { msg: 'Data Received!' } );
});
</div>
我们的视图应该像下面这样
<ul class="messages">
<li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>
</div>
在那种情况下，我们的视图也可以这样
<div cl