Using Angular with jQuery

When familiarizing oneself with AngularJS, its on some occasions a forthcoming thought if this is all you need since they do exclude each other in many ways, however they have been build with two very different perspectives on application design… jQuery is basically a library focused on DOM querying and manipulation, AngularJS is an application framework and micro-architecture…

That they however are not entirely mutually exclusive becomes evident when diving in to the angular.element method… as it turns out Angular is actually using jQuery (or of jQuery is not loaded, an embedded version referred to as jqLite).

angular.element wraps a raw DOM element or HTML string as a jQuery element. angular.element can be either an alias for jQuery function, if jQuery is available, or a function that wraps the element or string in Angular’s jQuery lite implementation (commonly referred to as jqLite).

Real jQuery always takes precedence over jqLite, provided it was loaded before DOMContentLoaded event fired.

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM. jqLite implements only the most commonly needed functionality within a very small footprint, so only a subset of the jQuery API – methods, arguments and invocation styles – are supported.

Note: All element references in Angular are always wrapped with jQuery or jqLite; they are never raw DOM references.

So, if you are using Angular as your application framework and you see a need to use jQuery for one or more of the many things jQuery is absolutely amazing and almost second to none, then don’t hesitate to do so, they are both great system citizens and work great as peers in your applications…

6 thoughts on “Using Angular with jQuery

    1. No. Take a look at the source for angular.element – it’s a very DOM-focused slimmed-down chunk of jquery with none of the underpinnings necessary for most plugins to work. You might accidentally have some success with DOM-focused plugins, but it wouldn’t be worth the effort – just use jquery.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s