CODEWITHSUNDEEP
javascriptangularjsmobilecordova
Snorri Örn Daníelsson
Snorri Örn Daníelsson

Reputation: 61

Best place to put Cordova/Phonegap events in AngularJS

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);

Upvotes: 6

Views: 5429

Answers (3)

ESP32
ESP32

Reputation: 8723

You find a very helpful tutorial here: http://mobileangularui.com/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');
        });
      });
    });
  };
});

Upvotes: 0

malikov
malikov

Reputation: 51

Hmm this works fine but what I did instead based on Brian ford's angular-phonegap-ready component, is to inject this component in my components 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_component_goes_here']) then I add the component's I've created which will add any function to a queue. And whenever I want to use those functions I inject my component and call whatever functions is in there. Checkout my repo for a better understanding of what I did : https://github.com/malikov/simple-angular-phonegap-app and an example for the component here : https://github.com/malikov/angular-phonegap-storage, hope this helps

Upvotes: 0

Arcayne
Arcayne

Reputation: 1186

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

enter image description here

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!

Upvotes: 2

Related Questions