Should we use jQuery with AngularJS?

Question

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.

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

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

Answer 1

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

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.

---

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.

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

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

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

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

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

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

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>