• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Android » Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu

Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu

By Sigit Prasetya Nugroho ∙ February 21, 2016 ∙ Android ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

Seegatesite.com – 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.

Table of Contents

    • 0.1 What the Ionic Framework?
  • 1 Ionic Framework installation on Windows and Ubuntu
    • 1.1 Thus article about Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu, hope useful 🙂

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.

Related Articles :

  • Easily Download and Install Pokemon Go on Android in Unregistered Country
  • Tutorial How to Create Download File From Url On Ionic Framework
  • How to Create Android Image Gallery with Ionic Framework and Web Services

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 https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

Node.js V5

curl -sL https://deb.nodesource.com/setup_5.x | 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 🙂

Another Android Related Post :

  • Easily Download and Install Pokemon Go on Android in Unregistered Country
  • Tutorial How to Create Download File From Url On Ionic Framework
  • How to Create Android Image Gallery with Ionic Framework and Web Services
  • Android Tutorial – Display Image To Android Gridview From Url Using Picasso
  • Android Tutorial – Step By Step Learning Android Sqlite Database for Beginner
  • Android Tutorial – Using AsyncTask for Android With Simple Example for Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

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

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com