How to Install Ionic Framework on Windows 10 using Node JS

www.colorwhistle.com

What is ionic?

Ionic is a powerful HTML5 SDK that allow you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript. You can build android, ios and windowsphone apps at a single time.

How to Install it on Windows 10?

1. You Need Node JS installed on your windows

Download node js on their website nodejs.org. Choose the version what you want (i recommended the LTS one, because it have Long Term Supports) and compatible with your windows version x64 or x86.

Download Node JS v4.2.6 LTS | akbaraji.blogspot.com

After download, you can install nodejs like other normal software installation on windows 10.

Install Node js on windows 8 | akbar aji

2.  Install apache cordova

First, we will go and install the latest version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app. Install cordova is simple just open your CMD prompt and insert code below.

npm install -g cordova

if you success your cmd should look like this.

Install Apache Cordova on windows 8 | Akbar Aji

3. 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

This is what you get after submitting that code.

Install ionic framework on windows 8 | Akbar Aji

 

4. Build Your First Apps

Ionic  have been installed, lets start our first journey by build an apps.

ionic start myFirstApps tabs


If ionic success make your apps, then go to folder where your apps in, build it and then run it on the emulator. Im using windowsphone in this example. you can choose diferent platform its up to your devices. (if you want android change "wp8" to "android" or "ios" if you want iOS).

cd myFirstApps
ionic platform add wp8
ionic build wp8
ionic emulate wp8

Adding windowsphone platform using 'ionic platform add wp8'. Your CMD should show this after the execution.


 
Now we build the apps, to get ready.


After the apps succesfully builded, we can run or emulate the apss. And your apps will look like this picture below.


WELL DONE! You have succesfully build your very first appss using ionic. If you want to learn more about ionic you can visit their website in ionicframework.com.

0 comments:

Post a Comment

Leave Your Message Here...