什么是AngularJS比jQuery做得更好?

I have mainly been using the jQuery library and have just started using AngularJS. I have read a few tutorials on how to use Angular, but I am not clear on why or when to use it, or what benefits I may find in comparison to just using jQuery.

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

It seems to me that Angular makes you think MVC, which perhaps means that you view your webpage as a template + data combination. You use {{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. This appears characteristically similar to JSP way of designing webpages. Do I need Angular for this?

在我看来，角使你想到MVC，这可能意味着你把你的网页看作一个模板+数据组合。只要您觉得有动态数据，就可以使用{{data bindings}}。棱角将为您提供一个$scope处理程序，您可以静态地或通过对web服务器的调用来填充它。这与JSP设计网页的方式非常相似。我需要角度吗?

For simple DOM manipulation, which does not involve data manipulation (eg: color changes on mousehover, hiding/showing elements on click), jQuery or vanilla 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 don't affect the model. Does Angular have any advantages over jQuery or vanilla JS for DOM manipulations?

对于简单的DOM操作，它不涉及数据操作(例如:鼠标悬停上的颜色变化，单击时隐藏/显示元素)，jQuery或普通JS就足够且干净了。这就假定了，角的mvc中的模型是反映页面上的数据的任何东西，因此，CSS属性(如颜色、显示/隐藏等)的更改不会影响模型。在DOM操作方面，角化是否比jQuery或普通JS有什么优势?

What can Angular do that makes it useful for development in comparison to what jQuery can do along with plugins?

与jQuery和插件相比，使其对开发有用的角度能做什么呢?

1 个解决方案

#1

Data-Binding

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).

你到处制作你的网页，并且当你觉得你有动态数据的时候，不断地输入{{数据绑定}}。棱角将为您提供一个$scope处理程序，您可以对其进行填充(静态或通过对web服务器的调用)。

This is a good understanding of data-binding. I think you've got that down.

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

DOM Manipulation

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操作，它不涉及数据操作(例如:鼠标悬停上的颜色变化，单击时隐藏/显示元素)，jQuery或老式js就足够且干净了。这假设在角度的mvc中的模型是反映页面上数据的任何东西，因此，像颜色、显示/隐藏等css属性不会影响模型。

I can see your point here about "simple" DOM manipulation being cleaner, but only rarely and it would have to be really "simple". I think DOM manipulation is one the areas, just like data-binding, where Angular really shines. Understanding this will also help you see how Angular considers its views.

我可以在这里看到您关于“简单”DOM操作更简洁的观点，但是很少，而且它必须非常“简单”。我认为DOM操作是一个领域，就像数据绑定一样，它的角度非常突出。理解这一点也将有助于您了解角度是如何考虑它的观点的。

I'll start by comparing the Angular way with a vanilla js approach to DOM manipulation. Traditionally, we think of HTML as not "doing" anything and write it as such. So, inline js, like "onclick", etc are bad practice because they put the "doing" in the context of HTML, which doesn't "do". Angular flips that concept on its head. As you're writing your view, you think of HTML as being able to "do" lots of things. This capability is abstracted away in angular directives, but if they already exist or you have written them, you don't have to consider "how" it is done, you just use the power made available to you in this "augmented" HTML that angular allows you to use. This also means that ALL of your view logic is truly contained in the view, not in your javascript files. Again, the reasoning is that the directives written in your javascript files could be considered to be increasing the capability of HTML, so you let the DOM worry about manipulating itself (so to speak). I'll demonstrate with a simple example.

首先，我将用普通的js方法对DOM操作进行比较。传统上，我们认为HTML不是“做”任何事情，而是这样写的。因此，内联js，比如“onclick”等都是不好的做法，因为它们将“doing”放在HTML的上下文中，而不是“do”。角翻转了这个概念。当您编写视图时，您认为HTML能够“做”许多事情。这种能力被抽象成角化指令，但是如果它们已经存在，或者您已经编写了它们，您不必考虑“如何”完成它，您只需使用在这个“增强”HTML中提供的能力，角允许您使用它。这也意味着所有视图逻辑都包含在视图中，而不是javascript文件中。同样，其原因是可以将编写在javascript文件中的指令视为提高了HTML的能力，因此您可以让DOM操心如何操作自身(也就是说)。我将用一个简单的示例进行演示。

This is the markup we want to use. I gave it an intuitive name.

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

First, I'd just like to comment that if we've given our HTML this functionality via a custom Angular Directive, we're already done. That's a breath of fresh air. More on that in a moment.

首先，我想说的是，如果我们通过自定义角指令给HTML这个功能，我们已经完成了。那是一股清新的空气。稍后详细介绍。

Implementation with 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]'));

Implementation with 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)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

Pretty light, VERY clean and that's just a simple manipulation! In my opinion, the angular approach wins in all regards, especially how the functionality is abstracted away and the dom manipulation is declared in the DOM. The functionality is hooked onto the element via an html attribute, so there is no need to query the DOM via a selector, and we've got two nice closures - one closure for the directive factory where variables are shared across all usages of the directive, and one closure for each usage of the directive in the link function (or compile function).

非常轻，非常干净，这只是一个简单的操作!在我看来，角化方法在所有方面都是有利的，特别是如何抽象功能并在dom中声明dom操作。功能连接到通过一个html的元素属性,所以不需要查询DOM通过选择器,我们有两个不错的闭包——一个关闭的指令工厂共享变量在所有指令的用法,和一个为每个使用的指令关闭链接功能(或编译函数)。

Two-way data binding and directives for DOM manipulation are only the start of what makes Angular awesome. Angular promotes all code being modular, reusable, and easily testable and also includes a single-page app routing system. It is important to note that jQuery is a library of commonly needed convenience/cross-browser methods, but Angular is a full featured framework for creating single page apps. The angular script actually includes its own "lite" version of jQuery so that some of the most essential methods are available. Therefore, you could argue that using Angular IS using jQuery (lightly), but Angular provides much more "magic" to help you in the process of creating apps.

双向数据绑定和用于DOM操作的指令仅仅是使角极棒的开始。angle促进所有代码的模块化、可重用和易于测试，还包括一个单页应用程序路由系统。需要注意的是，jQuery是一种常用的方便/跨浏览器方法库，但angle是创建单页面应用程序的完整功能框架。这个角度脚本实际上包含了它自己的“精简版”jQuery，因此一些最基本的方法是可用的。因此，您可能会认为使用角化是使用jQuery(稍微)，但是角化提供了更多的“魔法”来帮助您创建应用程序。

This is a great post for more related information: How do I “think in AngularJS” if I have a jQuery background?

这是一个关于更多相关信息的好文章:如果我有jQuery背景，我如何“用AngularJS思考”?

General differences.

The above points are aimed at the OP's specific concerns. I'll also give an overview of the other important differences. I suggest doing additional reading about each topic as well.

以上几点是针对OP的具体关注点。我还将概述其他重要的区别。我建议对每个主题做额外的阅读。

Angular and jQuery can't reasonably be compared.

Angular is a framework, jQuery is a library. Frameworks have their place and libraries have their place. However, there is no question that a good framework has more power in writing an application than a library. That's exactly the point of a framework. You're welcome to write your code in plain JS, or you can add in a library of common functions, or you can add a framework to drastically reduce the code you need to accomplish most things. Therefore, a more appropriate question is:

角度是框架，jQuery是库。框架有它们的位置，库有它们的位置。然而，毫无疑问，一个好的框架在编写应用程序时比库更有力量。这正是框架的意义所在。欢迎您使用普通的JS编写代码，或者您可以添加一个公共函数库，或者您可以添加一个框架来大幅减少您完成大多数事情所需的代码。因此，更恰当的问题是:

Why use a framework?

Good frameworks can help architect your code so that it is modular (therefore reusable), DRY, readable, performant and secure. jQuery is not a framework, so it doesn't help in these regards. We've all seen the typical walls of jQuery spaghetti code. This isn't jQuery's fault - it's the fault of developers that don't know how to architect code. However, if the devs did know how to architect code, they would end up writing some kind of minimal "framework" to provide the foundation (achitecture, etc) I discussed a moment ago, or they would add something in. For example, you might add RequireJS to act as part of your framework for writing good code.

好的框架可以帮助构建代码，使其模块化(因此可重用)、干燥、可读、高性能和安全。jQuery不是一个框架，所以在这些方面没有帮助。我们都见过典型的jQuery意大利面代码墙。这不是jQuery的错——这是不知道如何构建代码的开发人员的错。然而，如果开发人员知道如何构建代码，他们最终将编写某种最小的“框架”来提供我刚才讨论过的基础(假定，等等)，否则他们将添加一些东西。例如，您可以添加RequireJS作为编写好代码的框架的一部分。

Here are some things that modern frameworks are providing:

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

• Templating
• 模板
• Data-binding
• 数据绑定
• routing (single page app)
• 路由(单页面应用程序)
• clean, modular, reusable architecture
• 干净的、模块化的、可重用的架构
• security
• 安全
• additional functions/features for convenience
• 额外的功能/特性方便

Before I further discuss Angular, I'd like to point out that Angular isn't the only one of its kind. Durandal, for example, is a framework built on top of jQuery, Knockout, and RequireJS. Again, jQuery cannot, by itself, provide what Knockout, RequireJS, and the whole framework built on top them can. It's just not comparable.

在我进一步讨论角之前，我想指出角不是唯一的角。例如，Durandal是一个构建在jQuery、Knockout和RequireJS之上的框架。同样，jQuery本身不能提供Knockout、RequireJS以及构建在它们之上的整个框架。不具有可比性。

If you need to destroy a planet and you have a Death Star, use the Death star.

如果你需要毁灭一颗行星，你有一颗死星，那就用死星吧。

Angular (revisited).

Building on my previous points about what frameworks provide, I'd like to commend the way that Angular provides them and try to clarify why this is matter of factually superior to jQuery alone.

基于我之前关于框架提供什么内容的观点，我想推荐角线提供框架的方式，并试图阐明为什么这实际上比jQuery更优越。

DOM reference.

In my above example, it is just absolutely unavoidable that jQuery has to hook onto the DOM in order to provide functionality. That means that the view (html) is concerned about functionality (because it is labeled with some kind of identifier - like "image slider") and JavaScript is concerned about providing that functionality. Angular eliminates that concept via abstraction. Properly written code with Angular means that the view is able to declare its own behavior. If I want to display a clock:

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

<clock></clock>

Done.

完成了。

Yes, we need to go to JavaScript to make that mean something, but we're doing this in the opposite way of the jQuery approach. Our Angular directive (which is in it's own little world) has "augumented" the html and the html hooks the functionality into itself.

是的，我们需要使用JavaScript来实现这一点，但是我们使用的是与jQuery相反的方法。我们的角指令(在它自己的小世界里)已经“增强”了html和html将功能关联到自身。

MVW Architecure / Modules / Dependency Injection

Angular gives you a straightforward way to structure your code. View things belong in the view (html), augmented view functionality belongs in directives, other logic (like ajax calls) and functions belong in services, and the connection of services and logic to the view belongs in controllers. There are some other angular components as well that help deal with configuration and modification of services, etc. Any functionality you create is automatically available anywhere you need it via the Injector subsystem which takes care of Dependency Injection throughout the application. When writing an application (module), I break it up into other reusable modules, each with their own reusable components, and then include them in the bigger project. Once you solve a problem with Angular, you've automatically solved it in a way that is useful and structured for reuse in the future and easily included in the next project. A HUGE bonus to all of this is that your code will be much easier to test.

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

It isn't easy to make things "work" in Angular.

THANK GOODNESS. The aforementioned jQuery spaghetti code resulted from a dev that made something "work" and then moved on. You can write bad Angular code, but it's much more difficult to do so, because Angular will fight you about it. This means that you have to take advantage (at least somewhat) to the clean architecture it provides. In other words, it's harder to write bad code with Angular, but more convenient to write clean code.

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

Angular is far from perfect. The web development world is always growing and changing and there are new and better ways being put forth to solve problems. Facebook's React and Flux, for example, have some great advantages over Angular, but come with their own drawbacks. Nothing's perfect, but Angular has been and is still awesome for now. Just as jQuery once helped the web world move forward, so has Angular, and so will many to come.

角度远非完美。web开发世界一直在不断发展和变化，有新的更好的方法被提出来解决问题。例如，Facebook的反应和变化无常，比棱角分明有一些巨大的优势，但也有它们自己的缺点。没有什么是完美的，但角度一直是，现在仍然是可怕的。就像jQuery曾经帮助web世界向前发展一样，它也有棱角，未来也会有很多。