Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu Introduction and installation ionic framework on windows and ubuntu. Previously I had a lot to discuss creating android apps using android studio, but many obstacles that I have experienced since I was a beginner java programming. To create a quality application, I need a fundamental understanding of java programming. Okay, forget for a moment about the java programming and android studio. Maybe this time scripting programming such as php, html, javascript and angularJS the best for me. For that reason I did not give up to make mobile based application again, and my choice fell on the Ionic Framework.

Ionic Framework Introduction And Installation Tutorial On Windows And Ubuntu

Honestly, I was late for ionic framework technology . But it’s better late than never to learn.

What the Ionic Framework?

Ionic Framework is a framework created by devoted and focused on helping the process of making mobile applications (Hybrid Mobile Apps). Created and maintained by designers and developers who have a passion about web technologies. By leveraging the advantages of AngularJS, Ionic able to make mobile app development process with HTML5 becomes easier and amazing. What is the mobile hybrid? You only need 1x create applications and it can be used in smartphone platforms, such as Android, iOS. Compared with the jQuery framework, Ionic much faster.

Ionic using AngularJS, Node.js, SASS as its engine. As with most mobile framework, Ionic also has components / elements of the standard CSS used for smartphones, such as buttons, lists, cards, forms, range, tabs, and other grid.

AngularJS is a full MVC framework front-end, 100% Javascript, 100% client-side and is compatible with the desktop browser and mobile browser. I never discussed angularJS, because I still learning to use angularJS. I will discuss in other occasions.

That is a brief overview of ionic framework, if you want to try it please follow the next tutorial how to install ionic framework on windows and ubuntu

Ionic Framework installation on Windows and Ubuntu

1. Install Nodejs

For Windows users, make sure you have installed git

Then install the Node Js windows here

and for ubuntu users can use the package manager below

Node.js v4

curl -sL | sudo -E bash -
sudo apt-get install -y nodejs

Node.js V5

curl -sL | sudo -E bash -
sudo apt-get install -y nodejs

To check the installation of Node.js please open a command prompt (windows) or terminal (ubuntu) and type

node -v

How To Check Node Versio Ionic Framework Installation

if there is an error in windows

‘node’ is not recognized as an internal or external command, operable program or batch file.

Please set the Node.js PATH first on the Environment Variables

Select Start > Computer > System Properties > Advanced system settings > Environment Variables > System variables > PATH.

Add “C:\Program Files\nodejs ” without quote to the PATH variable.

and check your npm version

npm -v

if there is an error in windows

‘npm’ is not recognized as an internal or external command, operable program or batch file.

Please add the NPM path on Environment Variables

Add “C:\Program Files\nodejs\node_modules\npm\bin;” without quote to the PATH variable.

NOTE: Whenever you make changes to the PATH, or other environment variables, you must restart or logout for changes .

2. Cordova

Install cordova from command prompt or terminal

npm install -g cordova

And then check the cordova version

cordova -v

3. Java

Don’t forget to install java and setting the java path

Download Java

PATH Setting for Windows

c:\Program Files\Java\yourjdkfolder;

4. Ionic Framework

npm install -g ionic

Possible errors that occur when installing ionic is “cannot find module … ” blablabla… ( ‘bplist-parser’, ‘minimatch’, and etc ). When I installed ionic framework on  windows machine everything was normal. But when i try install ionic framework to my ubuntu PC , i got this problem. We can solve this problem by install module one by one. with this script

npm install -g missing_module _name

But if all modules is missing, maybe you can download my ionic node module here and paste in you node modules folder

5. Create new project ionic framework

Everytime we want to create a new ionic project , we need to execute the following script

ionic start myapp tabs (in the example i created new project with name myapp and with tabs theme)

These script will download all ionic component

Ionic framework provides 3 template to help us create the application (tabs,blank,sidemenu)

Sidemenu Theme Ionic Framework Ionic Framework Introduction And Installation On Windows And Ubuntu Tabs Menu Ionic Framework Ionic Framework Tutorial And Installation Guide

After we create a new ionic project , going to the myapp folder

cd myapp

to run the ionic server, type ionic serve in the folder

Ionic Serve Tutorial How To Installation Ionic Framework For Beginner

6. Testing Applications on Android

To be able to run on smartphones and get the apk file, type

ionic platform add android
ionic build android

Thus article about Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu, hope useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.