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

21

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!

22

@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.

23

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
24

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:

25

@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
26

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
27

Cool gist, thanks for sharing this!

28

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.

29

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

1 Like
30

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