数据绑定
您四处制作网页，并在需要动态数据时继续放置{{data bindings}}。然后，Angular将为您提供一个$ scope处理程序，您可以填充该文件（静态地或通过对Web服务器的调用）。
这是对数据绑定的很好的理解。我想你已经明白了。
DOM操作
对于不涉及数据操作的简单DOM操作（例如，鼠标悬停时的颜色更改，单击时隐藏/显示元素），jQuery或老式js便足够且简洁。这是假设angular的mvc中的模型可以反映页面上的数据，因此，诸如颜色，显示/隐藏等更改的css属性不会影响模型。
在这里，我可以看到您的观点，即“简单”的DOM操作更加简洁，但很少见，它实际上必须是“简单”的。我认为DOM操作是Angular真正发挥作用的领域之一，就像数据绑定一样。了解这一点还将帮助您了解Angular如何看待其视图。
我将首先比较Angular方式与香草js方法进行DOM操作。传统上，我们认为HTML并不是“做任何事情”，而是这样写。因此，内联js（例如“ onclick”等）是不好的做法，因为它们将“正在执行”置于HTML的上下文中，而不是“执行”。Angular颠倒了这个概念。在编写视图时，您认为HTML能够“完成”许多事情。此功能是在角度指令中抽象出来的，但是如果它们已经存在或您已经编写了它们，则不必考虑“如何”完成，只需使用此“增强” HTML中提供给您的功能即可，角度允许您使用。这也意味着您所有的视图逻辑都真正包含在视图中，不在您的javascript文件中。再次，其理由是，可以将您的javascript文件中编写的指令视为可以提高HTML的功能，因此您可以让DOM担心对其自身进行操作（可以这么说）。我将通过一个简单的示例进行演示。
这是我们要使用的标记。我给它起了一个直观的名字。
<div rotate-on-click="45"></div>
首先，我想评论一下，如果我们通过自定义Angular指令为HTML提供了此功能，那么我们已经完成了。那是新鲜空气。稍后再讨论。
用jQuery实现
现场演示在这里（单击）。
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
用Angular实现
现场演示在这里（单击）。
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
很轻，很干净，那只是一个简单的操作！我认为，角度方法在所有方面都具有优势，尤其是如何抽象化功能并在DOM中声明dom操作。该功能通过html属性连接到元素上，因此无需通过选择器查询DOM，并且我们有两个不错的闭包-一个针对指令工厂的闭包，其中指令的所有用法之间共享变量，并在link函数中每次使用该指令时关闭一个闭包（或compile函数）。
双向数据绑定和用于DOM操作的指令仅仅是使Angular很棒的开始。Angular提倡所有代码都是模块化，可重用和易于测试的，并且还包括一个单页面的应用程序路由系统。需要注意的是jQuery是一个很重要的图书馆的普遍需要的便利/跨浏览器的方法，但是角度是一个全功能框架，用于创建单页的应用程序。角度脚本实际上包括其自己的“精简”版本的jQuery，因此可以使用一些最基本的方法。因此，您可能会争辩说（轻微地）使用jQuery使用Angular IS，但是Angular提供了更多的“魔术”来帮助您创建应用程序。
这是一篇提供更多相关信息的好文章：如果我有jQuery背景，如何“思考AngularJS”？
一般差异。
以上几点针对的是OP的特定问题。我还将概述其他重要差异。我建议也对每个主题进行更多阅读。
无法合理地比较Angular和jQuery。
Angular是一个框架，jQuery是一个库。框架在其中，图书馆在其中。但是，毫无疑问，一个好的框架在编写应用程序方面比库具有更大的功能。这正是框架的重点。欢迎使用普通的JS编写代码，或者可以添加通用功能的库，也可以添加框架以大大减少完成大多数工作所需的代码。因此，一个更合适的问题是：
为什么要使用框架？
好的框架可以帮助您构建代码，使其模块化（因此可重用），DRY，可读，高性能和安全。jQuery不是框架，因此在这些方面都无济于事。我们都已经看到了jQuery意大利面条代码的典型墙。这不是jQuery的错-这是不知道如何构造代码的开发人员的错。但是，如果开发人员确实知道如何构造代码，那么他们最终会写某种最小的“框架”来提供我刚才讨论的基础（架构等），或者他们会添加一些内容。例如，您可能会添加RequireJS作为编写良好代码的框架的一部分。
这是现代框架提供的一些东西：
- 模板化
- 数据绑定
- 路由（单页应用）
- 干净，模块化，可重用的体系结构
- 安全
- 为方便起见，附加功能/功能
在我进一步讨论Angular之前，我想指出Angular并不是唯一的一种。例如，Durandal是一个基于jQuery，Knockout和RequireJS构建的框架。同样，jQuery本身不能提供Knockout，RequireJS和基于它们构建的整个框架。这只是不可比的。
如果您需要摧毁一颗行星并且有死亡之星，请使用死亡之星。
角度（重新访问）。
在我之前关于框架提供的观点的基础上，我想赞扬Angular提供框架的方式，并尝试阐明为什么这实际上比单独使用jQuery要好。
DOM参考。
在我上面的示例中，绝对必须避免jQuery必须挂接到DOM上才能提供功能。这意味着视图（html）与功能有关（因为它被标记有某种标识符，例如“图像滑块”），而JavaScript与提供该功能有关。Angular通过抽象消除了该概念。用Angular正确编写代码意味着该视图能够声明其自己的行为。如果要显示时钟：
<clock></clock>
做完了
是的，我们需要使用JavaScript使其具有某种含义，但是我们采用的是与jQuery方法相反的方式。我们的Angular指令（在它自己的小世界中）已经“增强”了html，并且html将功能挂钩到了自身中。
MVW架构/模块/依赖注入
Angular提供了一种直接的方式来构造代码。视图事物属于视图（html），增强视图功能属于指令，其他逻辑（如ajax调用）和功能属于服务，而服务和逻辑到视图的连接属于控制器。还有一些其他角度组件也可以帮助处理服务的配置和修改等。您创建的任何功能都可以通过Injector子系统自动在您需要的任何位置使用，该子系统负责整个应用程序中的依赖注入。在编写应用程序（模块）时，我将其分解为其他可重用模块，每个模块都具有自己的可重用组件，然后将它们包含在更大的项目中。解决Angular的问题后，ve会以一种有用的结构化方式自动解决该问题，以备将来重用，并轻松地包含在下一个项目中。一个所有这些的巨大好处是您的代码将更易于测试。
在Angular中使事情“工作”并不容易。
谢天谢地。前面提到的jQuery spaghetti代码来自开发人员，该开发人员使“工作”完成了某些工作，然后继续进行。您可以编写不良的Angular代码，但这要困难得多，因为Angular会为此而奋斗。这意味着您必须（至少在某种程度上）利用其提供的干净架构。换句话说，用Angular编写不好的代码比较困难，但是编写干净的代码更方便。
角度远非完美。Web开发世界一直在发展和变化，并且提出了解决问题的新的更好的方法。例如，Facebook的React和Flux具有比Angular更大的优势，但也有其自身的缺点。没有什么是完美的，但是Angular过去一直并且现在仍然很棒。就像jQuery曾经帮助网络世界向前发展一样，Angular也是如此，并且将会有很多人出现。