我们应该将 jQuery 与 AngularJS 一起使用吗？ [关闭]

Question

我们的网站目前正在使用 jQuery 库，每月访问量约为 100 万。我们想要包含以 API 为中心的方法，因此决定迁移到 Javascript MVC 并为此选择了 angularJS。

现在我的问题是，我应该在 Angular 之上使用 jQuery，以便我需要重写最少的 DOM 操作代码，还是应该以 Angular 的方式重写所有内容？我们正在使用 jQuery 插件，例如 plupload、jQuery UI。网站上的等。请提出最佳迁移方式（页面加载时间也很重要）。

已经通过"Thinking in AngularJS" if I have a jQuery background?但没有得到明确的答复

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 的摘要循环将不会运行。

当您将 jQuery 组件迁移到 AngularJS 时，您需要遵循以下事项

1. 您需要先搜索 angular-ui-bootstrap 站点，因为它们已经覆盖了大部分已转换为 Angular 的 UI 组件。
2. 我相信您不会找到每个插件的 Angular 版本，您应该将该插件包装到指令中。这将使您能够控制放置指令的 DOM 元素。（Example here 用于 Datepicker using 指令）
3. 不要尝试从外部角度上下文绑定事件，这会创建摘要循环，这会影响 UI 上的绑定更新。
4. 确保在进行任何应该使用$http而不是$.ajax的ajax调用时
5. 您可以在 jquery 代码中找到许多可以被 ng-class 指令替换的地方，例如，如果您只添加和删除类，或者根据任何条件显示某些元素，那么这种 jquery 代码可以用ng-class指令替换
6. 寻找您只删除 DOM 或添加 DOM 的地方，这些地方可以很容易地被 ng-if 指令替换，或者只显示隐藏元素可以通过使用 ng-show/ng-hide 来完成
7. 还可以在 UI 中找到这样一个部分，您在其中使用 for 循环创建相同的 DOM，可以转换为角度原生指令 ng-repeat
8. 如果您有任何需要显示和隐藏多个元素的情况，那么部分代码将使用ng-switch 指令实现

Answer 2

使用 Angular 构建控制器和 API 客户端，然后在时间允许的情况下将尽可能多的 DOM 操作转移到 Angular 指令中。然后等待 Angular 2 发布，然后从头再来。

Answer 3

这是处理它的好方法。如果您想将 jQuery 与 Angular 混合使用。在 AngularJS 中编写指令，并且在这些指令的链接部分中，您可以包含用于 DOM 操作的 jQuery。

请记住，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>