AngularJS做什么比jQuery好？

数据绑定

You go around making your webpage,and keep on putting {{data
bindings}} whenever you feel you would have dynamic data. Angular will
then provide you a $scope handler,which you can populate (statically
or through calls to the web server).

这是对数据绑定的很好理解。我想你已经下了。

DOM操作

For simple DOM manipulation,which doesnot involve data manipulation
(eg: color changes on mousehover,hiding/showing elements on click),
jQuery or old-school js is sufficient and cleaner. This assumes that
the model in angular’s mvc is anything that reflects data on the page,
and hence,css properties like color,display/hide,etc changes dont
affect the model.

我可以看到你在这里的关于“简单”DOM操作更清洁，但只有很少，它必须是真正“简单”。我认为DOM操作是一个领域，就像数据绑定，其中Angular真的闪耀。理解这一点也将帮助你了解Angular如何看待它的意见。

我将首先比较Angular的方式和一个vanilla js的DOM操作方法。传统上，我们认为HTML不是“做”任何东西，而是这样写。所以，内联js，像“onclick”等是不好的做法，因为他们把“做”在HTML的上下文中，这不是“做”。角度翻转这个概念在它的头。当你写你的观点，你认为HTML是能够“做”很多事情。这个功能在角度指令中被抽象出来，但是如果它们已经存在或者你已经编写了它们，你不必考虑它是如何做的，你只是使用在这个“增强的”HTML中提供的功能angular允许你使用。这也意味着您的所有视图逻辑真正包含在视图中，而不是在您的javascript文件中。同样，推理是写在您的javascript文件中的指令可以被认为是增加HTML的能力，所以你让DOM担心操纵自己(可以说)。我将用一个简单的例子来演示。

这是我们要使用的标记。我给了一个直观的名字。

<div rotate-on-click="45"></div>

首先，我想评论一下，如果我们通过自定义Angular Directive给我们的HTML这个功能，我们已经完成了。这是一种新鲜空气的呼吸。更多关于那一刻。

使用jQuery实现

live demo here (click).

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实现

live demo here (click).

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)',transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

相当轻，非常干净，这只是一个简单的操纵！在我看来，角度方法赢得所有方面，特别是如何的功能被抽象出来，dom操作在DOM中声明。该功能通过html属性挂接到元素上，因此不需要通过选择器查询DOM，我们有两个很好的闭包 – 一个指令工厂的闭包，其中变量在指令的所有用法之间共享，以及在链接函数(或编译函数)中用于指令的每次使用的一个闭包。

DOM操作的双向数据绑定和指令只是使Angular真棒的开始。 Angular提倡所有代码都是模块化，可重用和易于测试，并且还包括单页面应用程序路由系统。重要的是要注意，jQuery是一个常用的方便/跨浏览器方法的库，但Angular是一个用于创建单页应用程序的功能齐全的框架。角度脚本实际上包括它自己的“lite”版本的jQuery，以便一些最基本的方法可用。因此，你可以认为使用Angular IS使用jQuery(轻)，但Angular提供了更多的“魔法”来帮助你在创建应用程序的过程。

这是一个伟大的职位更多相关信息：How do I “think in AngularJS” if I have a jQuery background?

一般差异。

上述几点是针对OP的具体关注点。我还将概述其他重要差异。我建议对每个主题做更多的阅读。

Angular和jQuery不能合理地比较。

Angular是一个框架，jQuery是一个库。框架有他们的位置和图书馆有他们的位置。然而，毫无疑问，一个好的框架在编写应用程序比库更有力量。这正是框架的要点。欢迎您使用纯JS编写代码，或者可以添加常用函数库，或者可以添加框架以大幅减少完成大多数操作所需的代码。因此，更恰当的问题是：

为什么要使用框架？

良好的框架可以帮助您构建代码，使其成为模块化(因此可重用)，干燥，可读，高效和安全。 jQuery不是一个框架，所以它在这些方面没有帮助。我们都看到了jQuery spaghetti代码的典型墙。这不是jQuery的错误 – 这是开发人员的故障，不知道如何构建代码。然而，如果开发人员知道如何构建代码，他们最终会写出一些最小的“框架”来提供我刚才讨论的基础(achitecture等)，或者他们会添加一些内容。例如，可能添加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的问题，你已经自动解决了它的方式是有用的和结构化以便将来重用，并轻松地包含在下一个项目。所有这一切的巨大的奖励是，你的代码将更容易测试。

在Angular中使事情“工作”不容易。

谢天谢地。前面提到的jQuery意大利面条代码是由一个开发者做出的“工作”，然后继续前进。你可以写错误的Angular代码，但是这是很难做到这一点，因为Angular会打你。这意味着你必须利用(至少在某种程度上)它提供的干净的架构。换句话说，使用Angular编写错误代码更困难，但是更方便的编写干净的代码。

角是远非完美。 Web开发世界总是在不断发展和变化，有新的和更好的方法提出来解决问题。例如，Facebook的React和Flux与Angular相比有一些很大的优势，但是有自己的缺点。没有什么是完美的，但Angular已经，现在仍然令人敬畏。正如jQuery曾经帮助网络世界向前发展一样，Angular也是如此，所以很多人会来。