Menu
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.
395
Does AngularJS use the jQuery library? Yes, AngularJS can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, AngularJS falls back to its own implementation of the subset of jQuery that we call jQLite.
You can use JQuery together with AngularJS. AngularJS also have a lightweight version JQLite which contains all the JQuery functionality the AngularJS project needs.
Selectors and events are usually solved by libraries like React and Angular, so you don't need jQuery to help with browser compability and API differences.
jQuery is a Javascript-based library. It is a Typescript-based, front-end development framework. It is used for DOM manipulation. It is used for creating single-page applications.
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;
}
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>
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
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
