Prevent AngularJs from using jQuery library

Question

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:

"GET http://localhost.dev/angular/js/jquery-1.10.2.js?_=1401232704848 404 (Not Found)"
"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.

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
– Jarrod, Commented 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
– tymeJV, Commented 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
– Jarrod, Commented May 27, 2014 at 23:25

gkalpak · Accepted Answer · 2015-08-03 19:59:48Z

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

edited Aug 3, 2015 at 19:59

answered May 27, 2014 at 23:49

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Sweatte · Accepted Answer · 2015-07-21 17:35:37Z

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>

edited Jul 21, 2015 at 17:35

answered Dec 22, 2014 at 7:35

Paul Sweatte

24.7k7 gold badges131 silver badges270 bronze badges

Comments

deeps · Accepted Answer · 2016-12-06 04:18:45Z

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

answered Dec 6, 2016 at 4:18

deeps

4914 silver badges12 bronze badges

Comments

Tyler McGinnis · Accepted Answer · 2014-05-27 23:32:48Z

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.

answered May 27, 2014 at 23:32

Tyler McGinnis

35.4k16 gold badges75 silver badges79 bronze badges

1 Comment

Jarrod Over a year ago

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.

Collectives™ on Stack Overflow

Prevent AngularJs from using jQuery library

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest