Build mobile apps faster with Ionic

Install Ionic

First, install Node.js 4 (Node 5 does not work at the moment!). Then, install the latest Cordova and Ionic command-line tools.

$ npm install -g cordova ionic

Start a project

run cmd as Administrator

ionic start myApp tabs

View in Browser

$ cd myApp

$ ionic serve

Run it as iOS App

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

Run it as Android App
- require: Please install Android target: "android-23"

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

ionic cordova run

Ionic Project Structure

├── bower.json     // bower dependencies
├── config.xml     // cordova configuration
├── gulpfile.js    // gulp tasks
├── hooks          // custom cordova hooks to execute on specific commands
├── ionic.project  // ionic configuration
├── package.json   // node dependencies
├── platforms      // iOS/Android specific builds will reside here
├── plugins        // where your cordova/ionic plugins will be installed
├── scss           // scss code, which will output to www/css/
└── www            // application - JS code and libs, CSS, images, etc.

Ionic Template in Visual Studio

1. Install Apache Cordova
2. In Visual Studio, choose File, New, Project From Existing Code.

Install Cordova
npm install -g cordova

Install SQL Lite DB
ionic plugin add cordova-sqlite-storage

Opted out of Telemetry
cordova telemetry

Ionic in Visual Studio Code

System Variables
- Gradle_home
- Android_home


1. 'ionic' is not recognized as an internal or external command

If you're on Windows 10 (and possibly Vista/8/8.1) you need to run cmd.exe as an administrator. Now when you run the commands below, your environment settings will be made.

npm install -g cordova ionic

2. No installed build tools found. Please install the Android build tools version 19.1.0 or higher.

3. Cannot set up guest memory 'android_arm': Invalid argument

Reduced RAM size to 512 MB and it works....

Reference

1. http://ionicframework.com/getting-started/
2. http://stackoverflow.com/questions/29331276/ionic-framework-ionic-is-not-recognized-as-an-internal-or-external-command
3. https://taco.visualstudio.com/en-us/docs/tutorial-ionic/
4. http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html
5. https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/first-steps/migrate-to-vs2015?view=toolsforcordova-2015