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
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
Steve creates a new script file team-detail-ctrl.js
We now see a new Go to Team button
Adding Navigation Animation
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