假设我熟悉开发客户端应用程序 jQuery的，但现在我想开始使用 AngularJS。你能描述一下必要的范式转变吗？以下是一些可能有助于您确定答案的问题：
- 如何以不同方式构建和设计客户端Web应用程序？最大的区别是什么？
- 我应该停止做什么/使用什么;我应该开始做什么/使用什么呢？
- 有任何服务器端考虑因素/限制吗？
我不是在寻找之间的详细比较 jQuery 和 AngularJS。
假设我熟悉开发客户端应用程序 jQuery的，但现在我想开始使用 AngularJS。你能描述一下必要的范式转变吗？以下是一些可能有助于您确定答案的问题：
我不是在寻找之间的详细比较 jQuery 和 AngularJS。
在jQuery中，您设计了一个页面，然后将其设置为动态。这是因为jQuery是为增强而设计的，并且从这个简单的前提中获得了令人难以置信的增长。
但是在AngularJS中，您必须从头开始考虑您的架构。而不是首先考虑“我有这块DOM，我想让它做X”，你必须从你想要完成的事情开始，然后去设计你的应用程序，然后最后去设计你的视图。
同样，不要从jQuery做X，Y和Z的想法开始，所以我只是在模型和控制器的基础上添加AngularJS。这是 真 当你刚刚开始时很诱人，这就是为什么我总是建议新的AngularJS开发人员根本不使用jQuery，至少在他们习惯于“Angular Way”做事之前。
我在这里和邮件列表上看到很多开发人员使用150或200行代码的jQuery插件创建这些精心设计的解决方案，然后他们将这些代码粘合到AngularJS中并收集回调和 $apply令人困惑和错综复杂的;但他们最终让它发挥作用！问题在于 最 jQuery插件可以在一小部分代码中重写在AngularJS中的情况，突然之间一切都变得易于理解和直截了当。
最重要的是：在解决问题时，首先要“在AngularJS中思考”;如果你想不出解决方案，请问社区;如果完全没有简单的解决方案， 然后 随时可以使用jQuery。但是不要让jQuery成为拐杖或者你永远不会掌握AngularJS。
首先要知道 单页面应用程序 是 应用。他们是 不 网页。所以我们需要像服务器端开发人员一样思考 此外 像客户端开发人员一样思考。我们必须考虑如何将我们的应用程序划分为单独的，可扩展的，可测试的组件。
那么 怎么样 你那样做吗？你如何“在AngularJS中思考”？以下是一些与jQuery形成对比的一般原则。
在jQuery中，我们以编程方式更改视图。我们可以将下拉菜单定义为 ul 像这样：
<ul class="main-menu">
<li class="active">
<a href="#/home">Home</a>
</li>
<li>
<a href="#/menu1">Menu 1</a>
<ul>
<li><a href="#/sm1">Submenu 1</a></li>
<li><a href="#/sm2">Submenu 2</a></li>
<li><a href="#/sm3">Submenu 3</a></li>
</ul>
</li>
<li>
<a href="#/home">Menu 2</a>
</li>
</ul>
在jQuery中，在我们的应用程序逻辑中，我们将使用以下内容激活它：
$('.main-menu').dropdownMenu();
当我们只看这个视图时，并不是很明显这里有任何功能。对于小型应用，这很好。但对于非平凡的应用程序，事情很快就会变得混乱和难以维护。
但是，在AngularJS中，视图是基于视图的功能的官方记录。我们的 ul 声明看起来像这样：
<ul class="main-menu" dropdown-menu>
...
</ul>
这两个做同样的事情，但在AngularJS版本中，任何看模板的人都知道应该发生什么。每当开发团队的新成员加入时，她都可以看到这一点 知道 有一个叫做的指令 dropdownMenu 在它上面运作;她不需要直截了当地回答正确的答案或筛选任何代码。该观点告诉我们应该发生什么。更清洁。
AngularJS的新手开发人员经常会问一个问题：如何查找特定类型的所有链接并在其上添加指令。当我们回复时，开发人员总是大吃一惊：你没有。但你不这样做的原因是这就像是半jQuery，半AngularJS，并没有好处。这里的问题是开发人员试图在AngularJS的上下文中“执行jQuery”。那永远不会好起来的。风景 是 官方记录。在指令之外（以下更多内容），你永远不会， 决不 改变DOM。并且适用指令 在视图中，所以意图很清楚。
记住：不要设计，然后标记。你必须设计，然后设计。
这是迄今为止AngularJS最强大的功能之一，并且我在上一节中提到了很多需要进行各种DOM操作。 AngularJS会自动更新您的视图，所以您不必！在jQuery中，我们响应事件然后更新内容。就像是：
$.ajax({
url: '/myEndpoint.json',
success: function ( data, status ) {
$('ul#log').append('<li>Data Received!</li>');
}
});
对于看起来像这样的视图：
<ul class="messages" id="log">
</ul>
除了混合问题，我们也有同样的问题，表明我之前提到的意图。但更重要的是，我们必须手动引用和更新DOM节点。如果我们想要删除日志条目，我们也必须针对DOM进行编码。我们如何测试除DOM之外的逻辑？如果我们想改变演示文稿怎么办？
这有点凌乱，有点脆弱。但是在AngularJS中，我们可以这样做：
$http( '/myEndpoint.json' ).then( function ( response ) {
$scope.log.push( { msg: 'Data Received!' } );
});
我们的观点可能如下所示：
<ul class="messages">
<li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>
但就此而言，我们的观点可能如下所示：
<div class="messages">
<div class="alert" ng-repeat="entry in log">
{{ entry.msg }}
</div>
</div>
而现在我们使用的是Bootstrap警报框，而不是使用无序列表。我们永远不必更改控制器代码！但更重要的是，无论如何 哪里 要么 怎么样 日志更新后，视图也会发生变化。自动。整齐！
虽然我没有在这里显示，但数据绑定是双向的。所以这些日志消息也可以在视图中编辑，只需这样做： <input ng-model="entry.msg" />。有很多的欣喜。
在jQuery中，DOM有点像模型。但是在AngularJS中，我们有一个单独的模型层，我们可以以任何方式管理，完全独立于视图。这有助于上述数据绑定，维护 关注点分离，并引入了更大的可测试性。其他答案提到了这一点，所以我就把它留在那里。
以上所有内容都与这个主题相关：将您的担忧分开。你的观点作为应该发生的事情的官方记录（大部分）;你的模型代表你的数据;你有一个服务层来执行可重用的任务;你做DOM操作并用指令扩充你的视图;然后将它们与控制器粘合在一起。在其他答案中也提到了这一点，我将添加的唯一内容涉及可测试性，我将在下面的另一部分中讨论。
帮助我们分离关注点是 依赖注入 （DI）。如果你来自服务器端语言（来自 Java的 至 PHP你可能已经熟悉了这个概念，但如果你是一个来自jQuery的客户端人，这个概念可能看起来从愚蠢到多余到时髦。但事实并非如此。 :-)
从广义的角度来看，DI意味着您可以非常自由地声明组件，然后从任何其他组件声明组件，只需要询问它的实例，它就会被授予。您无需了解加载顺序，文件位置或类似内容。电源可能不会立即可见，但我只提供一个（常见）示例：测试。
让我们说在我们的应用程序中，我们需要一个通过a实现服务器端存储的服务 休息 API，以及根据应用程序状态，本地存储。在我们的控制器上运行测试时，我们不希望与服务器通信 - 我们正在测试 调节器， 毕竟。我们可以添加一个与原始组件同名的模拟服务，注入器将确保我们的控制器自动获取假的 - 我们的控制器不会，也不需要知道差异。
说到测试......
这实际上是关于体系结构的第3部分的一部分，但它非常重要，我将它作为自己的顶级部分。
在您看过，使用过或编写的所有jQuery插件中，有多少有一个附带的测试套件？不是很多，因为jQuery不太适合。但AngularJS是。
在jQuery中，唯一的测试方法通常是使用示例/演示页面独立创建组件，我们的测试可以对其执行DOM操作。那么我们必须单独开发一个组件 然后 将它集成到我们的应用程序多么不方便！很多时候，在使用jQuery开发时，我们选择迭代而不是测试驱动开发。谁可以怪我们？
但是因为我们有关注点分离，我们可以在AngularJS中迭代地进行测试驱动开发！例如，假设我们想要一个超级简单的指令在我们的菜单中指出我们当前的路线是什么。我们可以在应用程序视图中声明我们想要的内容：
<a href="/hello" when-active>Hello</a>
好的，现在我们可以为不存在的人编写测试 when-active 指示：
it( 'should add "active" when the route changes', inject(function() {
var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );
$location.path('/not-matching');
expect( elm.hasClass('active') ).toBeFalsey();
$location.path( '/hello' );
expect( elm.hasClass('active') ).toBeTruthy();
}));
当我们运行测试时，我们可以确认它失败了。只有现在我们才能创建我们的指令：
.directive( 'whenActive', function ( $location ) {
return {
scope: true,
link: function ( scope, element, attrs ) {
scope.$on( '$routeChangeSuccess', function () {
if ( $location.path() == element.attr( 'href' ) ) {
element.addClass( 'active' );
}
else {
element.removeClass( 'active' );
}
});
}
};
});
我们的测试现在通过 和 我们的菜单按要求执行。我们的发展是 都 迭代 和 测试驱动。妖兽爽。
您经常会听到“只在指令中执行DOM操作”。 这是必要的。 善意对待它！
但是让我们深入一点......
一些指令只是装饰视图中的内容（想想 ngClass）因此有时直接进行DOM操作然后基本完成。但是如果一个指令就像一个“小部件”并且有一个模板，它应该 也 尊重关注点分离。也就是说，模板 太 应该在很大程度上独立于链接和控制器功能的实现。
AngularJS附带了一整套工具，可以轻松实现这一目标。同 ngClass 我们可以动态更新类; ngModel 允许双向数据绑定; ngShow 和 ngHide 以编程方式显示或隐藏元素;还有更多 - 包括我们自己写的那些。换句话说，我们可以做各种各样的精彩 无 DOM操作。 DOM操作越少，测试指令就越容易，它们的样式就越容易，将来它们就越容易改变，它们的可重用性和可分发性就越高。
我看到许多开发人员对AngularJS很新，使用指令作为抛出一堆jQuery的地方。换句话说，他们认为“因为我不能在控制器中进行DOM操作，所以我会把代码放在指令中”。虽然这确实好得多，但经常是这样 还是错的。
想想我们在第3节中编写的记录器。即使我们将其放在指令中，我们也是如此 仍然 想要做“Angular Way”。它 仍然 不采取任何DOM操作！很多时候DOM操作是必要的，但它是一个 批量 比你想象的更罕见！在做DOM操作之前 随地 在您的应用程序中，问问自己是否真的需要。可能有更好的方法。
这是一个快速示例，显示了我最常见的模式。我们想要一个可切换的按钮。 （注意：这个例子有点人为，并且表示更复杂的情况，以完全相同的方式解决。）
.directive( 'myDirective', function () {
return {
template: '<a class="btn">Toggle me!</a>',
link: function ( scope, element, attrs ) {
var on = false;
$(element).click( function () {
on = !on;
$(element).toggleClass('active', on);
});
}
};
});
这有一些问题：
angular.element 当放入没有jQuery的项目时，我们的组件仍然可以工作。angular.element）会 总是 如果加载了jQuery！所以我们不需要使用 $ - 我们可以使用 angular.element。$ - element 那传递给了 link 功能会 已经是 一个jQuery元素！ 这个指令可以重写（即使对于非常复杂的情况！）更简单如下：
.directive( 'myDirective', function () {
return {
scope: true,
template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
link: function ( scope, element, attrs ) {
scope.on = false;
scope.toggle = function () {
scope.on = !scope.on;
};
}
};
});
同样，模板内容在模板中，因此您（或您的用户）可以轻松地将其换出以满足任何必要的样式，并且 逻辑 从来没有被触动过。可重用性 - 热潮！
还有所有其他好处，比如测试 - 这很容易！无论模板中有什么内容，指令的内部API都不会被触及，因此重构很容易。您可以根据需要更改模板，而无需触及指令。无论你改变什么，你的测试仍然通过。
w00t！
因此，如果指令不仅仅是类jQuery函数的集合，它们是什么？指令实际上是 HTML的扩展。如果HTML不需要它做某事，你可以编写一个指令来为你做，然后就像使用它一样使用它。
换句话说，如果AngularJS没有开箱即用，想想团队如何完成它以适应 ngClick， ngClass，等。
甚至不使用jQuery。甚至不包括它。它会阻止你。当你遇到一个问题，你认为你已经知道如何在jQuery中解决，在你达到之前 $，试着考虑如何在AngularJS范围内做到这一点。如果你不知道，请问！ 20次中有19次，最好的方法是不需要jQuery并尝试使用jQuery解决它，为您提供更多的工作。
在jQuery中， 选择 习惯了 DOM 元素然后将事件处理程序绑定/注册到它们。当事件触发时，执行（命令性）代码以更新/更改DOM。
在AngularJS中，您要考虑一下 意见 而不是DOM元素。视图是包含AngularJS的（声明性）HTML 指令。指令为我们幕后设置了事件处理程序，并为我们提供了动态数据绑定。选择器很少使用，因此对ID（以及某些类型的类）的需求大大减少。意见与之相关 楷模 （通过范围）。视图是模型的投影。事件更改模型（即数据，范围属性）以及投影这些模型的视图会“自动”更新。
在AngularJS中，考虑模型，而不是jQuery选择的DOM元素来保存您的数据。将视图视为这些模型的投影，而不是注册回调来操纵用户看到的内容。
jQuery使用 不引人注目的JavaScript - 行为（JavaScript）与结构（HTML）分离。
AngularJS使用 控制器 和指令（每个都可以有自己的控制器，和/或编译和链接函数）从视图/结构（HTML）中删除行为。 Angular也有 服务 和 过滤器 帮助分离/组织您的应用程序。
也可以看看 https://stackoverflow.com/a/14346528/215945
设计AngularJS应用程序的一种方法：
你可以在不知道JavaScript原型继承如何工作的情况下使用jQuery做很多事情。在开发AngularJS应用程序时，如果您对JavaScript继承有很好的理解，就可以避免一些常见的陷阱。推荐阅读： AngularJS中范围原型/原型继承的细微差别是什么？
AngularJS和jQuery采用了截然不同的意识形态。如果您来自jQuery，您可能会发现一些令人惊讶的差异。 Angular可能会让你生气。
这很正常，你应该坚持下去。 Angular值得。
jQuery为您提供了一个工具包，用于选择DOM的任意位并对其进行临时更改。你几乎可以做任何你喜欢的事情。
相反，AngularJS会给你一个 编译器。
这意味着AngularJS从上到下读取您的整个DOM并将其视为代码，就像编译器的指令一样。当它遍历DOM时，它寻找特定的 指令 （编译器指令）告诉AngularJS编译器如何表现和做什么。指令是充满JavaScript的小对象，可以匹配属性，标签，类甚至注释。
当Angular编译器确定DOM的一部分与特定指令匹配时，它调用指令函数，向其传递DOM元素，任何属性，当前$ scope（本地变量存储）以及一些其他有用位。这些属性可能包含可由指令解释的表达式，它告诉它如何渲染，以及何时应重绘自身。
然后，指令可以引入额外的Angular组件，例如控制器，服务等。编译器底部出现的是一个完整形成的Web应用程序，已连线并准备就绪。
这意味着Angular是模板驱动的。您的模板驱动JavaScript，而不是相反。这是角色的彻底颠倒，与我们过去10年左右写的不引人注目的JavaScript完全相反。这可能需要一些时间来适应。
如果这听起来像是过度规范和限制，那么事实就没有什么可以了。因为AngularJS将您的HTML视为代码，所以您得到了 Web应用程序中的HTML级别粒度。一切皆有可能，一旦你做出一些概念上的飞跃，大多数事情都会非常容易。
让我们深入了解细节。
Angular和jQuery做了不同的事情。 AngularJS为您提供了一组用于生成Web应用程序的工具。 jQuery主要为您提供修改DOM的工具。如果您的页面上存在jQuery，AngularJS将自动使用它。如果不是，AngularJS附带jQuery Lite，这是一个减少但仍然完美可用的jQuery版本。
Misko喜欢jQuery并且不反对你使用它。但是，随着您的进步，您会发现使用范围，模板和指令的组合可以完成所有工作，并且您应该尽可能地选择此工作流程，因为您的代码将更加离散，更易于配置，以及更多角。
如果你确实使用jQuery，你不应该把它洒到这个地方。 AngularJS中DOM操作的正确位置是在一个指令中。稍后会详细介绍。
jQuery通常不引人注意地应用。您的JavaScript代码链接在标题（或页脚）中，这是它唯一提到的地方。我们使用选择器来挑选页面的位并编写插件来修改这些部分。
JavaScript处于控制之中。 HTML具有完全独立的存在。即使没有JavaScript，您的HTML仍然是语义。 Onclick属性是非常糟糕的做法。
您将注意到关于AngularJS的第一件事就是 自定义属性无处不在。您的HTML将充满ng属性，这些属性基本上是类固醇上的onClick属性。这些是指令（编译器指令），并且是模板挂钩到模型的主要方式之一。
当你第一次看到这个时，你很可能会把AngularJS写成老式的侵入式JavaScript（就像我之前做的那样）。事实上，AngularJS不遵守这些规则。在AngularJS中，您的HTML5是一个模板。它由AngularJS编译以生成您的网页。
这是第一个很大的区别。对于jQuery，您的网页是一个要操纵的DOM。对于AngularJS，您的HTML是要编译的代码。 AngularJS会读入您的整个网页，并使用其内置编译器将其编译成新的网页。
你的模板应该是声明性的;通过阅读它的含义应该很清楚。我们使用有意义名称的自定义属性。我们再次使用有意义的名称组成新的HTML元素。具有最少HTML知识且无编码技能的设计人员可以阅读您的AngularJS模板并了解它的作用。他或她可以进行修改。 这是Angular的方式。
在开始使用AngularJS并运行教程时，我问自己的第一个问题是 “我的代码在哪里？”。我没有写过JavaScript，但我有这些行为。答案很明显。因为AngularJS编译DOM，所以AngularJS将您的HTML视为代码。对于许多简单的情况，只需编写一个模板就可以了，让AngularJS将它编译成一个应用程序。
您的模板可以驱动您的应用它被视为一个 DSL。您编写AngularJS组件，AngularJS将负责将它们拉入并根据模板结构在适当的时间提供它们。这与标准非常不同 MVC 模式，模板仅用于输出。
它更类似于 XSLT 比 Ruby on Rails 例如。
这是一种彻底的控制反转，需要一些人习惯。
停止尝试从JavaScript驱动您的应用程序。让模板驱动应用程序，让AngularJS负责将组件连接在一起。这也是Angular方式。
使用jQuery，您的HTML页面应包含具有语义意义的内容。如果JavaScript（由用户或搜索引擎）关闭，您的内容仍然可以访问。
因为AngularJS将您的HTML页面视为模板。模板不应该是语义的，因为您的内容通常存储在最终来自API的模型中。 AngularJS使用模型编译DOM以生成语义Web页面。
您的HTML源不再是语义，而是您的API和编译的DOM是语义的。
在AngularJS中，意思是生活在模型中，HTML只是一个模板，仅供显示。
此时你可能会遇到各种各样的问题 SEO 和可访问性，这是正确的。这里存在未解决的问题。大多数屏幕阅读器现在将解析JavaScript。搜索引擎也可以索引 AJAXed 内容。不过，您需要确保使用的是pushstate URL，并且您有一个不错的站点地图。请参阅此处以了解该问题： https://stackoverflow.com/a/23245379/687677
关注点分离 （SOC）是一种在多年的Web开发中长大的模式，其原因有多种，包括SEO，可访问性和浏览器不兼容性。它看起来像这样：
同样，AngularJS不遵守他们的规则。中风， AngularJS取消了十年的智慧 而是实现了一个MVC模式，其中模板不再是语义，甚至不是一点点。
它看起来像这样：
MVC和SOC不在相同比例的两端，它们位于完全不同的轴上。 SOC在AngularJS上下文中没有任何意义。你必须忘记它并继续前进。
如果像我一样，你经历过浏览器大战，你可能会觉得这个想法很冒犯。我保证，克服它，它是值得的。
插件扩展了jQuery。 AngularJS指令扩展了浏览器的功能。
在jQuery中，我们通过向jQuery.prototype添加函数来定义插件。然后我们通过选择元素并在结果上调用插件将它们挂钩到DOM中。我们的想法是扩展jQuery的功能。
例如，如果您想在页面上使用轮播，则可以定义无序的图表列表，可能包含在nav元素中。然后，您可以编写一些jQuery来选择页面上的列表，并将其重新设置为具有超时的库以执行滑动动画。
在AngularJS中，我们定义了指令。指令是一个返回JSON对象的函数。该对象告诉AngularJS要查找哪些DOM元素，以及要对它们进行哪些更改。使用您发明的属性或元素将指令挂钩到模板。我们的想法是使用新的属性和元素扩展HTML的功能。
AngularJS方法是扩展本机外观HTML的功能。 您应该编写看起来像HTML的HTML，并使用自定义属性和元素进行扩展。
如果你想要一个旋转木马，只需使用一个 <carousel /> 元素，然后定义一个指令来拉入模板，并使该吸盘工作。
jQuery的趋势是编写像灯箱这样的大插件，然后我们通过传递大量的值和选项来配置。
这是AngularJS中的一个错误。
以下拉列表为例。在编写下拉插件时，您可能会想要在单击处理程序中进行编码，也许是一个添加到V形图中的功能，可以是向上或向下，也许更改展开元素的类，显示隐藏菜单，所有有用的东西。
直到你想做一个小改动。
假设您有一个要悬停的菜单。那么现在我们有一个问题。我们的插件已连接到我们的点击处理程序，我们将需要添加一个配置选项，以使其在这种特定情况下的行为不同。
在AngularJS中，我们编写较小的指令。我们的下拉指令非常小。它可能保持折叠状态，并提供fold（），展开（）或toggle（）的方法。这些方法只会更新$ scope.menu.visible，它是一个保持状态的布尔值。
现在 在我们的模板中 我们可以把它连接起来：
<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
需要在mouseover上更新？
<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
该模板驱动应用程序，因此我们获得HTML级别的粒度。如果我们想要逐案例外，模板可以轻松实现。
JQuery插件是在闭包中创建的。在该关闭内保持隐私。您可以在该闭包内维护您的范围链。您只能真正访问由jQuery传入插件的DOM节点集，以及在闭包中定义的任何局部变量以及您定义的任何全局变量。这意味着插件是完全自包含的。这是一件好事，但在创建整个应用程序时会受到限制。尝试在动态页面的各个部分之间传递数据变成了一件苦差事。
AngularJS有$ scope对象。这些是由AngularJS创建和维护的特殊对象，您可以在其中存储模型。某些指令将生成一个新的$ scope，默认情况下，它使用JavaScript原型继承继承其包装$ scope。 $ scope对象可在控制器和视图中访问。
这是聪明的部分。因为$ scope继承的结构大致遵循DOM的结构，所以元素可以无缝地访问它们自己的范围，任何包含范围，一直到全局$ scope（与全局范围不同）。
这使得传递数据和在适当级别存储数据变得更加容易。如果下拉列表展开，则只有下拉列表$ scope需要了解它。如果用户更新其首选项，您可能希望更新全局$ scope，并且将自动提醒监听用户首选项的任何嵌套作用域。
这可能听起来很复杂，事实上，一旦你放松它，就像飞行一样。您不需要创建$ scope对象，AngularJS会根据您的模板层次结构正确且适当地为您实例化和配置它。然后，AngularJS使用依赖注入的魔力使其可用于您的组件（稍后将详细介绍）。
在jQuery中，您可以手动完成所有DOM更改。您以编程方式构造新的DOM元素。如果您有一个JSON数组并且想要将它放到DOM中，则必须编写一个函数来生成HTML并插入它。
在AngularJS中，您也可以这样做，但我们鼓励您使用数据绑定。更改您的模型，并且因为DOM通过模板绑定到它，您的DOM将自动更新，无需干预。
因为数据绑定是从模板完成的，所以使用属性或大括号语法，这非常容易。与之相关的认知开销很小，所以你会发现自己一直在做这件事。
<input ng-model="user.name" />
将input元素绑定到 $scope.user.name。更新输入将更新当前范围中的值，反之亦然。
同样：
<p>
{{user.name}}
</p>
将在段落中输出用户名。这是一个实时绑定，所以如果 $scope.user.name 值已更新，模板也将更新。
在jQuery中进行Ajax调用相当简单，但它仍然可以考虑三次。这需要考虑增加的复杂性，以及需要维护的大量脚本。
在AngularJS中，Ajax是您的默认首选解决方案，它一直在发生，几乎没有您注意到。您可以包含ng-include模板。您可以使用最简单的自定义指令应用模板。您可以在服务中包装Ajax调用并创建自己的 GitHub上 服务，或者 Flickr的 服务，您可以轻松访问。
在jQuery中，如果我们想完成一个小的非dom相关任务，比如从API中提取一个feed，我们可能会在我们的闭包中写一个小函数来完成它。这是一个有效的解决方案，但如果我们想要经常访问该Feed，该怎么办？如果我们想在另一个应用程序中重用该代码怎么办？
AngularJS为我们提供服务对象。
服务是包含函数和数据的简单对象。他们总是单身，这意味着他们永远不会超过一个。假设我们想要访问Stack Overflow API，我们可能会写一个 StackOverflowService 它定义了这样做的方法。
假设我们有购物车。我们可以定义一个ShoppingCartService来维护我们的购物车，并包含添加和删除项目的方法。因为服务是单例，并且由所有其他组件共享，所以任何需要的对象都可以写入购物车并从中提取数据。它始终是相同的购物车。
服务对象是自包含的AngularJS组件，我们可以根据需要使用和重用它们。它们是包含函数和数据的简单JSON对象。它们总是单例，因此如果您将数据存储在一个地方的服务中，您可以通过请求相同的服务将数据传输到其他地方。
AngularJS为您管理您的依赖项。如果你想要一个对象，只需引用它，AngularJS就会为你得到它。
在你开始使用它之前，很难解释这是多么大的时间。在jQuery中没有像AngularJS DI那样的东西。
DI意味着您不是编写应用程序并将它们连接在一起，而是定义一个组件库，每个组件都由一个字符串标识。
假设我有一个名为'FlickrService'的组件，它定义了从Flickr中提取JSON提要的方法。现在，如果我想编写一个可以访问Flickr的控制器，我只需要在声明控制器时按名称引用'FlickrService'。 AngularJS将负责实例化组件并使其可供我的控制器使用。
例如，我在这里定义一个服务：
myApp.service('FlickrService', function() {
return {
getFeed: function() { // do something here }
}
});
现在，当我想使用该服务时，我只是按名称引用它：
myApp.controller('myController', ['FlickrService', function(FlickrService) {
FlickrService.getFeed()
}]);
AngularJS将认识到需要一个FlickrService对象来实例化控制器，并为我们提供一个。
这使得连接在一起非常容易，并且几乎消除了任何倾向于spagettification的趋势。我们有一个平面的组件列表，当我们需要时，AngularJS将它们逐个交给我们。
jQuery对如何组织代码几乎没有说明。 AngularJS有意见。
AngularJS为您提供了可以放置代码的模块。例如，如果您正在编写与Flickr对话的脚本，则可能需要创建一个Flickr模块来包装所有与Flickr相关的函数。模块可以包含其他模块（DI）。您的主应用程序通常是一个模块，这应该包括您的应用程序将依赖的所有其他模块。
您可以获得简单的代码重用，如果您想基于Flickr编写另一个应用程序，您可以只包含Flickr模块，您可以访问新应用程序中的所有Flickr相关功能。
模块包含AngularJS组件。 当我们包含一个模块时，该模块中的所有组件都可以作为由其唯一字符串标识的简单列表提供给我们。然后我们可以使用AngularJS的依赖注入机制将这些组件相互注入。
AngularJS和jQuery不是敌人。可以非常好地在AngularJS中使用jQuery。如果你正在使用AngularJS（模板，数据绑定，$范围，指令等），你会发现你需要一个 批量 jQuery比你可能需要的少。
要实现的主要是您的模板驱动您的应用程序。停止尝试编写可以完成所有操作的大插件。而是写一些做一件事的指令，然后编写一个简单的模板将它们连接在一起。
少考虑不引人注目的JavaScript，而是考虑HTML扩展。
我对AngularJS感到非常兴奋，我写了一本关于它的短篇小说，非常欢迎您在线阅读 http://nicholasjohnson.com/angular-book/。我希望它有用。
你能描述一下必要的范式转变吗？
势在必行与陈述
同 jQuery的 你一步一步告诉DOM需要发生什么。同 AngularJS 你描述了你想要的结果但不知道如何去做。更多关于此 这里。另外，请查看Mark Rajcok的答案。
如何以不同方式构建和设计客户端Web应用程序？
AngularJS是一个使用。的完整客户端框架 MVC 模式（看看他们的 图示）。它非常注重关注点的分离。
最大的区别是什么？我应该停止做什么/使用什么;我应该开始做什么/使用呢？
jQuery的是一个图书馆
AngularJS 是一个漂亮的客户端框架，高度可测试，结合了许多很酷的东西，如MVC， 依赖注入，数据绑定等等。
它着重于 关注点分离 和测试（单元测试 和端到端测试），这有助于测试驱动的开发。
最好的方法是开始 他们很棒的教程。你可以在几个小时内完成这些步骤;但是，如果你想掌握幕后的概念，它们包含了无数的参考资料以供进一步阅读。
有任何服务器端考虑因素/限制吗？
您可以在已经使用纯jQuery的现有应用程序上使用它。但是，如果要充分利用AngularJS功能，可以考虑使用a编码服务器端 REST风格 做法。
这样做可以让你利用他们的 资源工厂，它创建了服务器端RESTful的抽象 API 并使服务器端调用（获取，保存，删除等）非常容易。
为了描述“范式转换”，我认为一个简短的回答就足够了。
在 jQuery的，你通常使用 选择 找到元素，然后将它们连接起来：
$('#id .class').click(doStuff);
在 AngularJS， 你用 指令 直接标记元素，将它们连接起来：
<a ng-click="doStuff()">
AngularJS不需要（或想要）使用选择器查找元素 - AngularJS之间的主要区别 jqLite 与全面爆发 jQuery的 就是它 jqLite不支持选择器。
所以当人们说“根本不包含jQuery”时，主要是因为他们不希望你使用选择器;他们希望你学习使用指令。直接，不选择！
jQuery制作了很长的JavaScript命令 getElementByHerpDerp 更短和跨浏览器。
AngularJS允许您创建自己的HTML标记/属性，这些标记/属性可以很好地处理动态Web应用程序（因为HTML是为静态页面设计的）。
说“我有一个jQuery背景我如何在AngularJS中思考？”就像说“我有一个HTML背景我如何在JavaScript中思考？”您提出问题的事实表明您很可能不理解这两种资源的基本目的。这就是为什么我选择通过简单地指出基本区别来回答问题，而不是通过列表说“AngularJS使用指令，而jQuery使用CSS选择器来创建一个jQuery对象来执行此操作等等......” 。这个问题不需要冗长的答案。
jQuery是一种使浏览器中的JavaScript编程更容易的方法。更短，跨浏览器的命令等
AngularJS扩展了HTML，所以你不必放 <div> 到处都是为了申请。它使HTML实际上适用于应用程序而不是它的设计目标，即静态的教育网页。它使用JavaScript以迂回的方式实现这一点，但从根本上说它是HTML的扩展，而不是JavaScript。
jQuery：你想了很多关于'QUERYing the DOM'对于DOM元素和做某事。
AngularJS：模型是事实，你总是从那个角度思考。
例如，当您从要在DOM中以某种格式显示的服务器获取数据时，在jQuery中，您需要'1。找到'你要在DOM中放置这些数据的位置，'2。通过创建新节点或仅设置它来更新/附加它 的innerHTML。然后，当您想要更新此视图时，您将'3。找到'位置'和'4。 UPDATE”。在AngularJS中，在从服务器获取和格式化数据的相同上下文中完成所有查找和更新循环。
使用AngularJS，您可以获得模型（已经习惯的JavaScript对象），模型的值会告诉您模型（显然）和视图，模型上的操作会自动传播到视图，所以你不要我必须考虑一下。你会发现自己在AngularJS中不再在DOM中找到东西。
换句话说，在jQuery中，你需要考虑CSS选择器，也就是说，在哪里 div 要么 td 有一个类或属性等，以便我可以得到他们的HTML或颜色或值，但在AngularJS中，你会发现自己这样想：我在处理什么模型，我会将模型的值设置为true。您不必担心反映此值的视图是复选框还是驻留在 td 元素（在jQuery中经常需要考虑的细节）。
在AngularJS中使用DOM操作，您会发现自己添加了指令和过滤器，您可以将其视为有效的HTML扩展。
你将在AngularJS中体验到的另一件事：在jQuery中你调用jQuery函数很多，在AngularJS中，AngularJS会调用你的函数，所以AngularJS会“告诉你如何做事”，但是它的好处是值得的，所以学习AngularJS通常意味着学习AngularJS想要的东西或者AngularJS要求你展示你的功能的方式，它会相应地调用它。这是使AngularJS成为框架而不是库的因素之一。
这些是一些非常好的，但冗长的答案。
总结一下我的经历：