8

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?

Improve this question
2
  • 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. Commented Jan 5, 2015 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. Commented Jan 5, 2015 at 10:44

1 Answer 1

Reset to default
3

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

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

5 Comments

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 });
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.
Any idea what kind of problems one could possibly expect with this solution?
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.
When i apply this solution i got "angular.js:13920 TypeError: a.parent(...).inheritedData is not a function". How can i solve it?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.