32

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?

Community
  • 1
  • 1
arcdegree
  • 2,710
  • 3
  • 27
  • 38

2 Answers2

15

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.

Neil
  • 7,861
  • 4
  • 53
  • 74
14

I think the key words in the quote of your question are "*if after all that there is no easy solution*"

I wonder what good use cases exist for using JQuery + Angular.

Use Case: A project I'm working on uses Zurb Foundation's "reveal" component for a modal window, which I particularly like. It compliments the app I'm working on well. Sure there is an Angular UI project that features a modal window, but I preferred reveal in this case.

This has a dependency on JQuery. User blesh answered with great ideas on how to incorporate this the AngularJS way here.

After some research, if you conclude that you can do something a lot easier in JQuery, then do it, but be sure to integrate the component the AngularJS way.

That is my take on it anyway.

Community
  • 1
  • 1
Coder1
  • 13,139
  • 15
  • 59
  • 89
  • +1 There is indeed an Angular UI modal in the [Bootstrap](http://angular-ui.github.com/bootstrap) project. But no solution is right for all cases. Existing components are often a good reason to use jQuery - if it's not relatively easy, why reinvent the wheel? I merely advocate that we think carefully about our use cases - and as you said, when we *do* use jQuery, we must be sure to integrate it correctly. – Josh David Miller Feb 26 '13 at 00:43