current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 2 down vote favorite

Question: How can I prevent jQuery from being used by AngularJs?

Background:

I'm developing a standalone app in AngularJs that can be "inserted" in to already existing client websites.

These client websites likely already use jQuery.

If you've used AngularJs, you probably already know that it uses jqLite (a subset of jQuery). But if the jQuery library is loaded before an Angular app initialises then Angular will use that instead. There is no guarantee clients will load it after.

Using jQuery instead of the jqLite library has caused other issues and I simply don't need jQuery.

Is there a way to prevent AngularJs from using it and just stick to jqLite?

Thanks

EDIT 1:

The issues I get when letting angular include and use jQuery are:

  1. "GET http://localhost.dev/angular/js/jquery-1.10.2.js?_=1401232704848 404 (Not Found)"

  2. "Uncaught SyntaxError: Unexpected token <" (error in jQuery v2.1.1 file, line 330)

I'm testing with jQuery-2.1.1 so not even sure why it's looking for version 1.10.2

EDIT 2:

I'm after a method that preferably does not require modifications to the core AngularJs file.

share|improve this question
    
Yes, load jQuery after – tymeJV May 27 '14 at 23:01
    
Yes true, and that does work. But there is no guarantee clients will call jQuery after the app is initialised. I need to simply turn it off for my AngularJS to prevent any issues. Thanks anyway. – Jarrod May 27 '14 at 23:08
    
What do you mean "call jQuery after the app is initialized"? You control the order of the files being loaded – tymeJV May 27 '14 at 23:09
1  
Out of curiosity: What issues did you find ? – ExpertSystem May 27 '14 at 23:09
    
After you answer my previosu question, here's one more: Can you control the angular.js file (e.g. modify it to ignore jQuery ? Could you run some JS right before and right after the angular.js file is executed ? – ExpertSystem May 27 '14 at 23:18

4 Answers 4

up vote 7 down vote accepted

UPDATE:
Since v1.4.0-beta.6, Angular now has built-in support for choosing not to use jQuery (or use a specific version if multiple versions are loaded): ngJq

Unfortunately, there is no built-in way to disable jQuery (although it sounds like a very reasonable feature).

Two far from ideal solutions would be:

1.) Tyler's solution of modifying the Angular source.

2.) Since angular uses window.jQuery to look for...you guessed it...jQuery (and assuming you can control what script is run before and after angular.js), you could temporarily "hide" jQuery from Angular:

/* Run before angular.js */
if (window.jQuery) {
    window.hideJQuery = window.jQuery;
    window.jQuery = false;
}

// <script src="angular.js"></script>

if (window.hideJQuery) {
    window.jQuery = window.hideJQuery;
    window.hideJQuery = undefined;
}
share|improve this answer
1  
I ran with your second solution. It's not pretty, but it works :) Thanks. – Jarrod May 28 '14 at 0:11
    
There should really be a configurable option built-in. BTW, don't forget to upvote thi great answer :) – ExpertSystem May 28 '14 at 0:32
up vote 0 down vote

The function below is the one which is replacing jqlite with jQuery in Angular. Find and alter this function as appropriate in the NG Source to not use jQUery.

function bindJQuery() {
  var originalCleanData;
  // bind to jQuery if present;
  jQuery = window.jQuery;
  // Use jQuery if it exists with proper functionality, otherwise default to us.
  // Angular 1.2+ requires jQuery 1.7.1+ for on()/off() support.
  if (jQuery && jQuery.fn.on) {
    jqLite = jQuery;
    extend(jQuery.fn, {
      scope: JQLitePrototype.scope,
      isolateScope: JQLitePrototype.isolateScope,
      controller: JQLitePrototype.controller,
      injector: JQLitePrototype.injector,
      inheritedData: JQLitePrototype.inheritedData
    });

    originalCleanData = jQuery.cleanData;
    // Prevent double-proxying.
    originalCleanData = originalCleanData.$$original || originalCleanData;

    // All nodes removed from the DOM via various jQuery APIs like .remove()
    // are passed through jQuery.cleanData. Monkey-patch this method to fire
    // the $destroy event on all removed nodes.
    jQuery.cleanData = function(elems) {
      for (var i = 0, elem; (elem = elems[i]) != null; i++) {
        jQuery(elem).triggerHandler('$destroy');
      }
      originalCleanData(elems);
    };
    jQuery.cleanData.$$original = originalCleanData;
  } else {
    jqLite = JQLite;
  }

  angular.element = jqLite;
}

Should be around line 1432.

share|improve this answer
    
I've already found that function (although it looks like you're using an older version of Angular to me) and I can hack a fix by setting jQuery = false. The problem with this is it can easily be forgotten or overlooked by another member and then, of course, be overwritten with an upgrade. Thanks anyway. I was hoping there was a built in method or away to extend the core AngularJs file to provide the change. – Jarrod May 27 '14 at 23:37
up vote 0 down vote

this is a duplicate of how-to-force-angular-to-use-jqlite

use the new Tag 'ng-jq' with angular 1.4.x to set the Version of switch to jQLite (angular internal jQuery)

upvote original answer please :)

share|improve this answer
up vote -1 down vote

Use the ng-jq directive:

* @element ANY
 * @param {string=} ngJq the name of the library available under `window`
 * to be used for angular.element
 * @description
 * Use this directive to force the angular.element library.  This should be
 * used to force either jqLite by leaving ng-jq blank or setting the name of
 * the jquery variable under window (eg. jQuery).
 *
 * Since angular looks for this directive when it is loaded (doesn't wait for the
 * DOMContentLoaded event), it must be placed on an element that comes before the script
 * which loads angular. Also, only the first instance of `ng-jq` will be used and all
 * others ignored.

For example:

 <!doctype html>
 <html ng-app ng-jq>
 ...
 ...
 </html>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.