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

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

现在我的问题是，我应该在角度的顶部使用jQuery，以便重写最小的DOM操作代码，还是应该以角度的方式重写所有内容?我们正在使用jQuery插件，比如plupload, jQuery UI。等网站上。请建议最好的迁移方式(页面加载时间也很重要)。

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

如果我有jQuery背景，已经经历过“AngularJS”的思考了?但是没有一个明确的答案

3 个解决方案

#1

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

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

It provides two way binding by only storing variable in scope.
它通过只在范围内存储变量来提供双向绑定。
Other thing we need write code as compare to JQuery.
与JQuery相比，我们还需要编写代码。
Implementation in modular way(by creating angular.module)
以模块化方式实现(通过创建angular.module)
Shift most of the code from Javascript to HTML, that looks code more cleaner.
将大部分代码从Javascript转移到HTML，这看起来更简洁。
Singleton patterners are there to store a data & share it between multiple controller or services.
单例模式器用于存储数据并在多个控制器或服务之间共享数据。
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.
在用小的jQuery版本被称为JQlite最基本的功能,但是你想使用jQuery AngularJS那么它将容易只需要添加jQuery参考,之后被转化为jQuery JQlite功能。

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时，您需要遵循以下内容。

You need first search angular-ui-bootstrap site because they had covered most of the UI component which has already converted to angular.
您需要首先搜索angular- UI -bootstrap站点，因为它们覆盖了已经转换为角的大部分UI组件。
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)
我相信你不会找到每个插件的角版本，你应该把那个插件打包成指令。它将为您提供DOM元素的控制器。(这里使用指令的Datepicker示例)
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.
不要试图从外部的角度上下文中绑定事件，这会创建一个摘要循环，这会导致在UI上的绑定升级。
Ensure while making any ajax call that should be using $http rather than using $.ajax
在进行任何ajax调用时都要确保使用$http，而不是使用$.ajax
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
在jquery代码中有很多地方可以被ng-class指令替代，比如如果您只做添加和删除类，或者在任何condtion的基础上显示一些元素，那么可以使用ng-class指令替换jquery代码
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
寻找只删除DOM或添加DOM的地方，这些DOM很容易被ng-if指令替换，或者只显示元素的隐藏可以通过使用ng-show/ng-hide实现
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
还可以在UI中找到这样一个部分，其中您正在使用for循环创建相同的DOM，该循环可以转换为角本机指令ng-repeat
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
如果您有任何需要显示和隐藏多个元素的情况，那么可以使用ng-switch指令实现部分代码

#2

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.

使用角度构建控制器和API客户端，然后在时间允许的情况下尽可能多地移动DOM操作，并尽可能地移动到角度指令。然后等待角2的释放，然后再做一次。

#3

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和角函数混合。用AngularJS编写指令，在这些指令的链接部分，您可以包含用于DOM操作的jQuery。

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

请记住，AngularJS使用的是jQuery lite，因此jQuery所做的很多事情都已经形成了棱角。

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

例如，你可以在任何角度应用程序中使用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>

#1