ngCordova : Device APIs for your Hybrid mobile apps.


As I discussed in my last post that discussed about how ionic apps can be a lifesaver for javascript developers producing production mobile apps without learning multitude of different programming languages. I stick to Javascript for good here :-)

The aspect that one needs to learn while developing a hybrid mobile solution  (other than javascript) is Cordova plugins. As you all know that every mobile app needs to be efficient and smart enough to utilise the device platform that can be essential for any mobile strategy may it be customer engagement (using Push notifications) or simply uploading pictures to the system (using camera for picture click and upload) etc.

Offcourse Cordova is a open style development repository that can be challenging if you don’t have any device API experience. A solution to this problem can be exploring ngCordova which is a a collection of AngularJS wrappers done right for ionic framework. It also has the right documentation to get started and rock in production setups. 

I would be focusing on IOS platform for now and its worth mentioning TouchID is supported here and that is just awesome. Let me walk you through the process to setup and add a single plugin below.

  • Installing ngCordova to your Ionic app : You need to add it in your dependencies in “bower.json” and install it. The other way is to install it directly 
$bower install ngcordova
  • Goto your “www/index.html” and add : 

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

<script src=”cordova.js”></script>

  • Inject in Angular Module 
angular.module('myApp', ['ngCordova'])
  • Avoid fully loaded device so add in your ngcordova.js before using any plugin

$ionicPlatform.ready(function() {$cordovaPlugin.someFunction().then(success, error);});

Now how to add a Cordova plugin such as TouchID (offcourse you can add any plugin using the same process).

  • STEP 1: Create a Ionic project and test it works

$ionic start test tabs

$cd test

$ionic platform add ios

$ionic serve

  • STEP 2: Add touchID plugin 

$cordova plugin add cordova-plugin-touchid

  • STEP 3: Add “ng-cordova.js” and inject in angular dependency as mentioned above. 
  • STEP 4 : Writing testController that would call for authentication, check if successful and if not then pass error and offcourse log the error in console.

.controller("testController", function($scope, $ionicPlatform, $cordovaTouchID) {

$ionicPlatform.ready(function() {

$cordovaTouchID.checkSupport().then(function() {

$cordovaTouchID.authenticate("You must authenticate").then(function() { alert("The authentication was successful"); },

function(error) {console.log(JSON.stringify(error)); }


}, function(error) { console.log(JSON.stringify(error)); });



Happy coding!

Share Button
  • levipadre

    Hi, Do you know that how can I load cordovaTouchId later? For example I have a splash screen and after a login page, but I want to load this function in this page, not when the app is ready.