What Is ngCordova And How To Use It With Ionic Framework ?

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

So what is ngCordova, well if you take a look at the official web page of ngCordova you see straight away see that it is a “AngularJS extensions on top of the Cordova API“. Great but what does that mean well in layman’s terms it makes our life as developers easier when using Cordova plugins with Ionic framework as it provides Angularjs Extensions for Cordova Plugins.

Watch Video Tutorial Of This Post Here:

 

If have taken a look at any Cordova plugin then you will straight away see that they provide API in vanilla JavaScript, it is not a problem as it was meant to be this way. Cordova APIs are supposed to be in JavaScript, having said that this does not go well at times when you are working with Ionic as Ionic uses Angularjs. And by does not go well i mean there can be performance issues also at times you will need to write a lot of code to make a simple plugin work.

So to overcome this the good folks at Drifty, which is the company that made Ionic Framework created ngCodova an open source project which integrates with Ionic like a charm as it was created for this purpose only.

Before we go ahead and take a look at how to use ngCodova lets take a look at a few code samples just to illustrate my point as to how easy ngCordova makes our life.

Let’s take the cordova-sms-plugin, i recently wrote a post on how to send sms with Ionic framework app in this case we will first take a look at how to use the sms plugin without ngCordova we will do something like this

HTML

and in JavaScript

As you can see we need to set up event handles on the onClick and then access the code using the app object. And there are more ways to do this but if you are already using Angular in Ionic why not make use of in to make you coding easy.

 

In with ngCordova we can to the above shown code like the following,

Which you can see is more readable and easy to work with.

 

So how to use ngCordova you ask?

First we will need to download the ngCordova files into our project folder you can do that using bower by running the following command

or you can directly download zip files from it’s GitHub repository.

 

After which we will need to include it in out index.html file for our Ionic project, you can include any one either the ng-cordova.js file or the minified version ng-cordova.min.js

But one important thing to note here is that we should add the file above the cordova.js file in out index.html like so

 

Finally we will need to inject ngCordova as a dependency in our angular module, we do that in out app.js file like so

 

And just like that we are ready to use ngCordova and leverage the power of Angularjs in Cordova Plugins.

 

Got A Question?

Hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)