我们应该将 jQuery 与 AngularJS 一起使用吗?

2022-01-23 00:00:00 migration angularjs jquery javascript

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

Our website is currently using jQuery library and getting a traffic of about 1 million monthly. We want to include API centric approach, so decided to move to Javascript MVC and have chosen angularJS for it.

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

Now my question is, should I use jQuery on the top of Angular so that I need to rewrite minimal DOM manipulation code, or I should re-write everything in the Angular way? We are using jQuery plugins like plupload, jQuery UI. etc on the website. Please suggest the best way of migration (page load time also matters).

已经通过 ​​在 AngularJS 中思考"如果我有 jQuery 背景? 但没有得到明确的答案

Already went through "Thinking in AngularJS" if I have a jQuery background? but not getting a clear answer

推荐答案

在进行 Migration 之前需要考虑 AngularJS 的优点.

Good thing about AngularJS which you need consider before doing Migration.

  1. 它提供了两种方式绑定，只在作用域中存储变量.
  2. 与 JQuery 相比，我们需要编写代码的其他内容.
  3. 以模块化方式实现(通过创建angular.module)
  4. 将大部分代码从 Javascript 转换为 HTML，这样代码看起来更简洁.
  5. Singleton Patterners 用于存储数据和在多个控制器或服务之间共享它.
  6. 它是用较小版本的 jQuery 构建的，它被称为 JQlite，它具有大部分基本功能，但是你想在 AngularJS 中使用 JQuery，然后你需要在其中添加 jQuery 引用就可以轻松使用它，之后JQLite 功能被转换为 JQuery.

<小时>

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

You should not use jQuery on the top of the AngularJS, because AngularJS digest cycle wont run if we do any angular DOM manipulation or scope variable manipulation using JQuery.

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

As you migrate you jQuery component to AngularJS you need to follow below things

  1. 您需要先搜索 angular-ui-bootstrap 站点，因为它们已经覆盖了大部分已经转换为 angular 的 UI 组件.
  2. 我相信你不会找到每个插件的 Angular 版本，你应该将该插件包装到指令中.这将使您能够控制放置指令的 DOM 元素.(此处示例日期选择器使用指令)
  3. 不要尝试从外部角度上下文绑定事件，这会创建摘要循环，这会影响 UI 上的绑定更新.
  4. 确保在进行任何 ajax 调用时应该使用 $http 而不是使用 $.ajax
  5. 您可以在 jquery 代码中找到许多可以被 ng-class 指令替换的地方，例如，如果您只添加 &删除类，或根据任何条件显示某些元素，以便可以通过使用 ng-class 指令
    6. 替换某种 jquery 代码
  6. 寻找您只删除 DOM 或添加 DOM 的地方，这些地方可以很容易地被 ng-if 指令替换，或者只显示隐藏元素可以通过使用 <代码>ng-show/ng-hide
  7. 还可以在 UI 中找到这样一个部分，其中您正在使用 for 循环创建相同的 DOM，可以转换为角度原生指令 ng-repeat
  8. 如果您想显示和隐藏多个元素，那么这部分代码将使用 ng-switch 指令实现
  1. You need first search angular-ui-bootstrap site because they had covered most of the UI component which has already converted to angular.
  2. I'm sure you will not found every plugin Angular version, at that you should wrap that plugin to directive. Which will give you controller over the DOM element where ever directive has placed.(Example here for Datepicker using directive)
  3. Don't try to bind event from outside angular context that will create a digest cycle, that will leads to affect in binding updation on UI.
  4. Ensure while making any ajax call that should be using $http rather than using $.ajax
  5. There are many places you can find in jquery code that would be replace by ng-class directive, like if you are doing only adding & removing class, or showing some element on basis of any condtion, so that sort of jquery code can be replace by use ng-class directive
  6. Look for the places where you are only removing a DOM or adding DOM that could be easily replaced by the the ng-if directive, or only show hide of element can be done by using either ng-show/ng-hide
  7. Also find such a part in UI in which you are creating same DOM using for loop that can be convert to angular native directive ng-repeat
  8. If you have any case where you wanted to show and hide multiple element, so that part of code would be implemented using ng-switch directive

相关文章