我们应该在AngularJS中使用jQuery吗？

Question

我们的网站目前正在使用jQuery库，并且每月的流量约为100万。我们希望采用API中心方法，因此决定转向Javascript MVC，并选择了angularJS。

现在我的问题是，我应该在Angular的顶部使用jQuery，以便最小化DOM操作的代码重写，还是我应该按照Angular的方式重新编写所有内容？我们在网站上使用像plupload、jQuery UI等jQuery插件。请建议最佳迁移方式（页面加载时间也很重要）。

已经阅读了"如果我有jQuery背景，如何思考AngularJS"，但没有得到明确的答案。

- Ankur Aggarwal

---

@pankajparkar，我已经提到过我看过那个问题。由于不同的方法，无法得到清晰的答案。 - Ankur Aggarwal

我有时会同时使用两者，但jQuery更具有吸引力的特性（这些特性在Angular中我要么找不到，要么没有时间去寻找），而Angular则在客户端上拥有魔力。 - MacKentoch

Answer 1

在进行迁移之前，你需要考虑 AngularJS 的一些好处。

1. 它提供了双向绑定功能，只需将变量存储在作用域中即可。
2. 与 JQuery 相比，我们需要编写更多的代码。
3. 以模块化方式实现（通过创建 angular.module）
4. 将大部分代码从 Javascript 移至 HTML，使代码看起来更加清晰简洁。
5. 使用单例模式存储数据，并在多个控制器或服务之间共享。
6. 它内置了一个较小版本的 jQuery，称为 JQlite，具有大部分基本功能。但如果想在 AngularJS 中使用 JQuery，只需添加 JQuery 引用即可，此后 JQLite 功能将转换为 JQuery。

---

不要在 AngularJS 顶部使用 jQuery，因为如果我们使用 JQuery 进行任何角色 DOM 操作或作用域变量操作，AngularJS 的 digest 循环将不会运行。

当您将您的 jQuery 组件迁移到 AngularJS 时，需要遵循以下几点：

1. 首先，您需要搜索 angular-ui-bootstrap 网站，因为他们已经覆盖了大部分已转换为 Angular 的 UI 组件。
2. 我相信你不会找到每个插件的 Angular 版本，这时您应该将该插件包装成指令。这将使您在指令放置的 DOM 元素上具有控制权。（例如 DatePicker 使用指令的示例）
3. 不要尝试在 Angular 上下文之外绑定事件，这会创建一个 digest 循环，从而影响 UI 的绑定更新。
4. 确保进行任何 AJAX 调用时都要使用 $http 而不是 $.ajax。
5. 有许多地方可以用 ng-class 指令替换 jQuery 代码，例如如果您只是添加和删除类，或根据任何条件显示某个元素，则可以使用 ng-class 指令替换此类 jQuery 代码。

寻找那些仅仅移除DOM或添加DOM的地方，这些可以被ng-if指令轻松替换，或者仅仅是元素的显示隐藏可以通过使用ng-show/ng-hide来完成

同时，在UI中找到使用循环创建相同DOM的部分，可以转换为Angular本地指令ng-repeat

如果您需要显示和隐藏多个元素，请使用ng-switch指令实现该部分代码

- Pankaj Parkar

Answer 2

使用Angular构建控制器和API客户端，然后随着时间的允许，将尽可能多的DOM操作移至Angular指令中。然后等待Angular 2发布并重新开始。

- errata

Answer 3

以下是一种很好的方法。如果您想将jQuery与Angular混合使用..请在AngularJS中编写指令，并在这些指令的链接部分中包含jQuery以进行DOM操作。

请记住，AngularJS使用jQuery lite，因此许多jQuery功能已经内置于Angular中。

例如，您可以在Angular应用程序的任何地方像这样使用jQuery lite：

angular.element('.class').append('<p>foo</p>');

在指令的链接函数中，

angular.module('TestModule')
.directive('jqueryTestDirective', ['$timeout', function($timeout) {
    return {
      restrict: 'E',
      link : function (scope, element) {
        $timeout(function(){  
           element.append('<p>foo</p>');
        });
      }
}]);

<jquery-test-directive></jquery-test-directive>

- Chamilyan

---

所以基本上我应该排除jQuery，开始用Angular的方式来制作东西。每当我需要jQuery时，我应该查看jQuery Lite？ - Ankur Aggarwal

jQuery Lite并不能像jQuery一样完成所有任务。在某些情况下有一些限制。请查看此处的详细信息，https://docs.angularjs.org/api/ng/function/angular.element - Chamilyan

同时，按照 Angular 的方式进行操作是正确的方法。如果需要使用插件或进行一些高级 DOM 操作，请编写指令来完成。其他所有内容，例如应用程序的结构、路由等，都应该由您的堆栈的其余部分（包括 Angular）来处理。 - Chamilyan

谢谢帮助 :) 我会研究这些并告诉你。 - Ankur Aggarwal

你的指令最终将变成<j-query-test-directive></...>。在代码中将jQuery更改为jquery。 - user1889992