Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 4

In the last post I gave you a detailed introduction to using AngularJS with Ionic. It may take a bit of practice for these new concepts to stick, but we’ve already gone over most of the things we need to know about how to use Ionic. So far we’ve covered:

Although there’s certainly plenty more to learn, there’s two major concepts that stand out to me now that still remain a mystery, and those are:

Integrating Cordova / PhoneGap with Ionic
Creating a production build of an Ionic application

So in this post I’ll focus on going over how to use Cordova within an Ionic application and hopefully we’ll wrap things up in the following post in this series.

NOTE: People (myself included) are quite often confused by the difference between Cordova and PhoneGap. The Last Word on Cordova and PhoneGap does a great job at explaining this. In short though, in most instances the terms are used interchangeably and mean the same thing. Technically, Cordova is the open source community driven version of the framework, and PhoneGap is the productised version used by Adobe. Ionic uses Cordova.

Introducing ngCordova

Ionic supports ngCordova, which is a collection of AngularJS services and extensions that make it easier to integrate Cordova plugins. Rather than calling a plugin manually, you can instead use the AngularJS service to do the work for you.

For example, if you were using the Cordova Camera Plugin manually you might do something like this:

navigator.camera.getPicture(cameraSuccess, cameraError, [cameraOptions]);

but using ngCordova you would do something like this:

$cordovaCamera.getPicture(options).then(
  function (imageData) {
    //Do something
  },
  function (error) {
    //Do something
  }
);

As you can see from the example above, this allows us to use promises (the .then() portion of the above) which helps deal with the asynchronous nature of some plugins.

If you’re a Sencha Touch developer this abstraction may be familiar to you. Sencha Touch also provides a bunch of integrations with Cordova that can be called directly through the framework instead of manually referencing the plugin.

Currently supported ngCordova plugins include:

Camera
Touch ID
OAuth
Push Notifications
Geolocation
AdMob
App Rate
Facebook
In App Browser

and a bunch more. Check out the ngCordova Documentation for a full list, and of course you can still use any unsupported plugins manually in your Ionic application.

Installing ngCordova in an Ionic Application

We need to install ngCordova before we can use it within an Ionic application. To do that, you must first run the following command from within your projects directory:

bower install ngCordova

and you will also need to add a reference to the ng-cordova.js file in your index.html (before cordova.js):

<!-- your app's js -->
    <script src="js/app.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

Now ngCordova should be available throughout your application, but there’s a little more work we need to do before we can start using a specific plugin.

Using the Camera Plugin with ngCordova

Let’s walk through an example of using the Camera plugin. First, we need to require ngCordova in our apps module:

angular.module('ionicApp', ['ionic', 'ngCordova']);

Before you can use a specific plugin in your project you must add it through the command line using the following command within your project directory (this will install the camera plugin):

cordova plugin add org.apache.cordova.camera

As a Windows user, I’ve been using PhoneGap Build to build PhoneGap applications for iOS, so adding plugins this way is a little foreign to me (in PhoneGap Build plugins are specified in the config.xml file rather than added through the CLI).

Keep in mind that if you do intend to use PhoneGap Build then the process for using plugins is going to be a little different (we will talk about that later), but for testing purposes you can go ahead and just do it this way. You will still be able to test your application, plugins included, through the Ionic View application.

Now that the Camera plugin is available in our application, we need to include it in the controller we wish to use it in by referencing $cordovaCamera:

.controller('MainCtrl', function($scope, $cordovaCamera) {
  //Controller stuff
});

and then we can use it like this:

var options = {
  quality: 100,
  destinationType: Camera.DestinationType.FILE_URI,
  sourceType: Camera.PictureSourceType.CAMERA,
  allowEdit: true,
  encodingType: Camera.EncodingType.JPEG,
  cameraDirection: 1,
  saveToPhotoAlbum: false,
};

$cordovaCamera.getPicture(options).then(
  function (imageData) {
    //Do something
  },
  function (err) {
    //An error occured
  }
);

This will launch the users camera, and send the photo taken back to our application.

The way you are able to test Cordova plugins through the Ionic View app is a huge time saver for me. The only problem though is that if something is not working correctly I don’t have any way to debug it from within the Ionic View application (as far as I can tell at least). So I may end up having to build through PhoneGap Build first anyway, which slows down development a little bit.

Going back to the Sencha Touch comparisons, one feature of Sencha Cmd I really liked was the ability to build PhoneGap Build applications through the command line. I’m unsure if any tools like this exist for Ionic by default, but that is something we will likely cover in the next part of this series once I’ve done a little more research.

The AngularJS services provided by ngCordova are certainly nice to have, but it’s not something that I couldn’t do without. Sencha Touch is integrated just as nicely with PhoneGap / Cordova (possibly better) as Ionic is, so I don’t think there’s any clear winner between the two frameworks here.

UPDATE: The fifth and final part is out now!