Welcome to Part 2 of this review of the Pluralsight course “Building Mobile Apps with the Ionic Framework and Angular JS” by Steve Michelotti.

Steve is a Microsoft ASP.NET MVP and holds MCSD, MCPD, and MCT certifications. He has produced a total of 7 courses for Pluralsight and is working on more.

Also in this series:

Part 1 – Getting Started with the Ionic Framework.

Part 2 – Navigating and Routing

Part 3 – Ionic Components

Part 4 – Mapping

Part 5 – ngCordova

Navigation and Routing

Navigation for Elite Schedule

Steve shows the view structure of our app.

Ionic Headers and Footers

Steve shows the HTML for our headers and footers in CodePen.
It is quite simple to do this, we just need to know the correct CSS class names to apply.

Introduction to Ionic Tabs

In this clip we are introduced to Ionicons: icon fonts for Ionic.

Steve demonstrates the search facility for finding particular icons of interest. This functionality is a lot like Bootstrap, and in a good way too.

Tabs – Setting Up the Initial Structure

In this clip we start to see some Angular code for the first time.

In app.js, Steve creates an EliteApp module, and the ionic module is injected into this.

run and config functions are added here.

Side Menu – Setting Up the Initial Structure

Steve adds menu-layout.html and creates the initial side navigation for our mobile app.

Introduction to Angular UI Router

For all routing tasks, Ionic uses the AngularUI Router, which is a routing framework specifically designed for Angular JS.

Steve explains that it does not deal with views directly, and structures your code into state machines. He describes several characteristics of the Angular UI Router here.

You can find the source code for the Angular UI Router here on Github.

Adding Routing for Tabs

Steve adds routes for leagues and myteams using Angular code, and then adds <ion-view> html for each view.

We also see the first use of the ui-sref html attribute.

Adding Routing for Side Menu

Steve creates a new teams folder with six new html files in it.

He is able to do this extra quickly as he is using the Sublime plugin AdvancedNewFile

Route Parameters

Steve creates a new script file team-detail-ctrl.js

We now see a new Go to Team button

Adding Navigation Animation

We see how to add a slide animation for going between screens. No JavaScript needs to be written for this: just add the attribute “slide-left-right”

Adding a Back Button

We see how to add an iOS7 back button to the top left edge of our screen, and then how to achieve an alternative look.

The Ionic Framework provides several good choices and icons styles for you.

Continue to Part 3 – Ionic Components