AngularJS 比 jQuery 做得更好的是什么？

我主要使用 jQuery 库，刚开始使用 AngularJS。我已经阅读了一些关于 怎么做使用 Angular 的教程，但是我不清楚为什么或何时使用它，或者与仅仅使用 jQuery 相比，我可能会发现什么好处。

在我看来，Angular 让你想到了 MVC，这可能意味着你把你的网页看作一个模板 + 数据的组合。只要您觉得需要动态数据，就可以使用 {{data bindings}}。Angular 然后将提供一个 $scope 处理程序，您可以静态地或通过对 Web 服务器的调用来填充该处理程序。这看起来与 JSP 设计网页的方法很相似。我需要安格拉吗？

对于简单的 DOM 操作，其中 没有涉及数据操作(例如: 鼠标悬停时的颜色变化，单击时隐藏/显示元素) ，jQuery 或普通的 JS 就足够了，而且更简洁。这里假设角度的 MVC中的 模特是 反映页面数据的任何东西，因此 CSS 属性如颜色、显示/隐藏等的变化不会影响 模特。在 DOM 操作方面，Angular 比 jQuery 或普通的 JS 有什么优势吗？

与 jQuery 和插件相比，Angular 能做什么使它对开发有用呢？

370183 次浏览
小开
最佳答案

数据绑定

你到处制作你的网页，然后不停地放\{\{数据 }只要你觉得你有动态数据。角度意志 然后为您提供一个 $scope 处理程序，您可以(静态地)填充它 或通过调用网络服务器)。

这是对数据绑定的一个很好的理解，我想您已经掌握了。

DOM 操作

对于简单的 DOM 操作，它不涉及数据操作 (例如: 鼠标悬停时颜色变化，点击时隐藏/显示元素) , JQuery 或者老式的 js 是充分和干净的 角度的 mvc 中的模型是反映页面上数据的任何东西, 因此，css 属性如颜色、显示/隐藏等不会改变 影响模型。

我可以在这里看到您关于“简单”DOM 操作更干净的观点，但只有很少的情况下，它必须非常“简单”。我认为 DOM 操作是其中一个领域，就像数据绑定一样，是 Angular 真正发光的地方。理解这一点也将有助于您了解 Angular 是如何考虑它的观点的。

首先，我将比较 Angular 方法和普通的 js 方法对 DOM 的操作。传统上，我们认为 HTML 不是“做”任何事情，而是这样编写它。所以，内联 js，如“ onclick”等是不好的做法，因为他们把“ doing”放在 HTML 的上下文中，而不是“ do”。角度颠覆了这个概念。在编写视图时，您认为 HTML 能够“做”很多事情。这种能力在角度指令中被抽象出来，但是如果它们已经存在或者你已经编写了它们，你不需要考虑“如何”完成它，你只需要使用在这个“增强”的 HTML 中提供给你的能力，角度允许你使用。这也意味着所有的视图逻辑都真正包含在视图中，而不是在 javascript 文件中。同样，理由是在 javascript 文件中编写的指令可以被认为是在增加 HTML 的能力，所以您让 DOM 担心操作它自己(可以这么说)。我将用一个简单的例子来演示。

这就是我们想要使用的标记，我给它起了一个直观的名字。

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

首先，我想说的是，如果 我们已经通过一个自定义的角度指令给了我们的 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]'));

角度实现

现场演示(点击)。

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 是一个用于创建单页面应用程序的功能齐全的 框架。角度脚本实际上包含了它自己的“轻量级”版本的 jQuery，这样一些最基本的方法就可以使用了。因此，你可能会争辩说，使用 Angular IS 使用 jQuery (轻微) ，但 Angular 提供了更多的“魔法”来帮助您在创建应用程序的过程中。

这是一个伟大的职位更多的相关信息: 如果我有一个 jQuery 背景，我如何“用 AngularJS 思考”

一般性差异。

以上几点针对的是 OP 的具体关注点。我还将概述其他重要的不同之处。我建议对每个主题也做一些额外的阅读。

无法合理地比较 Angular 和 jQuery。

Angular 是一个框架，jQuery 是一个库。框架有自己的位置，库也有自己的位置。但是，毫无疑问，一个好的框架在编写应用程序方面比库有更大的能力。这正是框架的意义所在。欢迎您使用普通的 JS 编写代码，或者您可以添加一个公共函数库，或者您可以添加一个框架来大大减少完成大多数事情所需的代码。因此，一个更合适的问题是:

为什么要使用框架？

好的框架可以帮助构建您的代码，使其具有模块化(因此可重用)、 DRY、可读性、高性能和安全性。JQuery 不是一个框架，所以在这些方面没有帮助。我们都看到过典型的 jQuery 意大利面代码墙。这不是 jQuery 的错——而是不知道如何构建代码的开发人员的错。然而，如果开发人员确实知道如何构建代码，他们最终会编写某种最小的“框架”来提供我刚才讨论的基础(体系结构等) ，或者他们会添加一些内容。例如，您可以添加 RequreJS 作为编写优秀代码的框架的一部分。

以下是现代框架提供的一些东西:

  • 模板化
  • 数据绑定
  • 路由(单页应用程序)
  • 清洁的、模块化的、可重用的架构
  • 保安
  • 方便使用的额外功能

在我进一步讨论角度，我想指出，角度是不是唯一的一种。例如，Durandal 是一个建立在 jQuery、 Knockout 和 Requrejs 之上的框架。同样，jQuery 本身不能提供 Knockout、 RequreJS 和构建在它们之上的整个框架所能提供的内容。根本没法比。

如果你需要摧毁一颗行星并且你有一颗死星，使用死星。

角度(重访)。

在前面关于框架提供什么的观点的基础上，我想赞扬 Angular 提供框架的方式，并试图澄清为什么这在事实上优于单独的 jQuery。

DOM 引用。

在我上面的例子中，为了提供功能，jQuery 必须与 DOM 挂钩，这是绝对不可避免的。这意味着视图(html)关注的是功能(因为它被标记为某种类型的标识符——比如“图像滑块”) ，而 JavaScript 关注的是提供这种功能。角度通过抽象消除了这个概念。使用 Angular 正确编写代码意味着视图能够声明自己的行为。如果我想显示一个时钟:

<clock></clock>

成交。

是的，我们需要使用 JavaScript 来使其具有某种意义，但是我们使用的是与 jQuery 方法相反的方法。我们的 Angular 指令(在它自己的小世界里)已经“增强”了 html，而 html 将功能挂到了自己身上。

MVW 架构/模块/依赖注入

Angular 为您提供了一种简单的方法来构造代码。视图属于视图(html) ，增强的视图功能属于指令，其他逻辑(如 ajax 调用)和函数属于服务，服务和逻辑到视图的连接属于控制器。还有一些其他的角度组件可以帮助处理服务的配置和修改等等。你创建的任何功能都可以通过 Injector 子系统自动在任何需要的地方使用，该子系统负责处理整个应用程序的依赖注入。在编写应用程序(模块)时，我将其分解为其他可重用的模块，每个模块都有自己的可重用组件，然后将它们包含在更大的项目中。一旦你用 Angular 解决了一个问题，你已经自动地以一种有用的、结构化的方式解决了它，这种方式可以在将来重用，并且很容易地包含在下一个项目中。所有这一切的一个好处是，您的代码将更容易测试。

要让事物在角度上“工作”并不容易。

谢天谢地。上面提到的 jQuery 意大利面代码是一个开发人员让某些东西“工作”然后继续前进的结果。你可以编写糟糕的 Angular 代码，但这样做要困难得多，因为 Angular 会为此与你争吵。这意味着您必须利用(至少在某种程度上)它提供的干净架构。换句话说，使用 Angular 编写糟糕的代码更加困难，但是编写干净的代码更加方便。

角度远非完美。网络开发的世界总是在成长和变化，有新的和更好的方法被提出来解决问题。例如，Facebook 的 React 和 Flux 比 Angular 有一些很大的优势，但也有自己的缺点。没有什么是完美的，但是 Angular 一直是，现在仍然很棒。正如 jQuery 曾经帮助网络世界向前发展一样，Angular 也曾经帮助过网络世界向前发展，未来还会有很多这样的公司。


提交答案