Setup

New Ionic App

Follow the 3-step tutorial here from the official Ionic documentation on how to create a new application using their blank starter template.

A Few New Files

Lets create a few new files. The files will be empty for now, but we will add the code to them later on in the tutorial.

Look for the js and templates folder under www. Create these folders if they don’t exist in your starter template.

In the js folder of your app, create the following files:

  • controllers.js
  • services.js

In the templates folder, create the following files:

  • login.html
  • member-area.html
  • register.html

When you’ve finished, the files and their respective folder should look similar to below.

newfiles

Include JavaScript files to Index.html

Open your index.html file under www and include your newly created JavaScript files right before the end header tag.

includejs

While we are in the index.html, lets update the body to this:

bodyindex

 

Our template html files will be rendered in the <ion-nav-view> tags. The index.html will only be providing the view and acting as the top controller for our app.

<BACK | NEXT>