Data-Binding
你到处制作你的网页，不断地把{{{数据
这是对数据绑定的一个很好的理解.我想你已经记下来了.
DOM Manipulation
用于不涉及数据操作的简单DOM操作
(例如:鼠标悬停时 colored颜色 更改，单击时隐藏/显示元素)，
jQuery或老式的js就足够了，而且更干净.这假设
ANGLE的MVC中的模型是反映页面上数据的任何东西，
因此，CSS属性(如 colored颜色 、显示/隐藏等)不会更改
影响模型.
我可以理解您的观点，即"简单的"DOM操作更干净，但很少，而且必须是真正的"简单".我认为DOM操作是一个领域，就像数据绑定一样，Angular 是真正闪耀的领域.了解这一点还将帮助您了解Angular 是如何考虑其视图的.
我将从比较Angular 方法和普通的js方法来处理DOM开始.传统上，我们认为HTML没有"做"任何事情，并将其编写为"不做"任何事情.因此，像"onclick"这样的内联js是不好的做法，因为它们将"do"放在HTML的上下文中，而HTML不是"do".ANGLE颠覆了这个概念.在编写视图时，您认为HTML可以"做"很多事情.这种功能在ANGLE指令中被抽象出来，但是如果它们已经存在或者您已经编写了它们，那么您不必考虑"如何"完成它，您只需使用ANGLE允许您使用的这个"增强的"HTML中提供给您的功能.这也意味着您的所有视图逻辑都真正包含在视图中，而不是javascript文件中.同样，理由是可以认为在javascript文件中编写的指令增加了HTML的功能，所以让DOM操控自己(可以这么说).我将用一个简单的例子来演示.
这是我们想要使用的标记.我给它起了个直观的名字.
<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.
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!在我看来，Angular 方法在所有方面都是成功的，尤其是如何将功能抽象出来，以及如何在dom中声明dom操作.该功能通过一个html属性连接到元素上，因此不需要通过 Select 器查询DOM，我们有两个很好的闭包——一个用于指令工厂的闭包，其中变量在指令的所有用法中共享，另一个用于link函数(或compile函数)中指令的每个用法.
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.
这是一篇关于更多相关信息的好帖子:100
General differences.
以上几点是针对OP的具体关注点.我还将概述其他重要的区别.我建议你也多读一些关于每一个话题的书.
ANGLE和jQuery不能合理地进行比较.
ANGLE是一个框架，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.
以下是现代框架提供的一些功能:
- 模板
- Data-binding
- 路由(单页APP)
- clean, modular, reusable architecture
- 安全
- 方便起见的附加功能/特性
在我进一步讨论Angular 之前，我想指出Angular 并不是唯一的Angular .例如，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 (重访).
在我前面关于框架提供什么的观点的基础上，我想推荐这种Angular 提供它们的方式，并试图澄清为什么这在事实上要优于单独的jQuery.
DOM reference.
在我上面的示例中，jQuery必须挂钩到DOM才能提供功能，这是绝对不可避免的.这意味着视图(Html)关注的是功能(因为它被贴上了某种类似标识符的"图像滑块"的标签)，而JavaScript关注的是提供该功能.Angular 通过抽象消除了这个概念.正确编写的带有Angular 的代码意味着视图能够声明自己的行为.如果我想显示时钟:
<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.
MVW架构/模块/依赖项注入
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.
要让事物以一定的Angular "运转"并不容易.
谢天谢地.前面提到的jQuery意大利面代码源于一位开发人员，他让一些东西"工作"了，然后继续前进.您可以编写糟糕的Angular 代码，但要做到这一点要困难得多，因为Angular 会为此与您争论不休.这意味着您必须(至少在一定程度上)利用它提供的干净架构.换句话说，使用Angular 编写糟糕的代码会更困难，但编写干净的代码会更方便.
Angular 远不是完美的.Web开发世界总是在不断发展和变化，并且不断有新的、更好的方法被提出来解决问题.例如，Facebook的Reaction和Flux与ANGLE相比有一些很大的优势，但也有自己的缺点.没有什么是十全十美的，但Angular 一直是，现在仍然是令人敬畏的.就像jQuery曾经帮助网络世界向前发展一样，Angular 也是如此，future 也会有更多的人这样做.