AngularJS比jQuery做得更好吗？
我主要使用jQuery库，并刚刚开始使用AngularJS。 我已经阅读了一些关于如何使用Angular的教程，但是我不清楚为什么或何时使用它，或者我可能比使用jQuery有什么好处。
在我看来，Angular让你思考MVC，这也许意味着你将你的网页看作模板+数据组合。 只要你觉得自己有dynamic数据，就可以使用{{data bindings}} 。 然后，Angular会为您提供一个$ scope处理程序，您可以静态填充或通过调用Web服务器。 这看起来很像JSP的网页devise方式。 我需要Angular吗？
对于简单的DOM操作， 不涉及数据操作（例如：鼠标hover时的颜色变化，点击时隐藏/显示元素），jQuery或者vanilla JS就足够简洁了。 这假定angular度的mvc中的模型是反映页面上数据的任何东西，因此CSS属性（如颜色，显示/隐藏等）的更改不会影响模型 。 Angular与DOM操作的jQuery或vanilla JS有什么优势？
与jQuery可以和插件做什么相比，Angular可以做些什么呢？
数据绑定
你绕过你的网页，每当你觉得你有dynamic数据的时候，不断地把{{data bindings}}放进去。 然后，Angular会为您提供$ scope处理程序，您可以通过静态或通过调用Web服务器来填充该处理程序。
这是对数据绑定的一个很好的理解。 我想你已经知道了。
DOM操纵
对于简单的DOM操作，不涉及数据操作（例如：在mousehover上的颜色变化，在点击时隐藏/显示元素），jQuery或老派的js是足够和干净的。 这假定angular度的mvc中的模型是反映页面上的数据的任何东西，因此，像颜色，显示/隐藏等变化不会影响模型的CSS属性。
我可以在这里看到你的观点，关于“简单”的DOM操作更清晰，但是很less，而且必须非常“简单”。 我认为DOM操作就像数据绑定一样，Angular真的很shiny。 了解这一点也将帮助您了解Angular如何考虑其观点。
我将首先比较Angular的方法和一个用于DOM操作的vanilla js方法。 传统上，我们认为HTML不是“做”任何东西，而是像这样写。 所以，内联js，比如“onclick”等是不好的做法，因为他们把“做”放在HTML的上下文中，而不是“做”。 angular度翻转这个概念在它的头上。 当你写你的观点时，你认为HTML能够“做”很多事情。 这个能力在angular度指令中被抽象出来，但是如果它们已经存在或者你已经写了它们，你不必考虑它是如何完成的，你只需要在这个“增强的”HTML中使用可用的functionangular度允许你使用。 这也意味着你所有的视图逻辑都真正包含在视图中，而不是在你的JavaScript文件中。 再说一遍，推理是用javascript文件编写的指令可以被认为是提高了HTML的能力，所以你让DOM担心操纵自己（可以这么说）。 我将用一个简单的例子来演示。
这是我们想要使用的标记。 我给了它一个直观的名字。
<div rotate-on-click="45"></div>
首先，我只想评论一下，如果我们已经通过一个自定义的Angular Directive为HTML提供了这个function，那么我们已经完成了 。 那是一股清新的空气。 更多关于这一点。
用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)' }); }); } }; });
非常轻，非常干净，这只是一个简单的操作！ 在我看来，angular度方法在所有方面都是胜利的，特别是如何将function抽象出来，并在DOM中声明DOM操作。 该function通过html属性挂钩到元素上，所以不需要通过select器来查询DOM，并且我们有两个很好的闭包 – 一个指令工厂的闭包，其中variables在指令的所有用法之间共享，以及link函数（或compile函数）中指令的每次使用的一个闭包。
DOM操作的双向数据绑定和指令只是使Angular真棒的开始。 Angular促进了所有代码的模块化，可重用和易于testing，还包括一个单页的应用程序路由系统。 需要注意的是，jQuery是一个常用的便利/跨浏览器方法库，但Angular是一个用于创build单页面应用程序的全function框架 。 angular文字实际上包含了自己的“精简版”的jQuery，所以一些最基本的方法是可用的。 因此，你可以争论说，使用Angular IS使用jQuery（轻微），但是Angular提供了更多的“魔术”来帮助你创build应用程序。
这是一个伟大的职位，更多的相关信息： 如果我有一个jQuery背景，我如何“在AngularJS中思考”？
一般差异。
以上几点是针对OP的具体问题。 我还将概述其他重要的不同之处。 我build议对每个主题做更多的阅读。
Angular和jQuery不能合理地比较。
Angular是一个框架，jQuery是一个库。 框架有自己的位置，图书馆也有自己的位置。 然而，毫无疑问，一个好的框架在编写应用程序时比图书馆有更多的权力。 这正是框架的要点。 欢迎您使用纯JS编写代码，或者添加一个常用函数库，或者添加一个框架来大幅度减less完成大部分工作所需的代码。 所以更合适的问题是：
为什么要使用框架？
良好的框架可以帮助架构您的代码，使其成为模块化（因此可重用），干，可读，性能和安全。 jQuery不是一个框架，所以在这方面没有帮助。 我们都看到了jQuery意大利面条代码的典型墙壁。 这不是jQuery的错误 – 这是开发人员不知道如何构build代码的错误。 但是，如果开发人员知道如何构build代码，他们最终会写一些最小的“框架”来提供我刚才讨论的基础（架构等），或者他们会添加一些东西。例如，可能会添加RequireJS来充当编写好代码的框架的一部分。
以下是现代框架提供的一些东西：
- 模板
- 数据绑定
- 路由（单页面应用程序）
- 清洁，模块化，可重复使用的架构
- 安全
- 附加的function/特点为了方便
在我进一步讨论Angular之前，我想指出Angular并不是唯一的一个。 例如，Durandal是一个基于jQuery，Knockout和RequireJS的框架。 再一次，jQuery本身不能提供Knockout，RequireJS和顶层构build的整个框架。 这只是没有可比性。
如果你需要摧毁一颗行星，而你有一颗死亡之星，使用死亡之星。
angular（重新访问）。
基于我之前关于什么框架提供的观点，我想赞扬Angular为他们提供的方式，并试图澄清为什么事实上优于单独的jQuery。
DOM参考。
在我上面的例子中，jQuery必须绑定到DOM才能提供function是绝对不可避免的。 这意味着视图（html）关心function（因为它被标记了某种标识符 – 比如“图像滑块”），而JavaScript则关心提供这种function。 Angular通过抽象消除了这个概念。 用Angular编写正确的代码意味着视图能够声明自己的行为。 如果我想显示一个时钟：
<clock></clock>
完成。
是的，我们需要去JavaScript来做到这一点，但是我们正在以与jQuery方法相反的方式来做到这一点。 我们的Angular指令（在它自己的小世界中）已经“增强了”了html，而且html把function挂钩了。
MVW架构/模块/dependency injection
Angular给你一个直接的方式来构build你的代码。 查看视图属于视图（html），增强视图function属于指令，其他逻辑（如ajax调用）和函数属于服务，视图中服务和逻辑的连接属于控制器。 还有一些其他的angular度组件可以帮助处理服务的configuration和修改等。您创build的任何function都可以通过Injector子系统自动在您需要的任何位置使用，该子系统在整个应用程序中负责dependency injection。 当编写一个应用程序（模块）时，我将它分解成其他可重用的模块，每个模块都有自己的可重用组件，然后将它们包含在更大的项目中。 一旦你解决了Angular的一个问题，你已经自动地以一种有用的方式解决了这个问题，这个方法将来可以重用，并且很容易包含在下一个项目中。 一个巨大的好处是，你的代码将更容易testing。
在Angular中使事情“工作”并不容易。
谢天谢地。 前面提到的jQuery意大利面代码是由一个开发者创造了一些“工作”的东西，然后继续前进的。 你可以编写糟糕的Angular代码，但是这样做会困难得多，因为Angular会为此而战。 这意味着你必须利用（至less在某种程度上）它提供的干净的架构。 换句话说，用Angular编写不好的代码很难，但是编写干净的代码更方便。
angular度远非完美。 networking发展的世界在不断发展和变化，解决问题的方式也有了新的更好的途径。 例如，Facebook的React和Flux与Angular相比有一些很大的优势，但是也有自己的缺点。 没有什么是完美的，但Angular已经并且现在仍然很棒。 就像jQuery曾经帮助networking世界前进一样，Angular也是如此，许多人也会来。
