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

Part 1 – Getting Started with the Ionic Framework.

Part 2 – Navigating and Routing

Ionic Components

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.

http://www.getpostman.com/

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
https://app.pluralsight.com/library/courses/building-mobile-apps-ionic-framework-angularjs/discussion

By the end of this clip, all of the league data is available in a JavaScript object.

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
https://zombiecodekill.com/2015/10/18/underscore-and-lodash/

The

With this installed, Steve uses lodash functions .chain, .filter, .flatten, .map and .find

https://lodash.com/docs#chain
https://lodash.com/docs#filter
https://lodash.com/docs#flatten
https://lodash.com/docs#map
https://lodash.com/docs#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.

Ionic Typography

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.

Ionic Cards

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.

Customizing Buttons

We start off with a basic blue rectangular button underneath “Record: 4-1”, add see the effect of adding the icon-left class.

Ionic Popup

Steve adds a confirmation popup: “Are you sure you want to unfollow?”
We see this is very easy to do.

Data and Caching

Overview

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.

Using $http

The code in this clip uses the revealing module pattern. To learn more about this, see
the Revealing Module, erm, Module, in Dan Wahlin’s course Structuring JavaScript Code
https://zombiecodekill.com/2016/03/13/javascript-learning-path-structuring-javascript-code/

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.

Enabling Cross-Domain

In order to fix our security problem, Steve creates a windows shortcut with the location of Chrome followed by the flags

–disable-web-security
–user-agent=”Android”
–user-data-dir=”C:/temp-chrome-eng”

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.

If promises, or asynchronous JavaScript programming is new to you, you can watch the “Async Patterns” module in Jonathan Mills “JavaScript Best Practices” course
https://app.pluralsight.com/library/courses/javascript-best-practices/table-of-contents

or watch the “Creating and Using Angular Services” module in Joe Eames and Jim Cooper’s
Angular JS Fundamentals course
https://app.pluralsight.com/library/courses/angularjs-fundamentals/table-of-contents

However, you should only need a fairly basic understanding of promises in order to follow along with Steve’s demo here.

$ionicLoading

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
https://github.com/jmdobry/angular-cache

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
https://zombiecodekill.com/2016/03/27/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.

Refreshing Data

We see how to implement “pull to refresh” functionality in our app. This uses the ion-refresher html tag, and Angular $scope
https://docs.angularjs.org/guide/scope

Mapping

Overview

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

See more at
https://github.com/angular-ui/angular-google-maps

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

Now that we have Google Maps for Angular setup, adding our Google map is just a google-map tag inside of an ion-content tag, and a small amount of JavaScript to set the center of the map.

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.

Driving Directions

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.
https://www.waze.com/

Powerful stuff.

Customizing Ionic

Overview

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

SASS Overview

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”
https://app.pluralsight.com/library/courses/better-css/table-of-contents

or see Jason Roberts “Simplifying CSS in Visual Studio With Sass”
https://app.pluralsight.com/library/courses/simplifying-css-visual-studio-sass/table-of-contents
or see Gary Simon’s “Speeding up Your CSS Workflow with Sass and Compass”
https://app.pluralsight.com/library/courses/speeding-up-css-workflow-sass-compass-2342/table-of-contents

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

Installing SASS

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

ngCordova

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.

ngCordova Dialogs

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.

ngCordova Vibration

Accessing the vibrate is super simple, and we can specify the length of the vibration in milliseconds.

ngCordova Network

This simply tells us whether the device is online or not.

ngCordova Device

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.

ngCordova Camera

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.

Related Courses

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