AngularJS/Cordova mobile app Dev Setup – Part 1
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
- 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
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:
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
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.