数据绑定

您四处制作网页，并在需要动态数据时继续放置{{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也是如此，并且将会有很多人出现。