AngularJS有什么比jQuery更好的功能? [英] What does AngularJS do better than jQuery?
问题描述
我主要使用jQuery库，并且刚开始使用AngularJS.我已经阅读了一些有关如何使用Angular的教程，但是我不清楚为什么使用它，何时使用它，或者与仅使用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.
在我看来，Angular使您想到MVC，这也许意味着您将网页视为模板+数据组合.只要感到有动态数据，就使用{{data bindings}}.然后，Angular将为您提供一个$ scope处理程序，您可以静态地填充它，也可以通过对Web服务器的调用来填充它.这看起来与JSP设计网页的方式在特征上相似.我需要Angular吗?
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?
对于简单的DOM操作(不)不涉及数据操作(例如:鼠标悬停时的颜色更改，单击时隐藏/显示元素)，jQuery或普通JS就足够且更干净.假设angular的 mvc 中的 model 是能在页面上反映数据的任何东西，因此，颜色，显示/隐藏，等等更改不会影响模型.在DOM操作方面，Angular是否比jQuery或Vanilla JS有任何优势?
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?
与jQuery可以与插件一起做的事情相比，Angular可以做什么使它对开发有用?
What can Angular do that makes it useful for development in comparison to what jQuery can do along with plugins?
推荐答案
数据绑定
您四处浏览网页，继续输入{{ 绑定}}，只要您感觉会有动态数据.角将 然后为您提供一个$ scope处理程序，您可以填充该处理程序(静态 或通过调用网络服务器).
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).
这是对数据绑定的很好的理解.我想你已经明白了.
This is a good understanding of data-binding. I think you've got that down.
对于不涉及数据操作的简单DOM操作 (例如:鼠标悬停时颜色发生变化，点击时隐藏/显示元素)， jQuery或老式js足够且更干净.假设 angular的mvc中的模型可以反映页面上的数据， 因此，css属性(如颜色，显示/隐藏等)不会发生变化 影响模型.
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如何看待其视图.
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.
我将首先比较Angular方式与普通js方法进行DOM操作.传统上，我们认为HTML并不是做任何事情"，而是这样写.因此，内联js(例如"onclick"等)是不好的做法，因为它们将正在执行"放入HTML的上下文中，而不是执行". Angular颠倒了这个概念.在编写视图时，您认为HTML能够完成"许多事情.此功能已在角度指令中抽象化，但是如果它们已经存在或您已经编写了它们，则不必考虑如何"完成，只需使用此增强" HTML中提供给您的功能即可角度允许您使用.这也意味着您所有的视图逻辑都真正包含在视图中，而不是在JavaScript文件中.再次，其理由是，可以将您的javascript文件中编写的指令视为可以提高HTML的功能，因此您可以让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.
<div rotate-on-click="45"></div>
首先，我想评论一下，如果我们已经通过自定义Angular指令为HTML提供了此功能，那么我们已经完成了.那是新鲜的空气.稍后再详细介绍.
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.
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)'
});
});
}
};
});
非常轻巧，非常干净，这只是一个简单的操作！在我看来，有角度的方法在所有方面都具有优势，尤其是如何抽象化功能并在DOM中声明dom操作.该功能通过html属性连接到元素上，因此不需要通过选择器查询DOM，并且我们有两个不错的闭包-一个针对指令工厂的闭包，其中指令的所有用法之间共享变量，并在link函数(或compile函数)中每次使用该指令时都关闭一个.
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操作的指令仅仅是使Angular很棒的开始. Angular提倡所有代码都是模块化，可重用和易于测试的，并且还包括一个单页面的应用程序路由系统.需要特别注意的是，jQuery是常用的便捷/跨浏览器方法的库，而Angular是用于创建单页应用程序的功能全面的 framework .角度脚本实际上包括其自己的精简"版本的jQuery，以便可以使用一些最基本的方法.因此，您可能会争辩说(轻微地)使用jQuery使用Angular IS，但是Angular提供了更多的魔术"来帮助您创建应用程序.
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.
这是一篇很棒的文章，提供了更多相关信息: 如果我有jQuery背景，如何思考AngularJS" ?
This is a great post for more related information: How do I "think in AngularJS" if I have a jQuery background?
以上几点针对的是OP的特定问题.我还将概述其他重要差异.我建议对每个主题也进行阅读.
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.
Angular是一个框架，jQuery是一个库.框架在其中，图书馆在其中.但是，毫无疑问，一个好的框架在编写应用程序方面比库具有更强大的功能.这正是框架的重点.欢迎使用普通的JS编写代码，或者可以添加通用功能的库，也可以添加框架以大幅度减少完成大多数任务所需的代码.因此，一个更合适的问题是:
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:
好的框架可以帮助您构建代码，使其模块化(因此可重用)，DRY，可读，高效且安全. jQuery不是框架，因此在这些方面都无济于事.我们都已经看到了jQuery意大利面条代码的典型墙.这不是jQuery的错-这是不知道如何构造代码的开发人员的错.但是，如果开发人员确实知道如何构造代码，那么他们最终会写某种最小的框架"来提供我刚才讨论的基础(架构等)，或者他们会添加一些东西.例如，您可能会添加RequireJS作为编写良好代码的框架的一部分.
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.
以下是现代框架提供的一些内容:
Here are some things that modern frameworks are providing:
- 模板化
- 数据绑定
- 路由(单页应用)
- 干净，模块化，可重用的体系结构
- 安全性
- 为方便起见的其他功能/功能
在我进一步讨论Angular之前，我想指出Angular并不是唯一的一种.例如，Durandal是一个基于jQuery，Knockout和RequireJS构建的框架.同样，jQuery本身不能提供Knockout，RequireJS和基于它们构建的整个框架.这只是不可比的.
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.
如果您需要摧毁一颗行星并且有一颗死亡之星，请使用死亡之星.
在我之前关于框架提供的观点的基础上，我想赞扬Angular提供框架的方式，并尝试阐明为什么这实际上仅比jQuery优越.
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才能提供功能.这意味着视图(html)与功能有关(因为它被标记有某种标识符，例如图像滑块")，而JavaScript与提供该功能有关. Angular通过抽象消除了该概念.用Angular正确编写代码意味着该视图能够声明其自身的行为.如果要显示时钟:
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:
<clock></clock>
完成.
是的，我们需要使用JavaScript使其具有某种含义，但是我们采用的是与jQuery方法相反的方式.我们的Angular指令(在它自己的小世界中)已经增强"了html，并且html将功能钩到了自身中.
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.
Angular提供了一种直接的方式来构造代码.视图事物属于视图(html)，增强视图功能属于指令，其他逻辑(如ajax调用)和功能属于服务，而服务和逻辑到视图的连接属于控制器.还有其他一些角度组件也可以帮助处理服务的配置和修改等.您创建的任何功能都可以通过Injector子系统自动在任何需要的地方使用，该子系统负责整个应用程序中的依赖注入.在编写应用程序(模块)时，我将其分解为其他可重用模块，每个模块都有自己的可重用组件，然后将它们包含在更大的项目中.解决Angular的问题后，您将以一种有用的结构化方式自动解决该问题，以便将来重用，并且可以轻松地包含在下一个项目中.所有这些的巨大好处是您的代码将更易于测试.
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.
谢谢您.前面提到的jQuery Spaghetti代码来自开发人员，该开发人员使工作"生效，然后继续进行.您可以编写不良的Angular代码，但这要困难得多，因为Angular会为此而奋斗.这意味着您必须(至少在某种程度上)利用其提供的干净架构.换句话说，用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.
Angular远非完美. Web开发世界一直在增长和变化，并且提出了解决问题的新的更好的方法.例如，Facebook的React和Flux具有比Angular更好的优势，但也有其自身的缺点.没有什么是完美的，但是Angular过去一直而且现在仍然很棒.就像jQuery曾经帮助网络世界向前发展一样，Angular也是如此，并且还会有很多人出现.
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.
这篇关于AngularJS有什么比jQuery更好的功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
