jqLite and angular.element

AngularJS comes bundled with a lite implementation of jQuery referred to as jqLite. For Angular’s purposes, this is effectively jQuery, albeit an extremely gutted one. The creators of Angular believe the jqLite API to be sufficient for nearly every application if utilized properly.

The Angular wiki puts it quite nicely:

$element === angular.element() === jQuery() === $() Read through the Angular docs on jqLite and angular.element.

Keep off the controller!

Angular directives are broad and powerful tools provided to you, and they should be your go-to DOM interface for both inspection and manipulation. Angular controllers ideally contain the business logic for a single view, and the less they do, the better.

Read this Angular page on common pitfalls for some excellent examples of Angular-flavored DOM manipulation.

When the beast is unavoidable

Of course, jQuery in all its magnificence cannot always be avoided, and so the Angular creators have provided for it to seamlessly integrate into Angular framework when it is loaded before the DOMContentLoaded event fires.

In future versions of AngularJS, the ng-animate directive will become a more prominent feature in the framework, featuring an increased reliance on more modern CSS animations.

Watch this video for a superb example of manipulating the DOM within directives using included jQuery libraries.