我主要使用jQuery库，刚刚开始使用AngularJS。我已经阅读了一些关于如何使用Angular的教程，但是我不清楚为什么或何时使用它，或者与使用jQuery相比我可以找到什么好处。
在我看来，Angular让你想到MVC，这或许意味着你将你的网页视为模板+数据组合。只要您觉得有动态数据，就可以使用{{data bindings}}。然后，Angular将为您提供$ scope处理程序，您可以静态填充或通过调用Web服务器。这似乎与JSP设计网页的方式类似。我需要Angular吗？
对于简单的DOM操作，其中不涉及数据操作（例如：鼠标悬停时的颜色变化，在点击时隐藏/显示元素），jQuery或vanilla JS就足够清晰了。这假设angular的 mvc 中的模型是反映页面上数据的任何内容，因此，CSS属性，如颜色，显示/隐藏，等更改不会影响模型。 Angular是否比jQuery或vanilla JS对DOM操作有任何优势？
与jQuery可以与插件一起做的事情相比，Angular能做什么使它对开发有用？
答案 0 :(得分：274)
您可以自己制作网页，并继续使用{{数据 绑定}}只要你觉得你有动态数据。 Angular意志 然后为您提供$ scope处理程序，您可以填充（静态地） 或通过调用Web服务器。）
这是对数据绑定的很好理解。我认为你已经失败了。
对于简单的DOM操作，不涉及数据操作 （例如：鼠标悬停时颜色变化，点击时隐藏/显示元素）， jQuery或老派js足够清洁。这假定 角度mvc中的模型是反映页面数据的任何东西， 因此，色彩，显示/隐藏等css属性不会改变 影响模型。
我可以在这里看到你的观点＆＃34;简单＆＃34; DOM操作更清晰，但很少，而且必须非常简单＆＃34;。我认为DOM操作是一个区域，就像数据绑定一样，Angular真的很闪耀。了解这一点也可以帮助您了解Angular如何考虑其观点。
我首先将Angular方法与vanilla js方法与DOM操作进行比较。传统上，我们认为HTML不是＆＃34;做＆＃34;什么都写下来。因此，内联js，例如＆＃34; onclick＆＃34;等是不好的做法，因为他们把＆＃34;做＆＃34;在HTML的上下文中，没有＆＃34;做＆＃34;。角度翻转这个概念在它的头上。当您正在撰写视图时，您会认为HTML能够做到＆＃34;做＆＃34;许多事。这种能力在角度指令中被抽象出来，但是如果它们已经存在或者你已经写过它们，你就不必考虑＆＃34;如何＆＃34;它已经完成，你只需使用在这个＆＃34;增强的＆＃34;角度允许您使用的HTML。这也意味着您的所有视图逻辑都真正包含在视图中，而不是在您的javascript文件中。同样，原因是你的javascript文件中写的指令可以被认为是增加了HTML的能力，所以你让DOM担心操纵自己（可以这么说）。我将用一个简单的例子来演示。
<div rotate-on-click="45"></div>
首先，我想评论一下，如果我们通过自定义角度指令为我们的HTML提供了此功能，那么我们已经完成了。这是一股清新的空气。稍等一下。
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]'));
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是常用的便捷/跨浏览器方法的库，但Angular是用于创建单页应用程序的全功能框架。角度脚本实际上包括它自己的＆＃34; lite＆＃34; jQuery的版本，以便一些最基本的方法可用。因此，你可以说使用jQuery（轻微）使用Angular IS，但是Angular提供了更多＆＃34; magic＆＃34;帮助您创建应用程序。
这是一篇很棒的帖子，可以提供更多相关信息： How do I “think in AngularJS” if I have a jQuery background?
以上几点针对OP的具体问题。我还将概述其他重要的差异。我建议另外阅读每个主题。
Angular是一个框架，jQuery是一个库。框架有自己的位置，图书馆有自己的位置。但是，毫无疑问，良好的框架在编写应用程序方面比在库中具有更强大的功能。这正是框架的重点。欢迎您使用普通JS编写代码，或者可以添加常用函数库，或者添加框架以大幅减少完成大多数事务所需的代码。因此，更合适的问题是：
良好的框架可以帮助构建您的代码，使其具有模块化（因此可重用），干燥，可读，高效和安全。 jQuery不是一个框架，所以它在这些方面没有帮助。我们都看到了jQuery意大利面代码的典型墙壁。这不是jQuery的错 - 这是开发人员的错，他们不知道如何构建代码。但是，如果开发人员确实知道如何构建代码，那么他们最终会编写一些最小的框架＆＃34;提供我刚才讨论过的基础（架构等），或者他们会添加一些内容。例如，您可以添加RequireJS作为编写优秀代码的框架的一部分。
以下是现代框架提供的一些内容：
在我进一步讨论Angular之前，我想指出Angular并不是唯一的类型。例如，Durandal是一个构建在jQuery，Knockout和RequireJS之上的框架。同样，jQuery本身不能提供Knockout，RequireJS以及构建在它们之上的整个框架。它没有可比性。
如果你需要摧毁一颗行星并拥有死星，请使用死星。
基于我之前关于框架提供的观点，我想赞扬Angular提供它们的方式，并试图澄清为什么这个事实上优于单独的jQuery。
在上面的例子中，jQuery必须挂钩到DOM以提供功能是绝对不可避免的。这意味着视图（html）关注功能（因为它标有某种标识符 - 例如＆＃34;图像滑块＆＃34;）并且JavaScript关注提供该功能。 Angular通过抽象消除了这个概念。使用Angular正确编写代码意味着视图能够声明自己的行为。如果我想显示一个时钟：
<clock></clock>
完成。
是的，我们需要使用JavaScript来实现这一点，但我们以与jQuery方法相反的方式执行此操作。我们的Angular指令（在它自己的小世界中）已经＆＃34;增强了＆＃34; html和html将功能挂钩到自身。
Angular为您提供了一种构建代码的简单方法。查看属于视图的内容（html），增强视图功能属于指令，其他逻辑（如ajax调用）和函数属于服务，服务和逻辑与视图的连接属于控制器。还有一些其他角度组件可以帮助处理服务的配置和修改等。您创建的任何功能都可以通过Injector子系统在您需要的任何地方自动获得，该子系统负责整个应用程序中的依赖注入。在编写应用程序（模块）时，我将其分解为其他可重用的模块，每个模块都有自己的可重用组件，然后将它们包含在更大的项目中。一旦您解决了Angular的问题，您就会以一种有用且结构化的方式自动解决它，以便将来重用并轻松包含在下一个项目中。所有这些的巨大的奖励是您的代码将更容易测试。
感谢良好。前面提到的jQuery意大利面条代码来自一个开发人员，他们做了一些工作＆＃34;然后继续前进。你可以编写糟糕的Angular代码，但这样做要困难得多，因为Angular会为你而战。这意味着您必须（至少在某种程度上）利用它提供的干净架构。换句话说，使用Angular编写错误代码更难，但编写干净代码更方便。
Angular远非完美。 Web开发世界总是在不断发展和变化，并且有更新的更好的方法来解决问题。例如，Facebook的React和Flux比Angular有一些很大的优势，但它们有其自身的缺点。没有什么是完美的，但Angular现在已经并且仍然很棒。就像jQuery曾经帮助网络世界向前发展一样，Angular也是如此，很多人也会如此。