Ionic Templates

Out of the box Ionic comes with many templates. Use the command ionic start --list to see a current list. Currently there are 11 templates available. Four templates are for Ionic 1. The other seven are broken down with four for starter templates and three that are examples of working projects.

Keep in mind these are just the templates that are directly included within the Ionic Framework. There are hundreds of other templates that are available. Before using any template, verify that the version of Ionic that the template is using is the same as what you are using.

Ionic has their own market that allows developers to release templates, themes and apps. Envato is a large 3rd party market that sells templates and themes for many frameworks. Ionic Themes is a 3rd party market that is focused on Ionic. While there are some items that are free, the better and well written starter templates do have a cost. The cost though, in my opinion are fairly low. Many for less then $50; and some for a lot less; you can get a template and theme to quickly get an app up and running.

  • Ionic Market - Ionic’s official market, free & paid
  • CodeCanyon - 3rd party market from Envato; covers much more then just Ionic
  • Ionic Themes - 3rd party market focused on Ionic

This is by no way a complete list. Github, CodePen and other code repositories also have templates that are available.

Note: Starting with Ionic 2, the name was changed to Ionic. All versions 2 and above will go by the name Ionic. This matches what Angular also did. Ionic 1 works with Angular 1 and Ionic (versions 2 and up) work with Angular (2 and up).

Ionic - Angular

  • tabs: a simple 3 tab layout
  • sidemenu: a layout with a swipeable menu on the side
  • blank: a bare starter with a single page
  • aws: AWS Mobile Hub Starter Project
  • super: starter project with over 14 ready to use page designs
  • tutorial: a guided starter Project
  • conference: A real world Application

The first four listed; Tabs, sidemenu, Blank and aws are templates that commonly used to start a project. Super, Tutorial and conference have been designed as demonstrations and training to using Ionic components.

For backwards compatibility

I won’t go into detail concerning these. Just be aware that Ionic is keeping Ionic 1 features around. I’ll try to focus on the current version of Ionic. To use these add ionic1 to the start command, for example ionic start mynewapp blank --type ionic1.

  • Tabs
  • Blank
  • Sidemenu
  • Maps

Templates and Projects

In each image I’ve used ionic serve --lab which opens the app into a browser, emulating the different platforms. Each platform was opened to show the difference; Windows, Android and IOS. This shows that even right out the box, an Ionic app is fitting into each platform with little or no extra code.

Author’s note: I’ve included a link directly below the image that should open in a browser tab by itself. This is in case your browser is having issues with zooming into a GIF image. Also, the screen capture program I am using to capture the screen is not correctly capturing the location of the mouse cursor. I’ve added a circle animation to the location that is being clicked.

Blank starter template

This contains the bare minimum to launch an app. The Blank Template will most likely be the most common template you’ll use.

Ionic Blank Template Image

Tabs starter template

The Tabs starter template, adds on the boilerplate for a tab driven app.

Ionic Tabs Template Image

Sidemenu starter template

The Sidemenu template is a blank app with the sidemenu code included.

Ionic Sidemenu Template Image

AWS starter template

The AWS Starter template is a pre-configured AWS Mobile Hub project. It’s set up to use Amazon DynamoDB, S2, Pinpoint and Cognito. The application still needs Amazon account information to be put in. I didn’t include a screen shot because without the account information the template just displays an error.

Super Project

The Super project template includes many functions set up to give a demonstration of how to use the components.

Ionic Super Template Image

Tutorial Project

The Tutorial project template also shows a working application and how to set the application parts up. It doesn’t include as many parts as the Super Project but it gives a great example of how a working app is functioning.

Ionic Tutorial Project Image

Conference Project

The Conference Project is an example of what an app focused on a Conference would be like. Includes Maps, multiple lists, and menus.

Ionic Conference Project Image