Javascript 我们应该在 AngularJS 中使用 jQuery 吗？

Should we use jQuery with AngularJS?

提问by Ankur Aggarwal

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.

我们的网站目前正在使用 jQuery 库，每月的访问量约为 100 万。我们希望包含以 API 为中心的方法，因此决定转向 Javascript MVC 并为其选择了 angularJS。

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).

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

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

如果我有 jQuery 背景，已经完成了“用 AngularJS 思考”？但没有得到明确的答复

采纳答案by Pankaj Parkar

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

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

1. It provides two way binding by only storing variable in scope.
2. Other thing we need write code as compare to JQuery.
3. Implementation in modular way(by creating angular.module)
4. Shift most of the code from Javascript to HTML, that looks code more cleaner.
5. Singleton patterners are there to store a data & share it between multiple controller or services.
6. It in built with smaller version of jQuery that is known as JQlite which has most of the basic functionality, but you want to use JQuery in AngularJS then it will be available easily just you need to add jQuery reference in it, after that JQLite functionality gets converted into JQuery.

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

---

---

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.

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

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

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

1. You need first search angular-ui-bootstrapsite 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 herefor 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 $httprather 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-classdirective
6. Look for the places where you are only removing a DOM or adding DOM that could be easily replaced by the the ng-ifdirective, 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-switchdirective

1. 您需要第一个搜索angular-ui-bootstrap站点，因为它们已经覆盖了大部分已经转换为 angular 的 UI 组件。
2. 我敢肯定您不会找到每个插件 Angular 版本，因为您应该将该插件包装到指令中。这将使您能够控制曾经放置过指令的 DOM 元素。（此处为 Datepicker using 指令的示例）
3. 不要尝试从外部角度上下文绑定事件，这将创建一个摘要循环，这将导致影响 UI 上的绑定更新。
4. 在进行任何应该使用$http而不是使用的ajax 调用时确保$.ajax
5. 你可以在 jquery 代码中找到很多地方可以用 ng-class 指令替换，比如如果你只是添加和删除类，或者根据任何条件显示一些元素，这样那种 jquery 代码可以被替换通过使用ng-class指令
6. 查找您只删除 DOM 或添加可以轻松被ng-if指令替换的 DOM 的位置，或者仅显示元素的隐藏可以通过使用ng-show/ng-hide
7. 还可以在 UI 中找到这样一个部分，您可以在其中使用 for 循环创建相同的 DOM，该循环可以转换为 angular native 指令 ng-repeat
8. 如果您想显示和隐藏多个元素，那么这部分代码将使用ng-switch指令实现

回答by errata

Use Angular to build up controllers and API clients, then as time permits move as much DOM manipulation and as possible to angular directives. Then wait for Angular 2 to be released and do it all over again.

使用 Angular 构建控制器和 API 客户端，然后在时间允许的情况下将尽可能多的 DOM 操作和尽可能多的 Angular 指令移动。然后等待 Angular 2 发布并重新开始。

回答by Chamilyan

Here is a good way to approach it. If you want to mix jQuery with Angular.. write directives in AngularJS and in the link section of those directives you can include jQuery for DOM manipulation.

这是接近它的好方法。如果您想将 jQuery 与 Angular 混合使用……在 AngularJS 中编写指令，并且在这些指令的链接部分中，您可以包含 jQuery 以进行 DOM 操作。

Keep in mind that AngularJS uses jQuery lite so a lot of what jQuery does is already built into Angular.

请记住，AngularJS 使用 jQuery lite，因此 jQuery 所做的很多事情已经内置到 Angular 中。

For example you can use jQuery lite in angular like this anywhere in an angular app:

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

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

and inside of a directive link function,

和指令链接函数内部，

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>