我们是否应该使用jQuery与AngularJS？ [英] Should we use jQuery with AngularJS?

问题描述

我们的网站目前使用jQuery库，并获得约100万流量包月。我们希望包括API为中心的方法，所以决定搬到javascipt的MVC，并choosen 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 Javascipt MVC and has choosen angularJS for it because of some reasons.

现在我的问题是，我应该使用jQuery对角的顶部，这样我需要重写最小的DOM操作code，或者我应该重新写在角方式的一切。我们使用jQuery插件像plupload，jQuery用户界面等十分网站上。请建议迁移的最佳方法（页面加载时间也很重要）

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 very website. Please suggest the best way of migration (page load time also matters)

已通过<一去href=\"http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background\">"Thinking在AngularJS＆QUOT;如果我有一个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. 其他的事情，我们需要写code作为比较JQuery的。


3. 实施模块化的方式（通过创建 angular.module ）


4. 切换大部分来自JavaScript中的code到HTML，看起来code更清洁的。


5. 辛格尔顿patterners在那里存储数据＆安培;多个控制器或服务之间共享。


6. 它内置使用jQuery的更小的版本被称为JQlite其中有大部分的基本功能，但要在AngularJS使用jQuery那么这将是易得只需要在它加入jQuery的参考，在此之后JQLite功能被转换成JQuery的。

您不应该在AngularJS的顶部使用jQuery，因为AngularJS消化周期，如果我们使用JQuery做任何角度DOM操作或范围的变量操作不会运行。

---

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. 您需要先搜索角UI的引导网​​站，因为他们已覆盖其中大部分已经转化为角UI组件的。


2. 我敢肯定你会找不到每个插件版本角，在那你应该换行的插件指令。它会给你控制器放置在以往的指令安置了DOM元素。（ 示例这里 为使用日期选择器指令）


3. 请不要试图从外部的角度范围内，将创建摘要周期绑定的事件，这将导致在UI绑定到选择更新影响。


4. 确保同时使应使用任何Ajax调用 $ HTTP 而不是使用 $。阿贾克斯


5. 有很多地方，你可以找到在jQuery的code，这将是伍级指令取代，就像如果你正在做的只需要添加和放大器;去除类，或显示任何condtion的基础上的一些元素，所以那种jQuery的code可以通过使用可替代纳克级指令


6. 查找的地方，你只能删除DOM或添加DOM，可以通过在 NG-如果指令很容易地更换，或者只显示元素隐藏可以通过两个办法来实现 NG-节目 / NG-隐藏


7. 同样发现UI在其中创建使用循环相同的DOM这样的一部分可以转变为角原生指令 NG-重复


8. 如果你有，你想显示和隐藏多个元素，所以code的那部分会使用 NG-开关指令来实现任何情况下

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

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