我们应该在 AngularJS 中使用 jQuery 吗? [英] Should we use jQuery with AngularJS?

问题描述

我们的网站目前正在使用 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

推荐答案

AngularJS 的好处，你在做迁移之前需要考虑.

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

1. 它通过仅在作用域中存储变量来提供两种方式的绑定.
2. 与 JQuery 相比，我们还需要编写代码.
3. 以模块化方式实现(通过创建angular.module)
4. 将大部分代码从 Javascript 转移到 HTML，这样看起来代码更简洁.
5. 单例模式器用于存储数据和在多个控制器或服务之间共享.
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. 确保在进行任何应该使用 $http 而不是使用 $.ajax 的 ajax 调用时
5. 在 jquery 代码中有很多地方可以用 ng-class 指令替换，比如如果你只添加 &删除类，或根据任何条件显示某些元素，以便可以使用 ng-class 指令替换此类 jquery 代码
6. 查找您仅删除 DOM 或添加可轻松由 ng-if 指令替换的 DOM 的位置，或者仅显示隐藏元素可以使用 <代码>ng-show/ng-hide
7. 还在 UI 中找到这样一个部分，您可以在其中使用 for 循环创建相同的 DOM，该 DOM 可以转换为 angular native 指令 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

这篇关于我们应该在 AngularJS 中使用 jQuery 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！