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.

Solution 1

I fixed this solution by removing the line from jQuery source which made $ and jQuery the global variables. This line looks something like window.jQuery = window.$ = jQuery.

If you are also using AngularJS with RequireJS and are facing similar problem, remove these lines.

Furthermore, you will have to use jqueryui-amd in your project. Download the utility from the Github page and it will convert jQuery UI script to AMD modules.

Using the AngularJS feature called 'directives' to extend HTML elements I was able to use jQuery UI components in reusable and sane manner.

I've to say that I've hated and loved AngularJS while working on my project, sometimes even letting everybody on Twitter know that I hate AngularJS. However, after having implemented and finished two projects over the last month I have fairly good idea on when to use it and when not to use it.

Here is one jsFiddle I've created to demonstrate the use of jQuery UI with AngularJS:

http://jsfiddle.net/samunplugged/gMyfE/2/

Solution 2

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>

Solution 3

Easily fixed this after my two days try..

When try

Include the particular Slider Jquery files to the view.html directly. remove jquery from index.html file