Build a Cordova App With AngularJS

Initially I used to develop my iOS applications natively in Objective C. However since I am not doing that on a daily basis, I kind of lost track of newer features and got tired searching through the API to make my way. Luckily I am working with web technology on a daily basis and even more luckily there is Apache Cordova (former Phonegap) for quite a while around.

To bootstrap my new application I quickly started to look around what framework would be best to use. My choice was AngularJS, for no particular reason other then that I wanted to try how it will work on Cordova.

I will give you a step by step guidance how to set up the environment and bootstrap a new application for Cordova. I will do that with AngularJS and Yeoman though all of this steps can easily done for Ember, Backbone etc. Just use the appropriate Yeoman Generator to use a different framework.

Requirements

• Node.js
• For iOS: XCode and Command Line Tools
• For Android: Android SDK, Eclipse + ADT Plugin

The node package manager will help us to install Cordova globally through the shell

1

npm install -g cordova

as well as Yeoman

1
2
3
4

npm install -g yeoman

// and the AngularJS generator for Yeoman
npm install -g generator-angular

On Mac OSX and Unix you have to execute this with root permissions. Yeoman will also install Grunt and Bower for you.

Now you are ready to create a new cordova project, simply navigate to your workspace folder and execute

1

cordova create kitchensink io.visiongeist.kitchensink "KitchenSinkApp"

This will create your new Cordova app under /kitchensink. You should see a structure like that

For your development you will mainly focus what goes under “www” and “platforms”. Let’s start adding target platforms. I would like to have my KitchenSinkApp on iOS and Android.

1
2

cordova platform add ios
cordova platform add android

Addtionally I would like to add the Compass plugin to my project.

1

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

Eventually the project is ready to be combined with the web application. We create a new folder in the project and let Yeoman bootstrap an AngularJS app for us.

1
2
3
4
5

// create a new folder
mkdir webapp && cd webapp

// bootstrap the application
yo angular kitchensink

Follow the dialog to create a new Angular project structure and have a look at the Angular Generator, it provides you plenty of useful commands to add views, controllers, services etc.

I recommend you not to directly create an Angular project in the /www folder even though it would work. Having all depending node modules in there will cause a massive application size and takes lots of compiling time.

To build The Angular project use the Grunt configuration given by Yeoman.

1
2
3
4
5

// to build
grunt

// and for a preview
grunt serve

This will generate a build output in your webapp folder under /dist. In order to integrate the files into your Cordova project you will either need to copy the contents of this folder to /www. You may do that manually, change the grunt script or build a shell script, I leave that up to you.

Now navigate back to your Cordova app and execute the build command to create or update the project.

1
2
3
4
5

// to build all platforms
cordova build

// or for a specific platform
cordova build ios

That’s it. All your different builds are available under /platforms