The Cordova framework (pretty much synonymous with PhoneGap) puts an HTML5 “wrapper” over the native code (for ios or Android), working toward the goal of write-once-run-anywhere code.   Instead of writing in Objective C or Java, most of the code is written in HTML5 and Javascript.  I’ve been using AngularJS on a couple of other projects, so naturally I wondered if anyone had applied it to mobile/Cordova/PhoneGap applications.  Sure enough I found Ionic, a framework composed of AngularJS, custom Angular directives, and some styles which make things go together nicely.

Part 1 will get you up and running with Cordova, from scratch.
Part 2 adds AngularJS and Ionic to the mix
Part 3 running your app

My first task was to set up my environment.  Sure, all the tools were out there, but I spent more time piecing things together than I would have liked.  It would have helped me if there had been a Getting Started guide for a first-time mobile developer.   So here goes…

I use a Windows 8 machine, so it’s fortunate that I’m designing primarily an Android app.  It seems that a Mac is the best choice because you can develop to any mobile platform on it.  But I’ll try to keep my development software platform agnostic so that an ios dev could grab the code and use it.

My approach was to get first get Cordova set up and tested, and then apply the AngularJS scaffolding.

Generic Cordova Dev Environment Setup

Install

• node.js – this includes the npm package manager, and is the gateway to a world of open source tools and packages
• Java JDK  – don’t laugh, but this was not on my machine yet.  Hey, it’s a new Windows 8!  Make sure to download the Java Development Kit (JDK).  The JRE does not have development tools.
• Apache ANT – A scripitng framework http://ant.apache.org/bindownload.cgi
• Android Developer SDK – Lower-level stuff for Android.  http://developer.android.com/sdk/
• Cordova – Now you’ll start using the package manager you installed with node.js.  Open up a command line and run:

  npm install -g cordova

Settings

Open up your Computer Properties/Advanced System Settings, then click on Environment Variables.  Add the following variables (substitute your own for mine):

ANT_HOME = C:\bin\apache-ant-1.9.3
ANDROID_HOME = C:\bin\adt-bundle\sdk
JAVA_HOME = C:\Program Files\Java\jdk1.7.0_51

Then add the following line to the end of the path:

%JAVA_HOME%\bin;%ANT_HOME%\bin;cordo%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

Creating a project

If I haven’t left anything out above (and if you haven’t), you should be ready to use the above tools.   If you’re confident and want to go straight to the Angular/Ionic Setup, go for it.  Otherwise open a command line and type the following:

> cordova create hello com.example.hello "HelloWorld"
> cd hello
> cordova platform add android
> cordova build

This will create a boilerplate project, a very simple hello world application.  The next commands modify the project by adding android support to it, and build it.

A word about IDE’s

The Android Developer SDK comes with the Eclipse editor.  This works very nicely for Java, but (because we’ll be using Cordova) we’re going to be working mostly with HTML and Javascript.  I chose JetBrains WebStorm, because (despite being a commercial product) it works well for HTML and JavaScript, and extends nicely to AngularJS.  Full featured and inexpensive.

Of course I eventually expect the need for a full featured Java editor later in the game.  For that I plan to go back to Eclipse.