Welcome to 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.

About this Course

This course looks at many features of the Ionic Framework, which is built on top of Cordova and Angular JS.

You should already have some understanding of web development with Angular JS before tackling this course, but you don’t need to be any sort of Angular JS expert.

I recommend looking at the discussion page prior to watching this course so that you are aware of some of the common issues people have had.

Setting up your machine for mobile app development involves a lot of setup and configuration so be aware that this will take some time to do correctly. Fortunately this is a one time thing – once you learned the steps and configuration settings it gets much easier.

This course was produced using Ionic Framework version 1.0.0 beta 6, and Ionic have made some breaking changes since, but all of the concepts remain the same.

Pluralsight Plus subscribers can download the exercise file. If you are a regular Pluralsight subscriber, you can still download Ionic code samples from Steve Michelotti’s own site.

Ionic News Roundup

A good companion resource to this course is the Ionic mini book.

A new feature from Ionic (not out when the course was recorded) well worth checking out is the Ionic View app.

Ionic are currently working on Ionic 2, and an early preview version of it is available

Steve Michelotti will have a new course on Ionic 2 out later this year.

Introduction

Introduction

Steve explains that Ionic is an exciting new framework built on top of Angular JS that enables us to quickly build great mobile apps.

In this course we build an app for basketball tournaments and leagues. This app has a similar feel to Twitter, allowing you to follow and unfollow teams and view various screens of information.

Course Overview

Steve briefly runs through the eight modules that comprise this course. This course assumes that you already have a basic familiarity with Angular JS.

What Is Ionic?

Steve describes the Ionic Framework as “Bootstrap for mobile”.

I initially thought this was a strange thing to say, but as I progressed through the course I increasingly saw that Ionic does indeed have a lot in common with Bootstrap.

Cordova – What and Why?

Cordova is a JavaScript API that “wraps” native APIs such as the Camera or GeoLocation functionality on the mobile device.

With Cordova you can build native mobile apps using HTML, JavaScript and CSS.

Steve explains that this is a very popular technology which is here to stay.

What We’ll Be Building

We learn that what we will be building is a mobile optimized version of the website elite-schedule

Getting Started With Ionic

Ionic Command Line Features

Steve describe the following commands:

start
serve
platform
build
emulate
run

All of these are demonstrated later in this module.

Installing Ionic

The first step for Installing Ionic is installing https://nodejs.org/

I saw Console2 for the very first time watching this clip. As a windows user, I have been frustrated by how poor the windows command prompt is compared with Mac OSX and Linux terminals. I have found Console2 is to the Windows Command Prompt what Notepad++ is to Notepad: an important improvement.

Here’s how an article by Scott Hanselman describing how he’s configured it is optimize his productivity:
http://www.hanselman.com/blog/Console2ABetterWindowsCommandPrompt.aspx

If you don’t want to download Console2, you can simply install Ionic and Cordova using the Node command prompt.

Steve shows you the commands that you need.

Starting a New Project

To create your first Ionic sample app with the blank starter template:

c:\dev>ionic start firstIonicApp blank

Looking in the resulting C:\Dev\firstIonicApp\www\lib\ionic\js\angular directory
I can see that at the time of writing, Ionic uses Angular v1.5.3
The Ionic team has been working on a new Angular version 2 powered version of Ionic for at least a couple of months now. They have a good Angular 2 Series starting here.

Run the App With a Browser

In this clip, Steve uses Chrome Canary, which comes with Emulation options.
These features are now available in the regular version of Chrome as well.

Steve demonstrates the Ionic file system watcher (live reload feature) by making a change to index.html – we see the effect of this immediately as we save the change.

Run the App With an Emulator

We see that in the console terminal we must add Android as a platform before we are able to build it. And we must have the Android SDK installed before we can do this.

For full details on this see http://ionicframework.com/docs/guide/installation.html

Run the App on a Mobile Device

At this point I hit a problem: Console2 started reporting ‘ionic’ is not recognised as an internal or external command, even though I had just installed it.
If you see this see http://stackoverflow.com/questions/29331276/ionic-framework-ionic-is-not-recognized-as-an-internal-or-external-command/37160044#37160044 for help

Before you run you mobile app on Android you need to have some knowledge of the Android SDK. If (like me) you are new to it, Larry Schiefer can teach you some important knowledge in the Android SDK Tools module of his course Exploring Android Studio.

I was able to run an emulator with only SDK Manager installed (and various packages installed through it), but Android Studio is needed for full control of the emulator, and I got a message in the command prompt saying the emulator is out of date.

Ionic Starter Templates

There are for starter templates:

Blank
Tabs
Side Menu
Maps

In this clip we see how to start and run the Tabs starter project: this looks just like a basic social media app.

Setting Up a Development Environment With Sublime Text

Steve likes using Sublime Text as his editor.
https://zombiecodekill.com/2014/01/19/sublime/

He considers the SideBarEnhancements plugin to be essential, and demonstrates it. We see that Sublime Text is lightweight and easy to get up and running.

Setting Up a Development Environment With Visual Studio

This clip is a tip for Visual Studio users: to use the Telerik AppBuilder add-in. Steve demos this for us and shows us how to copy our files into this type of project.

When this is run, we see the Telerik AppBuilder simulator

If you are interested in using this and want to learn more about it, you can watch Steve’s course
Building Cross-Platform Mobile Apps with Telerik AppBuilder
https://app.pluralsight.com/library/courses/building-hybrid-mobile-apps-icenium/table-of-contents

Setting Up CodePen

Steve shows us that there are lots of example apps available at codepen.io/ionic

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.

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, see https://zombiecodekill.com/2016/05/03/css3-in-depth/

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&#8217; 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