Native Web App with PhoneGap, JQuery Mobile and AngularJS?

Question

I would like to develop a advanced web app for android and iOS. I tries some basics with JQuery Mobile and Phonegap and now I am looking for a good structured web application javascript framework. I found angular JS from google. Does anybody have experience with these 3 technologies combinated? Can this good work together?

Thanks for help!

Answer 1

Although I haven't played around with PhoneGap too much yet, I have used angularjs in conjunction with Apache Cordova (which powers PhoneGap).

Here is a really great article, which helped me to get started:

The Definitive Guide to Angular on Mobile

Also, the last few days I've been playing around with Intel's new XDK and it is really helpful for making this type of development a bit less cumbersome (or so it seems so far).

edit

I've recently been using the Ionic framework and it is fantastic. I like it enough that I decided to come back here and add a link to it since it brings Cordova and Angular together perfectly.

Ionic Framework

Answer 2

I would start with this example that uses phonegap, angularjs and topcoat:

http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/

Answer 3

I know this question was asked sometime back, just answering as this could help anyone bumping into this thread.

Your life would be much easier if you use http://ionicframework.com/ . It's still in its early stages. But it nicely gel in with Cordova and AngularJS and allows you to build apps fast. This also provides bootstrap like predefined css, and you can play with its SASS mixins and build your app according to your branding.

Personally, I would stay away from jQuery Mobile. Just too heavy for my linking

Answer 4

First let me tell you that this is a mistake, a very big one.

First jQuery Mobile was never made with MVC in mind. I'm talking about MVC because AngularJS uses MV-Whatever pattern.

jQuery Mobile has its own routing solution (page handling) and it will not work if any other MVC frameworks is used (BackboneJS or AngularJS). You can turn jQuery Mobile routing (you will need to turn AJAX page handling) but then you will loose page transitions.

If you want something similar you should check Kendo UI . It is a commercial product, but it has a non-commercial version which is way better then jQuery Mobile. It is similar to jQuery Mobile but much faster. It has a built in MVC support or you can use it with AngularJS (if you prefer it).

Or you can abandon jQuery based frameworks all together and choose AngularJS frameworks instead. Before you do anything you need to consider what do you want to do:

1. What do you want to create; mobile site or hybrid mobile application?
2. What do you prefer as a core technology (for example: AngularJS, jQuery, vanilla JavaScript)

If you are trying to build a mobile website then AngularUI or AngularStrap are good choices. No matter which one you decide to use it will be a mix of two beloved and heavily used frameworks: AngularJS and Bootstrap

Just be careful, AngularJS is not jQuery, it is not something you can learn properly in few days. If you never worked with it, spend some time learning basics.

On the other hand, if you are working on hybrid mobile application you should go the other way. You will need to use frameworks specially made for hybrid mobile development. Currently, two best-known frameworks are Ionic Framework and Onsen UI.

They are similar in nature, basically you will need to decide which one is best suited for you, read more about them here: Ionic vs OnsenUI