.jpg)
我不是在寻找 和 之间的详细比较。jQueryAngularJS
网友回答：
在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 应用程序的一种方法：
你可以用jQuery做很多事情，而不知道JavaScript原型继承是如何工作的。在开发 AngularJS 应用程序时，如果您对 JavaScript 继承有很好的了解，您将避免一些常见的陷阱。推荐阅读：AngularJS中范围原型/原型继承的细微差别是什么？
网友回答：
在jQuery中，你设计一个页面，然后你让它动态化。这是因为jQuery是为增强而设计的，并且从这个简单的前提发展得令人难以置信。
但是在AngularJS中，你必须从头开始，考虑到你的架构。与其从思考“我有这块 DOM 并且我想让它做 X”开始，你必须从你想要完成的事情开始，然后开始设计你的应用程序，最后开始设计你的视图。
同样，不要从jQuery做X，Y和Z的想法开始，所以我只会在模型和控制器的基础上添加AngularJS。当你刚刚开始的时候，这真的很诱人，这就是为什么我总是建议新的AngularJS开发人员根本不使用jQuery，至少在他们习惯于用“Angular Way”做事之前。
我在这里和邮件列表中看到许多开发人员使用 150 或 200 行代码的 jQuery 插件创建这些精心设计的解决方案，然后他们用一系列令人困惑和复杂的回调和 s 粘合到 AngularJS 中;但他们最终让它工作了！问题在于，在大多数情况下，jQuery插件可以用AngularJS重写一小部分代码，突然间一切都变得易于理解和直接。$apply
底线是这样的：在求解时，首先“在 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 意味着您可以非常自由地声明组件，然后从任何其他组件中，只需请求它的实例，它就会被授予。您不必了解加载顺序或文件位置或类似内容。功能可能不会立即可见，但我只提供一个（常见）示例：测试。
假设在我们的应用程序中，我们需要一个通过 REST 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 操作”。这是必须的。以应有的尊重对待它！
但是，让我们更深入地研究一下…
有些指令只是装饰视图中已有的内容（思考），因此有时直接进行 DOM 操作，然后基本上完成。但是，如果指令像“小部件”并且具有模板，则它也应该尊重关注点的分离。也就是说，模板也应该在很大程度上独立于其在链接和控制器函数中的实现。ngClass
AngularJS附带了一整套工具，使这变得非常简单;有了我们可以动态更新类; 允许双向数据绑定; 并以编程方式显示或隐藏元素;还有更多——包括我们自己写的那些。换句话说，我们可以在没有 DOM 操作的情况下完成各种很棒的事情。DOM 操作越少，指令越容易测试，它们就越容易样式化，它们在将来就越容易更改，它们就越可重用和可分发。ngClassngModelngShowngHide
我看到很多刚接触AngularJS的开发人员使用指令作为抛出一堆jQuery的地方。换句话说，他们认为“由于我无法在控制器中进行 DOM 操作，我将把代码放在指令中”。虽然这肯定要好得多，但它往往仍然是错误的。
想想我们在第 3 节中编程的记录器。即使我们把它放在指令中，我们仍然希望以“角度方式”来做。它仍然不需要任何 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.elementangular.element$angular.element$elementlink这个指令可以重写（即使是非常复杂的情况！）更简单，如下所示：
.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 不执行您需要它执行的操作，则编写一个指令来为您执行此操作，然后像使用 HTML 的一部分一样使用它。
换句话说，如果 AngularJS 没有做一些开箱即用的事情，想想团队将如何完成它以适应 、 等。ngClickngClass
甚至不要使用 jQuery。甚至不要包括它。它会阻止你。当你遇到一个你认为你已经知道如何在jQuery中解决的问题时，在你到达之前，试着考虑如何在AngularJS的范围内做到这一点。如果你不知道，问！19 次中有 20 次，最好的方法不需要 jQuery，尝试用 jQuery 解决它会为你带来更多的工作。$
网友回答：
AngularJS和jQuery采用了非常不同的意识形态。如果你来自jQuery，你可能会发现一些令人惊讶的差异。棱角可能会让你生气。
这是正常的，你应该坚持下去。角度是值得的。
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，并不反对你使用它。但是，随着您的进步，您会发现您可以使用范围，模板和指令的组合来完成几乎所有的工作，并且您应该尽可能选择此工作流程，因为您的代码将更加离散，更可配置，并且更加Angular。
如果你确实使用jQuery，你不应该把它洒满所有地方。在 AngularJS 中，DOM 操作的正确位置是在指令中。稍后会详细介绍这些内容。
jQuery通常不显眼地应用。您的 JavaScript 代码在页眉（或页脚）中链接，这是唯一被提及的地方。我们使用选择器来挑选页面的部分并编写插件来修改这些部分。
JavaScript 在控制之中。HTML具有完全独立的存在。即使没有JavaScript，你的HTML仍然是语义的。点击属性是非常糟糕的做法。
关于AngularJS，你会注意到的第一件事是自定义属性无处不在。你的HTML将充斥着ng属性，这些属性本质上是类固醇上的onClick属性。这些是指令（编译器指令），是模板挂接到模型的主要方式之一。
当你第一次看到这个时，你可能会想把AngularJS写成老派的侵入性JavaScript（就像我一开始所做的那样）。事实上，AngularJS并不遵守这些规则。在 AngularJS 中，HTML5 是一个模板。它由AngularJS编译以生成您的网页。
这是第一个很大的区别。对于jQuery，你的网页是一个要纵的DOM。对于AngularJS，你的HTML是要编译的代码。AngularJS读取整个网页，并使用其内置编译器将其编译成一个新的网页。
模板应该是声明性的;只需阅读它，它的含义就应该很清楚。我们使用具有有意义名称的自定义属性。我们组成新的HTML元素，同样使用有意义的名称。HTML知识最少且没有编码技能的设计人员可以阅读您的AngularJS模板并了解它在做什么。他或她可以进行修改。这是角度的方式。
在启动 AngularJS 并运行教程时，我问自己的第一个问题是“我的代码在哪里？我没有写过JavaScript，但我有所有这些行为。答案是显而易见的。因为 AngularJS 编译 DOM，所以 AngularJS 将你的 HTML 视为代码。对于许多简单的情况，通常只需编写一个模板并让 AngularJS 将其编译成适合您的应用程序就足够了。
您的模板驱动您的应用程序。它被视为 DSL。您编写 AngularJS 组件，AngularJS 将负责将它们拉入并根据模板的结构在正确的时间可用。这与标准 MVC 模式非常不同，在标准 MVC 模式中，模板仅用于输出。
例如，它更类似于XSLT，而不是Ruby on Rails。
这是一种彻底的控制反转，需要一些时间来适应。
停止尝试从 JavaScript 驱动应用程序。让模板驱动应用程序，让 AngularJS 负责将组件连接在一起。这也是角度的方式。
使用jQuery，你的HTML页面应该包含语义有意义的内容。如果 JavaScript 被关闭（由用户或搜索引擎关闭），您的内容仍然可以访问。
因为AngularJS将您的HTML页面视为模板。模板不应该是语义的，因为您的内容通常存储在最终来自您的 API 的模型中。AngularJS用模型编译你的DOM，以产生一个语义网页。
你的HTML源代码不再是语义的，相反，你的API和编译的DOM是语义的。
在AngularJS中，意思是存在于模型中，HTML只是一个模板，仅用于显示。
在这一点上，您可能会有关于SEO和可访问性的各种问题，这是正确的。这里有悬而未决的问题。大多数屏幕阅读器现在都会解析JavaScript。搜索引擎还可以索引 AJAX 处理的内容。尽管如此，您将需要确保您使用的是推送状态 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的趋势是编写像lightbox这样的大插件，然后我们通过传入大量值和选项来配置它们。
这是AngularJS中的一个错误。
以下拉列表为例。在编写下拉插件时，您可能会想在点击处理程序中编码，也许是一个函数来添加向上或向下的 V 形，也许更改展开元素的类，显示隐藏菜单，所有有用的东西。
直到你想做一个小的改变。
假设您有一个要在悬停时展开的菜单。好吧，现在我们有一个问题。我们的插件已经为我们连接了我们的点击处理程序，我们需要添加一个配置选项以使其在这种特定情况下的行为有所不同。
在AngularJS中，我们编写较小的指令。我们的下拉指令会小得离谱。它可以保持折叠状态，并提供折叠（），unfold（）或toggle（）的方法。这些方法只会更新$scope.menu.visible，这是一个保存状态的布尔值。
现在在我们的模板中，我们可以将其连接起来：
<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
需要鼠标悬停时更新？
<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
模板驱动应用程序，因此我们获得 HTML 级别的粒度。如果我们想逐案处理例外，模板使这变得容易。
JQuery 插件是在闭包中创建的。隐私在该关闭范围内得到维护。由你来维护你的范围链在该闭包内。你只能真正访问由jQuery传递给插件的DOM节点集，以及闭包中定义的任何局部变量和你定义的任何全局变量。这意味着插件是相当独立的。这是一件好事，但在创建整个应用程序时可能会受到限制。尝试在动态页面的各个部分之间传递数据变得很麻烦。
AngularJS有$scope对象。这些是由 AngularJS 创建和维护的特殊对象，您可以在其中存储模型。某些指令将生成一个新的$scope，默认情况下，该继承其包装$scope使用 JavaScript 原型继承。$scope对象可在控制器和视图中访问。
这是聪明的部分。由于$scope继承的结构大致遵循 DOM 的结构，因此元素可以访问自己的作用域，以及任何包含作用域的无缝范围，一直到全局$scope（与全局作用域不同）。
这使得传递数据以及在适当级别存储数据变得更加容易。如果展开下拉列表，则只有下拉列表$scope需要了解它。如果用户更新其首选项，则可能需要更新全局$scope，并且侦听用户首选项的任何嵌套作用域都将自动收到警报。
这听起来可能很复杂，事实上，一旦你放松下来，就像飞翔一样。您无需创建$scope对象，AngularJS 会根据您的模板层次结构正确、适当地为您实例化和配置它。然后，AngularJS使用依赖注入的魔力将其提供给您的组件（稍后会详细介绍）。
在jQuery中，你可以手动进行所有的DOM更改。以编程方式构造新的 DOM 元素。如果你有一个 JSON 数组，并且想要把它放到 DOM，你必须编写一个函数来生成 HTML 并插入它。
在 AngularJS 中，您也可以这样做，但建议您使用数据绑定。更改您的模型，并且由于 DOM 通过模板绑定到它，因此您的 DOM 将自动更新，无需干预。
由于数据绑定是从模板完成的，使用属性或大括号语法，因此非常容易做到。与它相关的认知开销很小，所以你会发现自己一直在这样做。
<input ng-model="user.name" />
将输入元素绑定到 。更新输入将更新当前范围内的值，反之亦然。$scope.user.name
同样：
<p>
{{user.name}}
</p>
将在段落中输出用户名。它是一个实时绑定，因此如果值已更新，模板也会更新。$scope.user.name
在jQuery中，进行Ajax调用相当简单，但它仍然是你可能会三思而后行的事情。需要考虑额外的复杂性，并且需要维护相当多的脚本。
在AngularJS中，Ajax是你默认的首选解决方案，它一直在发生，几乎没有你注意到。您可以使用 ng-include 包含模板。您可以使用最简单的自定义指令应用模板。您可以将 Ajax 调用包装在一个服务中，并为自己创建一个 GitHub 服务或 Flickr 服务，您可以非常轻松地访问它。
在 jQuery 中，如果我们想完成一个与 dom 无关的小任务，比如从 API 中提取提要，我们可以在闭包中编写一个小函数来做到这一点。这是一个有效的解决方案，但如果我们想经常访问该提要怎么办？如果我们想在另一个应用程序中重用该代码怎么办？
AngularJS为我们提供了服务对象。
服务是包含函数和数据的简单对象。它们始终是单例，这意味着永远不会有多个。假设我们想访问 Stack Overflow API，我们可能会编写一个定义这样做的方法。StackOverflowService
假设我们有一个购物车。我们可以定义一个购物车服务，它维护我们的购物车并包含添加和删除项目的方法。由于该服务是单一实例，并且由所有其他组件共享，因此任何需要的对象都可以写入购物车并从中提取数据。它总是同一个购物车。
服务对象是独立的 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对象来实例化控制器，并为我们提供一个对象。
这使得将事物连接在一起变得非常容易，并且几乎消除了任何页面化的趋势。我们有一个扁平的组件列表，AngularJS在我们需要它们时将它们一一交给我们。
jQuery很少提到你应该如何组织你的代码。AngularJS有意见。
AngularJS为您提供了可以放置代码的模块。例如，如果你正在编写一个与Flickr对话的脚本，你可能想要创建一个Flickr模块来包装所有与Flickr相关的函数。模块可以包括其他模块 （DI）。您的主应用程序通常是一个模块，这应该包括您的应用程序将依赖的所有其他模块。
你可以得到简单的代码重用，如果你想编写另一个基于Flickr的应用程序，你可以只包含Flickr模块，瞧，你可以在你的新应用程序中访问所有与Flickr相关的功能。
模块包含 AngularJS 组件。当我们包含一个模块时，该模块中的所有组件都可以作为由其唯一字符串标识的简单列表提供给我们。然后，我们可以使用 AngularJS 的依赖注入机制将这些组件相互注入。
AngularJS和jQuery不是敌人。在AngularJS中可以很好地使用jQuery。如果你很好地使用AngularJS（模板，数据绑定，$scope，指令等），你会发现你需要的jQuery比你可能需要的要少得多。
要意识到的主要事情是模板驱动您的应用程序。停止尝试编写无所不能的大插件。相反，编写做一件事的小指令，然后编写一个简单的模板将它们连接在一起。
少考虑不显眼的JavaScript，而是考虑HTML扩展。
我对AngularJS感到非常兴奋，我写了一本关于它的短书，非常欢迎你在线阅读 http://nicholasjohnson.com/angular-book/。我希望它对您有所帮助。
模板简介：该模板名称为【“在AngularJS中思考”如果我有jQuery背景？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。
.jpg)
.jpg)
.jpg)
.jpg)
