I have an AngularJS Cordova application and everything is going really well at the moment. My next step is to add Cordova plugins to the application such as Cordova Connect plugin to check if the network connection is on and listen to network events.

The plan is to listen to these network events and ask the Connect plugin if the device has a connection to the internet, if not I will redirect to an error page.

I'm struggling to find a place in my AngularJS application where to register these events on application startup.

Should they be in the main run block, config block or inside some kind of factory/service/provider?

Where are you guys putting these outside-AngularJS device events?

fx.

document.addEventListener("online", yourCallbackFunction, false);

I have an AngularJS Cordova application and everything is going really well at the moment. My next step is to add Cordova plugins to the application such as Cordova Connect plugin to check if the network connection is on and listen to network events.

The plan is to listen to these network events and ask the Connect plugin if the device has a connection to the internet, if not I will redirect to an error page.

I'm struggling to find a place in my AngularJS application where to register these events on application startup.

Should they be in the main run block, config block or inside some kind of factory/service/provider?

Where are you guys putting these outside-AngularJS device events?

fx.

document.addEventListener("online", yourCallbackFunction, false);

• javascript
• angularjs
• mobile
• cordova

3 Answers 3

I have it myModule.run my app.js and works just great, I actually have also other cordova events there.

MyModule.run(function ($rootScope, $http, dataService, $window, $q, $location, localize) {

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

    //Initialize anything you need to. aka: Google analytics.

    //Set other evens you need to listen to.
    document.addEventListener("online", onOnline, false);
    document.addEventListener("offline", onOffline, false);
 }
}

Hope this helps!

Hmm this works fine but what I did instead based on Brian ford's angular-phonegap-ready ponent, is to inject this ponent in my ponents to make calls to the phonegap's api, so instead of putting everything in app.js. Document.addEventListener("deviceready",function); is called once whenever we inject bt.phonegap.ready's when creating our app app.module('apptitle',['Phonegap_ponent_goes_here']) then I add the ponent's I've created which will add any function to a queue. And whenever I want to use those functions I inject my ponent and call whatever functions is in there. Checkout my repo for a better understanding of what I did : https://github./malikov/simple-angular-phonegap-app and an example for the ponent here : https://github./malikov/angular-phonegap-storage, hope this helps

You find a very helpful tutorial here: http://mobileangularui./blog/your-first-phonegap-app-with-mobile-angular-ui/

For the chance that the link above changes, here is a short summary:

// Create a service
angular.module('WeatherApp.services.Cordova', [])

.factory('deviceReady', function(){
  return function(done) {
    if (typeof window.cordova === 'object') {
      document.addEventListener('deviceready', function () {
        done();
      }, false);
    } else {
      done();
    }
  };
});

In a furhter service they use the deviceready service:

.factory('getCurrentPosition', function(deviceReady, $document, $window, $rootScope){
  return function(done) {
    deviceReady(function(){
      navigator.geolocation.getCurrentPosition(function(position){
        $rootScope.$apply(function(){
          done(position);
        });
      }, function(error){
        $rootScope.$apply(function(){
          throw new Error('Unable to retreive position');
        });
      });
    });
  };
});