我们应该使用 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

使用 Angular 构建控制器和 API 客户端，然后在时间允许的情况下尽可能多地移动 DOM 操作和 angular 指令。然后等Angular 2放出来再来一遍

Answer 2

关于 AngularJS 的好处，您在进行迁移之前需要考虑它。

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

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

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

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

Answer 3

这是处理它的好方法。如果您想将 jQuery 与 Angular 混合使用，请在 AngularJS 中编写指令，并在这些指令的 link 部分中包含 jQuery for DOM操纵。

请记住，AngularJS 使用 jQuery 精简版，因此 jQuery 所做的很多事情已经内置于 Angular。

例如，您可以在 angular 中像这样在 angular 应用程序的任何位置使用 jQuery 精简版：

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

和指令内部 link 函数，

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 和 AngularJS 吗？

Should we use jQuery with AngularJS?

javascript

migration

jquery

angularjs