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

Posted 2023-05-09

【中文标题】我们应该将 jQuery 与 AngularJS 一起使用吗？ [关闭]

【英文标题】：Should we use jQuery with AngularJS? [closed]

【发布时间】：2015-07-12 12:29:07

【问题描述】：

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

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

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

【问题讨论】：

@pankajparkar 我已经提到过这个问题。由于方法不同，无法从中得到明确的答案

我有时两者都用，但 jQuery 是更好看的东西（我在 Angular 中找不到或没有时间找到），而 Angular 是客户端的魔力。

【参考方案1】：

在进行迁移之前您需要考虑 AngularJS 的优点。

它提供了两种绑定方式，只在作用域中存储变量。 与 JQuery 相比，我们需要编写代码的其他内容。 以模块化方式实现（通过创建angular.module） 将大部分代码从 Javascript 转换为 html，这样代码看起来更干净。 单例模式可以存储数据并在多个控制器或服务之间共享。 它内置了较小版本的 jQuery，称为 JQlite，它具有大部分基本功能，但是您想在 AngularJS 中使用 JQuery，然后只需在其中添加 jQuery 引用，它就可以轻松使用，之后JQLite 功能被转换为 JQuery。

---

你不应该在 AngularJS 的顶部使用 jQuery，因为如果我们使用 JQuery 进行任何角度 DOM 操作或范围变量操作，AngularJS 的摘要循环将不会运行。

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

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

【参考方案2】：

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

【参考方案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>

【讨论】：

所以基本上我应该排除 jquery 并开始以有角度的方式制作东西。每当我需要 jquery 时，我应该看看 jquery lite？

jQuery lite 并没有做 jQuery 所做的一切。在某些情况下有一些限制。详情请看这里，docs.angularjs.org/api/ng/function/angular.element

也.. 以角度做事是正确的方法。如果您需要使用插件或进行一些花哨的 DOM 操作。是的，写一个指令来做。其他一切，应用程序的结构，路由等。应该由堆栈的其余部分处理，包括角度。

感谢您的帮助 :) 我会调查这些并让您知道

你的指令最终会变成 。在代码中将jQuery改为jquery。