Laura Diane Hamilton

Technical Product Manager at Groupon

Resumé

Creating a Mobile App with Ionic

Ionic is a new framework, built with Sass and optimized for Angular.js, for building mobile apps. Ionic, a free and open source platform, includes mobile-optimized HTML, CSS, and JavaScript components. It's designed for building modern-looking, highly-interactive apps.

Screenshot taken from IonicFramework.com

(That's not the Yahoo! weather app—just inspired by the Yahoo! weather app.)

It runs nicely on iOS, Android, and as a web application.

Here is a tutorial illustrating how to get started with Ionic.

First, install the necessary node modules: sudo npm install -g cordova ionic

Next, initialize your project, either from a template or a new blank project. If you want to start a blank project, use this command: ionic start myApp blank

To start a project from a template, use one of these two commands (depending on which template you want to use): ionic start myApp tabs ionic start myApp sidemenu

Change to your app directory: cd myApp

If you're on a mac, I am told you can build an ios version with these commands. However, I am not on a mac, so I didn't test this. But I got this from the ionic website so it probably works. ionic platform add ios ionic build ios ionic emulate ios

If you are not on a mac, you can start your app in your browser with this command (run from inside the www/ directory): python -m SimpleHTTPServer

Then if you go to http://localhost:8000 you should see your new ionic app! That's all there is to it.

Here is a good tutorial video from Ionic:

Video credit: Ionic on Youtube

Lauradhamilton.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.