Ionic Framework – ngCordova


Welcome to the 6th and final part 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

Part 3 – Ionic Components

Part 4 – Mapping

Part 5 – Customizing Ionic


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

Cheerios (General Mills)

General Mills Cheerios

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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s