Hybrid Application Development using Ionic, AngularJs, Cordova – Part 1
In this series of articles, I will try to show how to use Ionic (a HTML5 mobile app development framework targeted at building hybrid mobile apps) and I will create a simple hybrid application using the Ionic framework.
In this part of article we will go through the installation part to make our environment ready for the development.
Download and install Nodejs which will help us in our next steps, npm comes with nodejs which is a kind of package manager. If you want to learn more about nodejs probably this wonderful article will help you most. If you would like to see how to install nodejs, please follow this article for the guidance.
Now download and install Git for Windows.
Java JDK (For Android)
In the next step 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
Apache Ant (For Android)
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:
Android SDK (For Android)
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]\sdk directory (for example
Next, update your PATH to include the
platform-tools/ folder in that folder. So, using ANDROID_HOME, you would add both
Install Apache Cordova
Use npm to install Apache Cordova with the following command in the command prompt.
npm install -g cordova
$ sudo npm install -g cordova
the -g option in the command installs it globally, which means you can access it from any location of your computer.
Now install Ionic with this command
npm install -g ionic
$ sudo npm install -g ionic
All right, so everything is setup. In the next part of the tutorial I will create a an application using Ionic.