Use cases for using AngularJS and JQuery

Question

I'm a JQuery programmer looking to get into using AngularJS for my next project. After reading this excellent answer about how to "think in Angular" instead of including and using JQuery, I wonder what good use cases exist for using JQuery + Angular. I'd like to bring some small amount of familiarity to my Angular programming.

Quoting from the Stackoverflow post:

"The bottom line is this: when solutioning, first "think in AngularJS"; if you can't think of a solution, ask the community; if after all of that there is no easy solution, then feel free to reach for the jQuery"

When should I reach for JQuery?

Answer 1

AngularJS is a complex framework with a moderate to steep learning curve. JQuery is not a framework but a library. If you are looking to build a single page app especially a CRUD app then AngularJS is a good fit as it will offer two way data binding, routing (important for single page apps), plus many other features out the box.

It uses jQlite a subset of jQuery, but it is opinionated about how apps are built, this means you need a solid understanding of how it works, you will need to understand controllers, services and directives and why you should only update the DOM in directives.

Single page apps can be done using jQuery alone but you will have to manage the framework side of things yourself.

If you include jQuery before AngularJS it will substituted for jQlite, to get to grips with the fundamentals, and thus arm yourself with knowledge to make decisions on its use, have a look at these excellent videos at egghead.io.

When to reach for jQuery

You reach for jQuery when you cannot do something the Angular way, this is often when you are at the boundary of the framework.

Examples:

An example of this is Angular doesn't have a way to disable items in a select element. You would reach for jQuery here to listen for a change event on the select and manipulate the UI yourself from a directive. See update below.

If you are using a third party library for example, you may need to trigger an event using jQuery and pick it up in the third party code or elsewhere. Here you will find jQuery or something like pubsub invaluable.

UPDATE

Regarding the routing capabilities, I strongly recommend the excellent UI-Router instead of the out of the box router.

UPDATE v2

Angular 1.4 now has support for disabling options in a select element.