Ionic: Starter templates

Last updated: 2016-07-28

Ionic comes with some starter templates.

Starter templates are like yeoman generators for scaffolding start up projects for Ionic.

(while we’re at it – some yeoman generators for Ionic:
https://github.com/mcfly-io/generator-mcfly – check it out – there are sub-generators for e.g. ng directives – was renamed from generator-angular-famous-ionic
– https://github.com/mcfly-io/generator-sublime //ng and Ionic as optional libs
https://github.com/diegonetto/generator-ionic //Older one)

What do the starter templates offer? Which one to should you base your app on?

You can get a list of templates by printing
https://github.com/driftyco?utf8=%E2%9C%93&query=ionic-starter

The first 6 of those are listed from the Ionic shell by typing

$ ionic start --list

The list include

1. blank ................ A blank starter project for Ionic
2. complex-list ......... A complex list starter template
3. tabs ................. A starting project for Ionic using a simple tabbed interface
4. sidemenu ............. A starting project for Ionic using a side menu with navigation in the content area
5. maps ................. An Ionic starter project using Google Maps and a side menu
6. salesforce ........... A starter project for Ionic and Salesforce
7. tests ................ A test of different kinds of page navigation
8. analytics ............ Your basic Ionic starter app, plus analytics
9. cardboard ............ A google cardboard template for Ionic
10. io .................. An ionic starter project containing the ionic.io services
11. deploy .............. A starter project with Ionic Deploy

You can create a Ionic project from a template. Start out by being in the parent of the name of your planned project and then use the planned project name and the template as parameter:

$ ionic start YourPlannedProject -t blank 
$ #or you could have used url for a base:
$ ionic start YourPlannedProject -z https://github.com/driftyco/ionic-starter-blank/archive/master.zip
$ cd YourPlannedProject
$ ionic serve #build and run webserver on localhost:8100

The serve command not only provides a webserver, but also gulp-connect live reload, so when you change a file a new build will be automatic made and reloaded in the browser.

If you want to add Sass you can quickly enable it with

$ ionic setup sass

1. The blank template

ionic-starter-blank

The blank template only contains a header and a content pane

  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-pane>
  </body>

2. The complex-list template

It seems like the complex-list is almost only a copy of the blank template. You don’t gain anything extra from this, so ignore that one.

3. The tabs template

ionic-starter-tabs dash

For the tabs template the ion-header and ion-content pane are replaced with ion-nav-bar and ion-nav-view.

  <body ng-app="starter">
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </body>

It is a real Angular app including controllers, views and services with dummy data.

ionic-starter-tabs chats

4. The sidemenu template

ionic-starter-sidemenu playlists

Pressing the menu button reveals a menu to the left:

ionic-starter-sidemenu left

The content for this template is put in a ion-nav-view like for the tabs template, but there are no ion-nav-bar.

The template is also the beginning of an app with working navigation using controllers and views.

5. The maps template

The \lib\ionic\ folder has been included in this template. I has Ionic v0.9.27/AngularJS v1.2.12 whereas the default installed at the time of writing is Ion v1.3.1/Ang v1.5.3.
I haven’t yet tested whether or not it will work with the newer version. I’ll test it later.

It has a directive containing the map and a footer with a “center”-button.

  <body ng-app="starter" ng-controller="MapCtrl">
    <ion-header-bar class="bar-stable">
<h1 class="title">Map</h1>
</ion-header-bar>
    <ion-content scroll="false">
      <map on-create="mapCreated(map)"></map>
    </ion-content>
    <ion-footer-bar class="bar-stable">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a>
    </ion-footer-bar>
  </body>

Except for that it has a menu and the views from the sidemenu template even though they are not configured as views in app.js. And each view file has ion-nav-buttons on top of content.

6. The salesforce template

The template will first popup a “login to salesforce” window.

The body only contains a ion-nav-view for its content, which is a menu, an account list and a contact list with edible contacts.

I don’t want to create a salesforce account just yet, so I can’t demo it currently.

7. The tests template

ionic-starter-tests

The tests template is for testing different ways of navigating.

8. The analytics template

The template comes with two extra libs in www\lib:

  • ionic-service-core
  • ionic-service-analytics

The Angular libs are not below \lib\ionic\js\ but directly under \lib\. I am unsure if that is necessary.

The body element has the attribute ion-track-auto

<body ng-app="starter" ion-track-auto>

It is based on the tabs template, but has another frontpage.

ionic-starter-analytics

9. The cardboard template

ionic-starter-cardboard

The cardboard template first connects to openweathermap service and on return shows the above pictures, which is composed of textures mixed with lights and shadows calculated and positioned by the map data to demo different effects.

There is a settings menu, which is a modal dialogue.

All code is put in the app.js.

10. The io template

The first 6 templates gives you an option to use the ionic.io services, when you create the project with ionic start.
I guess this template will be like the blank template with that option chosen.

Since io services also includes push notifications, then I guess that is why the push template is deprecated.

Create a free io dev account on https://apps.ionic.io/

Find resources at https://ionic.io/discover

11. The deploy template

ionic-starter-deploy

Like the push template, I suspect this deploy template has been deprecated by either the io template or the io services starter option.
Push and deploy are both part of Ionic.io cloud services.

Ionic2 / ng2

Ionic2 uses Angular2, which is based on TypeScript

Ionic2 starter:

$ ionic start [project-name] --v2

ng2 generator: (does not include Ionic as the v1)

$ yo mcfly-ng2 [project-name]

 

The End.

%d bloggers like this: