In this tutorial, you will learn, how to create simple mobile application using Ionic Framework CLI(command line interface).

Ionic offers ready-to-use templates. You can use those templates or start fresh on your own.

List of Templates

  1. Tabs
  2. Side Menu
  3. Maps

Open the terminal in Ubuntu or CentOS 7 (command prompt in Windows), type the below command to create the Ionic project.

To start a blank app


ionic start appname blank

To start sidemenu app


ionic start appname sidemenu

To start tabs app


ionic start appname tabs

To start maps app


ionic start appname maps

Here appname is user desired name. You can give any name to your project.

It will ask you to use account of Ionic. However, it’s not necessary. You can skip by giving 'no' in terminal. Then go to your project using


cd appname

Then type


ionic serve --lab

ionic serve command used to preview how the app will appear in your device.

The ionic serve will display both iOS and Android preview.

Here I created a map application and look at the below screenshot.

map-apps

The ionic serve command acts as live reload. What ever you change in the html or js or css file, that will be reflected in the preview without refreshing the page.

To terminate live reload press control+c.

If you want to generate this application as apk then use the below commands


ionic platform add android

ionic build android

That's all. The location of the apk will be displayed in the terminal. Go to that folder and get your apk. You can not publish this apk to Google Play Store. However, you can install this apk in your Android phone by giving permission in your Android phone(enable Settings->Security->Install from Unknown Source).

To publish your application in Play Store, you need to do some additional work, which will be explained at the end of the course.

Hello World App

In every programming language, the first example is hello world program. Let's see how to create a hello world program in Ionic.

Create a blank application.


ionic start app1 blank

Open the app1 folder and go to www directory.

You can find index.html file in that www folder.

Open index.html file and type hello world inside ion-content tag in the body of your html file.

helloworld-ionic