javascript - jQuery and AngularJS not working together

Question

I am using RequireJS and Angular but they are not working together in my set up. Things work fine when jQuery version is 1.7.2. However I wanted to use jQuery 1.8.1 and jQuery UI and angular app even fails to initialize the my main module with this.

Here is the problem:

Case sensitive variables: jQuery and jquery. In jquery 1.8.1 source code, towards the end they have defined window.jQuery. Where as in earlier version 1.7.2 had window.jquery defined.

Since I want to use jQuery UI in my app included the file jquery-ui-1.8.23.custom.min.js. After including it I got the error that "jQuery" is undefined.

So, I decided to upgrade my jQuery version and downloaded the said 1.8.1 version. Towards the end of the jQuery source code I could see that this version defined window.jQuery (correct case as needed by jQuery UI).

I updated my require-jquery JS with latest version from James Burke github project and updated it with jquery 1.8.1.

But including the updated jQuery/RequireJS project, angularjs has stopped working.

I get this error in Chrome console:

If I revert to 1.7.2 angular works. Or if I edit jQuery file to define window.jquery instead of window.jQuery (note the case) it again works. But that means jQuery UI won't.

Answer 1

Using jQuery's noConflict method is a more elegant and future proof solution to this problem.

View extensive documentation on http://api.jquery.com/jQuery.noConflict/

UPDATE (example from the link):

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>