这两种方式实际上做了同样的事情，但是在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>');
}
});
相对于这样一个视图
复制代码 代码如下:
<ul>
</ul>
除了混杂的问题之外，我们还存在我之前提到的如何表明自己意图的问题。但是更为重要的是，我们必须人工手动去引用并更新这个DOM节点，如果我们想删除其中一条，那么必须以编程方式去操作那个DOM元素，那么在这种情况下我们怎么去测试DOM节点之外的逻辑呢，亦或者我们想改变展示方式呢？
以上代码显得凌乱又脆弱，但是在AngularJS中，我们可以这样做：
复制代码 代码如下:
$http( '/myEndpoint.json' ).then( function ( response ) {
$scope.log.push( { msg: 'Data Received!' } );
});
我们的视图应该像下面这样
复制代码 代码如下:
<ul>
<li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>
在那种情况下，我们的视图也可以这样
复制代码 代码如下:
<div>
<div ng-repeat="entry in log">
{{ entry.msg }}
</div>
</div>
现在我们不使用ul,而是使用Bootstrap的弹出框，但是我们不用修改controller中的代码，更为重要的是，不管是数据如何修改，视图层也会自动随之发生变化，非常简洁！
尽管我这里不会做演示，但是你需要知道数据绑定是双向的，你可以编辑数据通过添加指令<input ng-model="entry.msg" />，此外还有很多其他的令人兴奋的地方。
区别model层
在jQuery中，DOM类似于一种model，但是在AngularJS中，我们拥有不同于jQuery中的model层以便我们可以以任何我们想要的方式去管理它，它是完全独立于视图之外的。这种方式是有助于我们进行数据绑定并且可以保持对分离的关注，而且可以具备更好的可测试性。
关注点分离
以上所讲都和这个总体的话题相关：让你关注分离，你的视图层显示记录，你的model层代表数据，你还有个服务层用来执行这些可复用的任务。你使用directive来执行dom操作并扩展你的视图，并将它和controller连接起来，这也就是我在其他方面提到的有关于增强可测试性的原因。
依赖注入
帮助我们解决关注点分离的是依赖注入（DI），如果你是一个服务端开发者（Java或者PHP），你可能已经很熟悉这个概念了，但是如果你是从事客户端开发的，你会觉得这个概念可能有些多余和纯属追求时髦，但是实际上不是这样。
从广义的角度讲，DI意味着你可以自由地声明组件然后从这些组件中进行实例化，这是理所当然的。你不必知道加载顺序，文件位置等诸如此类的事情，这种魔力不是能够立即看到，但是我会给出一个例子：测试。