5

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.

9
  • Yes, load jQuery after
    – tymeJV
    May 27, 2014 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, 2014 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, 2014 at 23:09
  • 1
    Out of curiosity: What issues did you find ?
    – gkalpak
    May 27, 2014 at 23:09
  • @tymeJV: My AngularJS app is a booking system to be inserted in to the clients already existing website. I control the order within my app but have no control over the clients setup. Hope that makes it clearer?
    – Jarrod
    May 27, 2014 at 23:25

4 Answers 4

12

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;
}
0
2

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>
1
  • Thank you. Works like a charm.
    – Pataar
    Apr 11, 2016 at 12:58
1

I think if you load jquery library after the angular is initialised it will use jqlite. You can try changing the order in which are files are loaded and initialised.

Also from angular version 1.4.x you can disable loading of jquery using ng-jq where your angular root application is declared.

You can refer to ng-jq documentation here https://code.angularjs.org/1.4.5/docs/api/ng/directive/ngJq

0

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.

1
  • 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, 2014 at 23:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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