Lets walkthrough the process of getting a Yeoman based AngularJS application up and running inside Cordova/PhoneGap environment on an Android device. While we will cover Android only, the same general steps should apply for an iOS device as well, and the Yeoman project should be able to be shared between the different Cordova projects.

The goal of this will be to have a functional Yeoman, Angular, Cordova application that can be built and deployed with the Android build process and still have all the JavaScript tools available during development time to aid in the process (Grunt, Yo, Karma, etc). This will let us build client side HTML5/JavaScript apps with traditional tools and easily deploy those applications to any Cordova compatible device.

Prerequisites

Yo! Setup

The first step is to set up our initial project structure and Yeoman project base to use as our HTML asset directory.

npm install -g grunt-cli yo bower generator-angular

For full details of Yeoman and it’s setup go to their site at http://yeoman.io/Choose a directory to make your project in and make a few empty directories to follow along with:

mkdir -p ang-droid/ang-droid-frontend;
cd ang-droid/ang-droid-frontend

Now we can finally get our project going, run the following and accept all the defaults when it asks you a bunch of questions:

yo angular; bower install --dev;

The above will generate the default Yeoman Angular directory structure and base set of files, as well running Bower to install all the needed JavaScript components. To run a quick sanity check you should be able to run:

  grunt

and have the tests run and execute (assuming you have Chrome installed) and the ‘dist’ directory should appear as well with the bootstrapped application. So far this has all been pretty basic Yeoman setup work, now we can get this running on our Android device and built along with our standard Android build process. Currently this is setup through the traditional Ant approach, but configuring the newer Gradle build would be even simpler.

To continue reading and finish this article, click here...