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
- Side Menu
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
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.
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.