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.
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.
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?
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:
All of these are demonstrated later in this module.
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:
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:
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.
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
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
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.
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
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, 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.
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
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