Mobile app development can be done by using various different platform, but here we will talk about IONIC platform.
IONIC provides an open source framework to develop cross platform mobile app. Advantage for using IONIC is common code base for Android & iOS mobile app.
Lets start configuring system to develop IONIC mobile app
We need to setup node & npm to begin with IONIC setup.
To verify node & npm installation, please execute below command in new terminal window
$ npm --version
on windows, open command prompt and execute same commands.
If node & npm not exist, please navigate here, to download latest package for respective OS.
Once done, execute below command, to install IONIC framework.
npm install -g ionic
Please note, -g denotes Global, and above command needs admin permission to complete. On Windows machine, open command prompt with “Admin permission” on mac use “sudo”. To get more information for configuration, visit here
Time to create new app
IONIC provide three most common starter template to create new app, a)Blank, b)tabs and c) SideMenu
We will try to create new tab application
ionic start myFirstApp tabs
Once app is created, navigate to folder, you should be able to see below folder structure
- ./src/index.html : This is entry point for application,
- /src/app/app.html : This is main template for app. ion-nav component sitting here to act as main component area.
- /scr/app/app/content.ts : First component gets loaded in app.
- config.xml : Holding configuration related setting including cordova etc.
- package.json : Holding all in-app dependencies
Run Sample App
Time to run and see the app
This will open browser typically with “localhost:8200”. Few more options available with ionic serve like -lab, -local etc, to get more information visit here
Now since, we are well aware about ionic project creation, structure and making it run over browser, so now lets add more pages in app.
Adding New Page
All new pages can be added under “./src/pages”, you must have observed, pages are residing into own folder, and every specific page folder having three files :
Its always helpful to keep this pattern, its easily manageable. For more information visit here
Hope this helps to begin with IONIC web app development.