Forward Thinking

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…