Unable to use Cordova Plugin - angularjs

Question

I have an AngularJS app that I want to deploy as an app to mobile devices. I had heard about Cordova (and its AngularJS counterpart ngCordova). I will be using multiple Cordova plugins. The first one I'm trying is to detect if the user is online or not. To do that, I'm using the cordova-network-informtion plugin in the following controller via ngCordova:
'use strict';
myApp.controller('MyController', function($scope, $cordovaNetwork) {
$scope.isOnline = null;
$scope.init = function() {
// Detect if the user is on a network
console.log($cordovaNetwork.isOnline());
$scope.isOnline = $cordovaNetwork.isOnline();
console.log($scope.isOnline);
};
$scope.init();
});
When the init function gets called, I see the following in the console:
Object {getNetwork: function, isOnline: function, isOffline: function}
TypeError {stack: (...), message: "Cannot read property 'type' of undefined"}
That type error is printed thanks to global error handler. Either way, it is a result of calling $scope.isOnline = $cordovaNetwork.isOnline();. I don't understand what I'm doing wrong.
I believe the root cause is that I'm not referencing cordova.js in any way. All of the examples I see reference cordova.js. However, when I look at the package, I only see vendor specific implementations of Cordova. For instance:
cordova.windowsphone.js
cordova.android.js
cordova.ios.js
That makes sense from a deployment perspective. However, I'm still trying to do development in my browser. For that reason, I was thinking I could use ngCordova. I also thought there would be a generic cordova.js that served as an abstraction. However, I don't see one. Can someone please help me get over this hump? I sincerely appreciate it.

Answer 1

Your problem is, like you mentioned in your last paragraph, that you are trying to use Cordova Plugins within your browser.
This is not possible because here is no phonegap abstraction layer for your browser.
So i think you have some opportunities:
The most reliable would be to deploy it every time on your device an test it there.
Yes i know, that always takes a few seconds and is not the best if you are trying a lot of different thinks.
Another option could be to create your own mocked $cordovaNetwork in ngCordovaMocks.
Example:
angular.module('ngCordovaMocks', [])
.factory('$cordovaNetwork', [function () {
return {
getNetwork: function () {
return "Edge"
},
isOnline: function () {
return true;
},
isOffline: function () {
return false
}
}
}]);
In the app.js you then include your ngCordovaMocks instead of ngCordova and all services will be mocked ( Be sure, that only your mocked services will be available and not all ngCordova functionalities).
angular.module('myApp', ['ngCordovaMocks']);
Yes, this is a lot of work and you have to change it before your deployment. And don't forget: It's just a mock for local development. It's essential to test it on your device with the ngCordova module and cordova device connection.
Another option would be to use the Ripple Emulator , which offers some Cordova features in your browser. But i don't know if the connection is a supported one.
But then you have to integrate the cordova.js file to your index.html.
I don't what the differences between the vendor specific files are, but you should download the plain and neutral cordova.js and include it.

Answer 2

First off, ngCordova isn't the counterpart to cordova.js. ngCordova is a set of extensions that are meant to be used on top of Cordova. You still have to use Cordova in your app to be able to deploy your app to mobile devices.
I would recommend taking a look at ionicframework.com. The makers of ngCordova also built Ionic and it will provide you with all of the tools that you would need to be able to build out a mobile app with angular.js.