In order to let angular.element point to jQuery instead of jQLite, one needs to load jQuery before Angular in the page head.
However, for performance reasons(especially on mobile devices) it would be nice if it was possible to load jQuery after AngularJS is loaded. The jQuery library is relatively large, so letting the 'above the fold content' depend on jQuery lite and let jQuery load asynchronously after Angular, would provide an increase in performance.
I think it would be possible if Angular would expose it's bindJquery function and it's JQLitePrototype object.
Anyone any ideas how to do this without touching the Angular core?
Yes, AngularJS can use jQuery if it's present in your app when the application is being bootstrapped.
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.
No, it is not a good idea. You are using jQuery coding practices in an Angular app and this will cause you headaches - for once because those practices go against the Angular spirit, and also because you won't reap the benefits of Angular.
jQuery is easier to understand than Angular that is said to have a learning curve. Everything from DOM manipulation, Ajax calls, to delegating events and adding elements, jQuery makes it quite easy to get a handle on.
You can manually extend JQLite prototype after jQuery is loaded:
angular.extend(angular.element.prototype, jQuery.fn);
However since this is not designed usage of jQuery with Angular it might bring unwanted problems. But if your only intention is to extend angular.element with some useful jQuery methods, this should be fine.
Check the demo below to see how jQuery's methods are available in angular.element
even though jQuery is loaded after Angular.
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