Introduction To Ionic Templates

Ionic Templates

In a previous article, I explained what Ionic is, how we can set up an environment for Ionic, and the Ionic project structure. If you didn’t go through my previous article, please go through it here.

• Ionic Introduction

In this article, we will learn more about Ionic templates. Ionic basically provides three templates for Ionic projects.



Tabs Template

To install a tabs template, run “ionic start Project_name tabs” command. This command create a tabs template for your project.

After downloading and doing the installation process, now, change your directory to your project name and run “ionic serve –l” command.

 

This command opens a window in the browser where you can see two mobile layouts - one for iOS and another for Android.



In iOS, the tabs are located in footer, and in Android device, tabs are located in header. Both the screens show how this application will run on Android and iOS devices.

Ionic, by default, provides these three templates but we can install other templates from GitHub or from other sites too. In this article, we will learn how to install other templates for our project.

Install templates from GitHub

If you want to get more templates from “GitHub”, go to this URL “https://github.com/driftyco/ionic-cli”


Scroll down to get the list of templates to select from.



Click on the name of any template that you want to install to your project. These templates are created by skilled designers and developers, and uploaded to GitHub. So, we can use these templates mostly free, for our protect. To install any of the templates, click on that template name and copy the URL of template page.



Now, open cmd and write “ionic start project_name template_name”. You can also get this list name from your cmd. For that, write “ionic start –list” command. This command will return to you all the available templates for Ionic.



Run “ionic start myApp maps” to install the map template for the project. After all installation, run “ionic serve –l” to test the app.



Ionic also provides some additional examples for template layouts. Go to http://ionicframework.com/examples URL and click on “Codepen” link. This link will redirect you to the official website of Codepen.




Here, you can find and search for a numbers of templates.



When you click on any template, it will open a live editor where you can test this template and make some modification.



If you want to use this template for your project, then run “ionic start project_name URL” .



When you run this command, it will start downloading the required files for the templates and install those files for your project. After successful installation, now, you can run your application for testing the installed templates.





In this article, we learned about the templates in Ionic. In the next article, we will start developing a project on Ionic.