current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 6 down vote favorite
3

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?

share|improve this question
1  
There is no need to have jQuery, you can use angular+native/javascript code to work and jqLite is quite capable of doing things. – Jai Jan 5 '15 at 10:08
    
Yes, I agree(except for the fact that I miss class selectors in 'find'), but I need to support a lot of existing jQuery code. – tlewis Jan 5 '15 at 10:44
up vote 3 down vote

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

share|improve this answer
    
Thanks, good suggestion. However, angular adds the following as well: extend(jQuery.fn, { scope: JQLitePrototype.scope, isolateScope: JQLitePrototype.isolateScope, controller: JQLitePrototype.controller, injector: JQLitePrototype.injector, inheritedData: JQLitePrototype.inheritedData }); – tlewis Jan 5 '15 at 10:47
    
It should be fine. JQLite will consist everything needed like scope, controller, etc. All above code does is basically adds additional methods to the prototype without affecting existing JQLite prototype. – dfsq Jan 5 '15 at 10:50
    
Ah of course, didn't think of that:) Thanks a lot! – tlewis Jan 5 '15 at 11:30
    
Any idea what kind of problems one could possibly expect with this solution? – tlewis Jan 5 '15 at 15:32
    
Hard to say. DOM methods should definetely be fine. I'm not sure yet maybe there is something else that may be affected. But can't see it now. – dfsq Jan 5 '15 at 15:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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