WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Installation


This chapter will show you how to start with Ionic Framework. The following table contains the list of components needed to start with Ionic.

Sr.No. Software & Description 1

NodeJS

This is the base platform needed to create Mobile Apps using Ionic. You can find detail on the NodeJS installation in our NodeJS Environment Setup. Make sure you also install npm while installing NodeJS.

2

Android SDK

If you are going to work on a Windows platform and are developing your apps for the Android platform, then you should have Android SDK setup on your machine. The following link has detailed information on the Android Environment Setup.

3

XCode

If you are going to work on the Mac platform and are developing your apps for the iOS platform, then you should have XCode setup on your machine. The following link has detailed information on the iOS Environment Setup.

4

cordova and Ionic

These are the main SDKs which is needed to start working with Ionic. This chapter explains how to setup Ionic in simple step assuming you already have the required setup as explained in the table above.

Installing Cordova and Ionic

We will use the Windows command prompt for this tutorial. The same steps can be applied to the OSX terminal.
C:\Users\Username> npm install -g cordova ionic

Creating Apps

While creating apps in Ionic, you can choose from the following three options to start with
  • Tabs App
  • Blank App
  • Side menu app
In your command window, open the folder where you want to create the app and try one of the options mentioned below.

Tabs App

If you want to use the Ionic tabs template, the app will be built with the tab menu, header and a couple of useful screens and functionalities. This is the default Ionic template. Open your command window and choose where you want to create your app.
C:\Users\Username> cd Desktop
This command will change the working directory. The app will be created on the Desktop.
C:\Users\Username\Desktop> ionic start myApp tabs
The next step is to build the app. If you have building errors after running the following command
C:\Users\Username\Desktop\myApp> ionic build android

You need there is no device connected. Android Default Emulator is slow, so I suggest you to install Genymotion or some other popular Android Emulator.

C:\Users\Username\Desktop\myApp> ionic run android

Blank App

If you want to start from the scratch, you can install the Ionic blank template. We will use the same steps that have been explained above with the addition of ionic start myApp blank instead of ionic start myApp tabs