How to use Cordova plugins with Ionic Framework, the Angular way

May want to take a look at these:




and more.

1 Like

Good find @Calendee I came across that repo as well. But last updated almost a year ago and an incomplete (probably non-updated, I suppose it was ‘complete’ a year ago but Cordova has developed since) plugin API didn’t make much sense to me. It’s a good starting point but far from production ready imho.

These are a good start but they don’t use promises, which is what I really was looking for.

I’ll keep working on mine, thanks again for any feedback (or help).

1 Like

Thanks for the heads-up @Robin.

What exactly isn’t using promises? My services are…

No I was talking about the other repos that were linked to above.

1 Like

My bad :wink: I thought you were missing something. But indeed; these repo’s are both outdated and are missing fully implemented promises.

@mwball If you can use anything from my Gist in your repository, please feel free to copy/paste it.

Thanks, I like how you do the graceful failure. I was going to detect if I was in a webview and inject a different set of services depending.

Thanks @mwball. My main goal with these services was to

  1. Be able to use the Cordova plugins, the Angular way
  2. Be able to use the Cordova plugins in the first place. Without having to simulate my app every time in Ripple or even an emulator.

That’s where the graceful failure handing comes from. I’m personally not interested in fallback functionalities: It’s Cordova or ‘fake Cordova’ for me :smile:

I agree, it’s fake or real.

You can see the snippet I use here to decide which set of services to inject:

1 Like

Hi
I would really like some help.
I wanna check if there is internet connection to test if i understand how to use it.
I’m using Phonegap 3.4 and i’m using the basic ionic example(The pet information example).
In the “PetIndexCtrl” conroller i’m trying to console.log the status and i get "unknown"
This is my code:

.controller('PetIndexCtrl', function($scope, PetService) {
  // "Pets" is a service returning mock data (services.js)
    //var  networkConnectionType =  navigator.network.connection.type;
    console.log(navigator.network);
  $scope.pets = PetService.all();
 })

What am i doing wrong?
Please note that when i’m using the Hello Phonegap example(the code that comes when installing) it works(i’ve installed the network plugin)
10x!

@doronsever Perhaps you need a new topic for your question since it’s about actually using the core plugin functionality instead of wrapping it in Angular logic.

But to have a quick go on your question; I think you’re running it in the (desktop) browser instead of simulating through an emulator or running on an iPhone?
When running in the browser, you don’t have Cordova functionality on hand and the navigator.connection.type will return unknown if it’s available in the first place.

Please try to read and understand the above examples of Angular services wrapped around Cordova plugins. In my opinion, they are much friendlier to use.

For example if you would use my CordovaNetwork service; just inject CordovaNetwork in your Controller and then you can do something like:

if(CordovaNetwork.isOnline()) {}

And another side note; always wrap your Cordova plugin calls inside a deviceready event callback. If the device isn’t ready when you try to execute the Cordova stuff, you will get unexpected results.

Hi
Thank you for your reply.
I’ve tested it everywhere: Iphone simulator(i’m on mac os), Android emulator, Ripple and on my own Android phone.
Each one of them return the same result: “unknown”

I’ve also implemented your service and injected it in the controller like so:

.controller('PetIndexCtrl', function($scope, PetService, CordovaNetwork) {
// "Pets" is a service returning mock data (services.js)
    alert(CordovaNetwork.isOnline());
 $scope.pets = PetService.all();
 })

I get “false” in the alert, in each platform also.
The only way that i can get something to work is like so:

angular.module('starter', ['ionic', 'starter.services', 'starter.controllers'])
.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        var  networkConnectionType =  navigator.network.connection.type;
        alert('Connection Type2: ' +  networkConnectionType );
    })})

I’m guessing the problem is that the cordova plugin had not yet loaded by the time i entered the controller / your service.

Is that true? Can u help me fix this?

1 Like

True, I should build in support for the deviceready event in my service as well. Even though I do not have any issues with it so far.

You can also use the $ionicPlatform in you controller. That should fix things for you :smile:

@mwball Please take a look at your GitHub repo. I’m trying to contribute but it seems like you’re not doing anything with it.

1 Like

Hi all !

I just write a piece of code to get navigator.connection.type asyncly through a promise :

https://gist.github.com/welcoMattic/c6415563d6607fbedf3e

feedbacks are very appreciated ! :wink:

3 Likes

Cool gist, thanks for sharing this!

can any one help with this code please?
I try to upload pictures form m gallery but it doesn’t work
controller.js:
$scope.allImages =[];
function UploadPicture(imageURI){
$scope.allImages[$scope.intf] = imageURI;
$scope.intf=$scope.intf+1;
$scope.$apply();
}
$scope.FindPicture = function () {
navigator.camera.getPicture(UploadPicture, function(imageData) {
alert(‘get picture failed’);
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
and the index.html:





please can any one hepl me.

You should open your own topic @leaderwomen. This topic is rather old and has a different subject.

1 Like

Is this the initial post that initiated ng-cordova? This is awesome.