Welcome to Part 3 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
Adding Initial Data
As this project is a mobile optimized port of elite-schedule.net, Steve takes an existing AJAX call and pastes it into Postman, which is a REST client for Chrome and Mac, and this shows us all of the data returned by this AJAX call.
Steve has Sublime Text setup to do automatic code completion. He is using some AngularJS sublime plugins, and also custom Sublime snippets he created himself.
To see these take a look at the course discussion
Adding a Basic Ionic List
He we see how to add a list control. The power of Angular makes this easy to do in our leagues.html
We also see that it only takes one more CSS class name to show all right arrow icons on the right hand side of the screen.
In order to make these right arrow icons do something, Steve adds an ng-click which passes in a league id to a selectLeague function which is also created here.
After some more coding, we run our app:
If we select a league we go the main navigation, and we have a list for all of the locations in our app.
List Dividers for Grouped Data
This clip adds list dividers, such as “5th Grade – Green” and “5th Grade – White”. These appear as yellow headers about our list items.
Incorporating External Libraries With Bower
Here Steve installs lodash using bower.
For a quick introduction to lodash see
Underscore and Lodash
With this installed, Steve uses lodash functions .chain, .filter, .flatten, .map and .find
This is a very nice real world example of the power of libraries such as Underscore and Lodash.
Ionic Grid System
The Ionic Grid system uses FlexBox
You can learn more about Flexbox in the course CSS3 In Depth, and you can read me review here.
We are not restricted to a 12 column grid like we are in Bootstrap. Instead, we just specify the number of columns that we want.
We learn here that the Ionic Grid System is very powerful, supporting column offsets and giving you control of vertical alignment to top center or bottom.
Steve explains Offset Columns in Ionic Grids, and to demonstrate the power of Ionic Grids, Steve produces a screen of rows with date times on the left, opponent descriptions in the middle, and scores on the right.
Steve also demonstrates Sublime’s Emmet plugin for creating rows with 6 columns in next to no time.
We see in the emulator that although this looks reasonably good on a Samsung Galaxy S4, the font is lacking an exciting “live” feel.
We see that we can make the team name stand out more by giving it a CSS class of “positive”
Steve changes the header rows p tags to h4 and the detail row p tags to h5.
This is now looking good.
Cards are a good option for displaying data to users. By the end of this clip we see “Record: 4-1” prominently displayed at the top of the screen. This Record is calculated based on the results of the games played.
Toggle and Checkbox Controls
First Steve demonstrates how to add a Following/Not Following checkbox control.
Then we see how to implement the same functionality but with a mobile toggle UI control.
We start off with a basic blue rectangular button underneath “Record: 4-1”, add see the effect of adding the icon-left class.
Steve adds a confirmation popup: “Are you sure you want to unfollow?”
We see this is very easy to do.
Data and Caching
So far in this course, all of the data has been hardcoded. In reality, you will want this information to come from the server.
This module covers HTTP communication as well as caching, which enables offline usage.
The code in this clip uses the revealing module pattern. To learn more about this, see
At the end of this clip, we see the AJAX error:
XMLHttpRequest cannot load http://elite-schedule.net/api/leaguedata
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.
This is because we are making a cross-domain call, which isn’t allowed from a desktop browser for security reasons.
In order to fix our security problem, Steve creates a windows shortcut with the location of Chrome followed by the flags
Using this shortcut, we can run our app using Cross-Domain calls.
Adding Promises With $q
The previous code used traditional callback to get the data returned from our HTTP call.
A more modern approach is to use promises, which simplify our asynchronous code and make error handling easier.
or watch the “Creating and Using Angular Services” module in Joe Eames and Jim Cooper’s
Angular JS Fundamentals course
However, you should only need a fairly basic understanding of promises in order to follow along with Steve’s demo here.
The Ionic loading service provides a convenient way to show users that data is loading.
To demonstrate this, Steve uses $timeout to show “Loading…” for three seconds.
This highlights that we are making HTTP calls for every screen, and that we should add caching to our app.
Angular Cache – Overview
Steve uses Angular-cache, which is a replacement for the default Angular 1 $cacheFactory written by Jason Dobry
Steve explains the top features of this library: Configurable TTL, Configurable Storage Options and Expiration Events
Angular Cache – Creating and Configuring
To work with Angular-Cache, we see that we must add angular-data.DSCacheFactory as a dependency in our Angular module definition.
We must also remember to add a script tag reference to angular-cache.min.js
Here we are writing to local storage. If you have not worked with local storage before, I recommend Craig Shoemaker’s course HTML5 Web Storage, IndexedDB and File System
HTML5 Web Storage, IndexedDB and File System
Steve adds four caches: leagueDataCache, leaguesCache, myTeamsCache and staticCache
Angular Cache – Implementing Caches
Steve writes the code to store our data into our caches, and retrieving our cached data to avoid the need for additional HTTP requests.
Angular Cache – Enabling Offline Data
If we have no internet connection, we want to be able to return data from the cache even if it has expired, because it’s better for the user to see old data than absolutely no data.
This is effectively offline data, which Steve demonstrates how to do.
We see how to implement “pull to refresh” functionality in our app. This uses the ion-refresher html tag, and Angular $scope
This module shows you how to provide a marker on a Google map for the location of our games, and give driving directions to that location
Google Maps for Angular – Introduction
Google Maps for Angular makes it easy to work with Google Maps. Steve provides a high level overview of the features of Google Maps for Angular
Steve shows us some examples from angular-google-maps.org
Google Maps for Angular – Installation and Setup
We see how to install this using Bower, and set it up.
Google Maps for Angular – Implementation
Steve also adds a new route for this map screen, and a button to view it.
We see a map of Washington centered on the White House.
Google Maps for Angular – Markers
Inside the google-map tag, Steve adds a marker tag, with a marker-label tag inside that.
The label is styled with our custom CSS.
Here we go beyond what can be shown in an emulator, and see a projection of Steve’s mobile phone. This fires up Waze, a driving direction program, with instructions fully loaded.
This module begins with a custom Angular directive for using Markdown for client-side formatting and display
Custom Markdown Directive
Steve shows us how to install and add our reference to Showdown, which is the most common library for dealing with Markdown
See a live demo here: http://showdownjs.github.io/demo/
Next we see how to create a custom Angular directive to execute Markdown code.
Customizing the CSS
Steve adds an allow-bullets CSS rule which correctly displays the bullet points on the screen
Ionic CSS is built on SASS, which is a CSS preprocessor. If you aren’t at all familiar with it, you have a few options:
You can check out the Using SASS module of Shawn Wildermuth’s “A Better CSS: LESS and SASS”
or see Jason Roberts “Simplifying CSS in Visual Studio With Sass”
or see Gary Simon’s “Speeding up Your CSS Workflow with Sass and Compass”
Having said all of that, Steve gives you a high level overview here and you should be able to follow along anyway. And as Steve says, there’s also good documentation at sass-lang.com
You can see official Ionic documentation on SASS here: http://ionicframework.com/docs/cli/sass.html
To install SASS see http://sass-lang.com/install
Steve uses Ruby gems to install sass
Implementing SASS Changes
Steve gives a quick demo to show that it’s easy to customize the Ionic SASS in your app.
App Metadata and Icons
The default home screen icon shows the generic Cordova image and “HelloCordova” as the title. This is due to these being the defaults in config.xml
Fortunately these are trivial to update.
Steve say he made his icon images at makeiconapp.com – I couldn’t find this website but I did find https://makeappicon.com/ which does the same thing, and I found this pretty easy to use.
Steve also shows some of the parts that you might want to update in AndroidManifest.xml
Introduction to ngCordova
ngCordova is not technically a part of Ionic. You can use ngCordova in any Cordova based application that’s using Angular. However ngCordova has been created by the same team that has created the Ionic framework.
Steve describes ngCordova as “AngularJS Services that drastically simplify using the core Cordova plugins to access native features.”
We learn the reasons why the Ionic team built ngCordova.
We see a list of 20 popular plugins. For the full list see the ngcordova plugins page.
Installation and Setup for ngCordova
Steve installs ngCordova using bower, and copies ng-cordova.min.js into a skeleton ngCordovaDemo solution in Visual Studio.
A few more files and folders are added.
To mix it up a bit, we see start a new app and deploy it to an iPhone rather than an Android phone.
We can see the iPhone on the desktop screen because Steve is using the Telerik AppBuilder tool, and here we see many different dialog boxes.
Accessing the vibrate is super simple, and we can specify the length of the vibration in milliseconds.
This simply tells us whether the device is online or not.
Things we can access here are device model, device platform, device UUID, device version, Cordova Version and finally Device Info, which is a combination of these details in a JSON object.
This allows us to take pictures and select existing pictures on the device.
ngCordova Barcode Scanner
We can use the barcode scanner to get information about various products.
Steve shows us how to fetch the UPC code from a box of Cheerios.
Using the lookup service we see that yes this is indeed a box of Cheerios.
And this concludes our course.
Summary / Verdict
I have been pretty impressed, both with this course, and with the range of features offered by the Ionic Framework.
Angular UI was another technology that I knew little about and this also impressed me.
Another cross-platform mobile development course that Steve has done is Building Cross-Platform Mobile Apps with Telerik AppBuilder
Steve Michelotti has also produced AngularUI Fundamentals which includes an module of the AngularUI Router.
To learn more about the Android SDK see Exploring Android Studio by Larry Schiefer.
To learn more about Cordova see Introduction to PhoneGap by John Sonmez (PhoneGap is mostly the same as Cordova)
To learn more about SASS you can check out the Using SASS module of Shawn Wildermuth’s A Better CSS: LESS and SASS
or see Jason Roberts Simplifying CSS in Visual Studio With Sass
or see Gary Simon’s Speeding up Your CSS Workflow with Sass and Compass