Angular.js with jQuery Mobile

Question

I'm doing an app with jQuery Mobile and Angular.js. Cause we have some issues using both libs, exists an adapter that do "teh job".

So I'm trying using routeProvider to route my pages. But I still can't render pages using this.

Here plunker if u can help show me the way.

http://plnkr.co/edit/DNGiT83csWMmfYnHXOop

Thanks in advance!

Answer 1

I ran into a similar problem and maybe what I learned might help you. It comes down to the differences in the way angular and jquery go from one page/section to another (routing).

First, the basics: angular routes by inserting a chunk of html into your view, then on whatever click/action/etc, removing that html from the view and adding a new chunk of html. Essentially you're on the same page all the time; it's just the included html is changing. In contrast, think of jqm as loading up all the html into the same page, with those html chunks as divs. Instead of removing html chunks and replacing them (via routing), it's just turning divs off and on. (There are multi-page jqm apps but SPAs really highlight the differences.)

My suggestion is to pick which set of features you really want: angular's minimalistic loading (only as you need it), or jqm's flashy transitions and other built-in features. If you've got a massive app with a lot of data on every page, you might want to bypass jqm and use angular alone, and see what you can do with angular's new animate functions. It'll mean you'll need to build (via CSS or javascript) duplicates of the jqm features -- and from what I've seen, you can get close but it won't quite be as pleasantly streamlined as jqm.

If the jqm built-in features are what you really want, then skip using angular's routing. It'll just introduce all kinds of complications, anyway. Set up your pages using jqm's pattern, and use angular only where you're dealing with data.

What I've found works best is to treat it like it's a jqm app overall, and only add angular into the sections where you need it. After all, you don't have to add ng-app at the html line; you can add it into a single div as needed. Since jqm is happiest as a system-wide kind of thing, while angular is just fine being confined to pieces within a system, so far I've found jqm-whole and angular-parts to be the simplest way to get the best of both worlds.