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.
- 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
as well as Yeoman
1 2 3 4
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
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.
Addtionally I would like to add the Compass plugin to my project.
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
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
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
That’s it. All your different builds are available under /platforms