Can we use both jQuery and AngularJS in our web application?

Question

Can we use both jQuery and AngularJS in our web application? I have read some advice saying not to use both together in your project, because each has a different lifecycle.

Our requirement is to build a responsive web application using ASP.NET WebApi and AngularJS; now to make our application responsive we wish to use Bootstrap, and Bootstrap requires both Bootstrap CSS and the jQuery library; so should we add both the jQuery libary and the AngularJS library to our project?

Answer 1

Yes you can but it's not recommended because jQuery adds alot overhead. If you would code the "angular way", then you won't break the angular functionality. Like example if you try to adjust a value of a field, then your scope wouldn't update until you manually trigger a digest. It leads into rubbish code and inconsistent behavior.

Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

Source

Also see this question: Should we use jQuery with AngularJS?

If you are really really sure that you want to use jQuery, make sure that you include the jQuery script first. Angular will load jQuery in place of JQ lite then.

Answer 2

Yes, You can use both Jquery and AngularJS in the same project. According to the AngularJS documentation

Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

You also need to remember that,

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery.

If you want to use any Jquery plugin in the project, make sure you convert them into angular directive.