Basic of Starts with Ionic Framework Application and Testing

Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like "Bootstrap for Native," but with support for a broad range of common native mobile components, slick animations, and beautiful design.

Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or PhoneGap in order to run as a native app.

Platform notes

Ionic targets iPhone and Android devices (currently). We support iOS 6+, and Android 4.0+ (though 2.3 should work).

If you are on Windows, make sure to download and install Git for Windows and optionally Console2. You will be executing any commands in this guide in the Git Bash or Console2 windows.

First, we will go and install the most recent version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app.

To install Cordova, make sure you have Node.js installed, then run

npm install -g cordova

Follow the Cordova platform guides for Android and iOS to make sure you have everything needed for development on those platforms.

Windows Note With Ionic Application For Android

Windows users developing for Android: You'll want to make sure you have the following installed and set up.

NOTE: Whenever you make changes to the PATH, or any other environment variable, you'll need to restart or open a new tab in your shell program for the PATH change to take effect.

Java JDK

Install the most recent Java JDK (NOT just the JRE).

Next, create an environment variable for JAVA_HOME pointing to the root folder where the Java JDK was installed. So, if you installed the JDK into C:\Program Files\Java\jdk7, set JAVA_HOME to be this path. After that, add the JDK's bin directory to the PATH variable as well. Following the previous assumption, this should be either %JAVA_HOME%\bin or the full path C:\Program Files\Java\jdk7\bin

Apache Ant

To install Ant, download a zip from here, extract it, move the first folder in the zip to a safe place, and update your PATH to include the bin folder in that folder. For example, if you moved the Ant folder to c:/, you'd want to add this to your PATH: C:\apache-ant-1.9.2\bin.

Android SDK

Installing the Android SDK is also necessary. The Android SDK provides you the API libraries and developer tools necessary to build, test, and debug apps for Android.

Cordova requires the ANDROID_HOME environment variable to be set. This should point to the [ANDROID_SDK_DIR]\android-sdk directory (for example c:\android\android-sdk).

Next, update your PATH to include the tools/ and platform-tools/ folder in that folder. So, using ANDROID_HOME, you would add both %ANDROID_HOME%\tools and %ANDROID_HOME%\platform-tools

Install Ionic

Ionic comes with a convenient command line utility to start, build, and package Ionic apps.

To install it, simply run:

npm install -g ionic

Create the project

Now, we need to create a new Cordova project somewhere on the computer for the code for our app:

ionic start demo blank

Here is what the outer structure of your Ionic project will look like:

$ cd demo && ls

├── 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.

Add Platforms

To check available platform execute following command

ionic platform ls

Now, we need to tell ionic that we want to enable the iOS and Android platforms.

ionic platform add android

Test it out

ionic  [run|emulate] <platform> [options]

   [--livereload|-l] .... Live Reload app dev files from the device
   [--consolelogs|-c] ... Print app console logs to Ionic CLI
   [--serverlogs|-s] .... Print dev server logs to Ionic CLI

One of the best features of the CLI is the LiveReload server that gets started when you run ionic serve.

ionic serve

This allows you to develop your app in the browser and have it update instantly when changes are made to any development files.

Ionic App LiveReload Command Examples:

ionic emulate ios --livereload --consolelogs --serverlogs

ionic run android -l -c -s

Run livereload server on localhost after running Ionic serve command

You can switch between addresses with the command ionic address.

ionic address

You'll then get options like this:

Please select which address to use by entering its number from the list below: 1) 10.0.1.7 (en1) 2) localhost

Codepen Starter Templates

It’s the perfect place to share code and play with ideas and concepts in a sandbox. It also provides an ideal environment in which to demonstrate issues that you may find during your development. Until now, taking Codepen demos and moving them into an Ionic project was a bit of a mess. You’d start a new project, copy all the assets from Codepen into their appropriate locations, remove the inline template, go back and make sure you caught that lone semicolon you forgot the first time…

The new feature is dead simple; all you need is a Codepen URL, and you’re good to go.

ionic start myapp http://codepen.io/ionic/pen/hqcju

The command will run its normal process, scaffolding out the project and installing the correct plugins, but it will also include the code from the Codepen. All the JavaScript and CSS will be parsed into their own respective files, and any inline templates will be made into html template files and saved into the templates directory.

Some Common Errors and Solutions

1. Server start error: ReferenceError

In my case I had this error because the command gulp was not accessible in the command line, i had to install gulp globally in order for it to work:

npm install gulp -g