Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading jQuery after AngularJS (instead of before)

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?

like image 794
tlewis Avatar asked Jan 05 '15 10:01

tlewis


People also ask

Can we use AngularJS and jQuery together?

Yes, AngularJS can use jQuery if it's present in your app when the application is being bootstrapped.

Why jQuery should not be used with Angular?

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.

Is it a good or bad practice to use AngularJS together with jQuery?

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.

Is AngularJS better than jQuery?

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.


1 Answers

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.

Demo: http://plnkr.co/edit/fo70VtmgBCQDU9RWGGVF?p=preview

like image 70
dfsq Avatar answered Oct 07 '22 08:10

dfsq