Installing IONIC On Windows

In this article, we are going to install ionic and all its dependencies, in the last articles we got familiar with ionic framework. We have used Visual Studio Code to manage the code and used some directives; as we know ionic is a HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code. Ionic Framework official website states,

"Ionic apps aren’t meant to be run in a mobile browser app like Chrome or Safari, but rather the low-level browser shell like iOS’s UIWebView or Android’s WebView, which are wrapped by tools like Cordova/PhoneGap."

Now, we are going to walk through the process of downloading Ionic and installing all necessary dependencies for development. We can develop Ionic apps on any operating system like Mac OS X, Linux, and Windows. Because we 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.

Install Git

We are going to install Git and will be executing any commands in Git Bash.

After complete install, it will launch Git Bash,

If it is not launching default, then we can also open it from Start, All Programs, Git, then Git Bash

Installing Cordova

Now we will 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. Cordova command-line runs on Node.js and is available on NPM.

So first we need to install Node.js,

After completing the install of Node.js restart Git Bash and install Cordova.Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform.

$ npm install –g cordova

We are developing for Android and have to make sure we have the following installed and set up.

• Java JDK
• Apache Ant
• Android SDK

Install Java JDK

Install the most recent Java JDK. And creating an environment variable for JAVA_HOME pointing to the root folder where the Java JDK was installed. So, if we 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

Install Apache Ant

Apache Ant's build files are written in XML and they take advantage of being open standard, portable and easy to understand. To install Ant, download zip , 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. Path can be => last path; C:\apache-ant-1.9.6\bin;& then press Ok.

Install Android SDK

Installing the Android SDK is also necessary. The Android SDK provides 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 directory. For android SDK I have installed android studio.

After completing the installation, create ANDROID_HOME environment variable,

Now set ANDROID_HOME to the path.

Now install the ionic, to install it simply run:

$ npm install –g ionic

After completion, Congratulations! We have installed ionic successfully with all it dependencies to create a Cordova project somewhere on the computer for coding our app: on windows platform. In this article we not only focused  on how to install the ionic framework, weeven  made our windows platform ready to make new apps using Cordova and Ionic.

References

Ionic Installation

 

Read more articles on Ionic: 

• Starting With Ionic Mobile App Framework
• Ion-Spinner Directive In Ionic