AngularJS/Cordova mobile app Dev Setup – Part 2

In AngularJS/Cordova mobile app Dev Setup – Part 1 we got things rolling.  We now have node.js, Cordova and associated tools in our environment.  Now to apply AngularJS and Ionic.

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

Ionic is a package of components including AngularJS, custom Angular directives, and some styles which give our HTML5 nice “mobile” look.   Out of the box, I found that my app was fairly true to the “iphone look”. Although I’m writing an Android application, this app might eventually be used for iPhone, so this suits me fine.

Ionic

Ionic is very simple to get started.  We’re just going to assume that you followed the steps in part 1.

  • Install Ionic
  • npm install -g ionic
  • Create an Ionic app
    ionic start myApp

Now you’re ready to run the sample code.   This can be done using Cordova to deploy to the emulator or your phone.  This code is also simple enough that you can also run it in a browser!

You can use Express or another lightweight brower to do this, by opening up the www directory [TODO: more detail].

Going the next step

You now have a start on your project, but there are still some tools that you will probably need.   I ended up adding these tools shortly after creating it, so here they are:

  • Create a package.json file.
  • Grunt, a scripting framework for node.js.  First you’ll need the command line (installed gloablly), and then install to the project (saving to json file)
    npm install -g grunt-cli
    npm install grunt --save-dev
  • Bower, a packaging manager, similar to npm but intended to manage external tools used in your app, rather than in your dev environment.
     npm install -g bower

Many bower packages require you to install git as well (for example, angular-google-maps).  When  installing for windows, I selected the “add to path” option.  This makes it possible to run bower from a standard MS-DOScommand line (you don’t have to use git/bash).

Enjoy Angular

Now it’s time to poke around with Angular and add some functionality.  Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *