Best place to host Cordova / Phonegap events in AngularJS

Question

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

The plan is to listen to these network events and request the Connect plugin, if the device has an Internet connection, if not, I will be redirected to the error page.

I am trying to find a place in my AngularJS application where to log these events when the application starts.

Should they be in the main startup block, configuration block, or inside any factory / service / provider?

Where do you guys put these external devices on AngularJS devices?

FX

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

Answer 1

I have myModule.run my app.js and it works just fine, I actually have other cordon events.

 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!

Answer 2

Hmm, this works fine, but what I did instead based on the Brian ford angular -phonegap-ready component is to inject this component into my components to make calls to the api handset, so instead of put everything in app.js. Document.addEventListener ("deviceready", function); is called once every time we enter bt.phonegap.ready when creating our app.module application ('apptitle', ['Phonegap_component_goes_here']), then I add the component that I created that will add any function to the queue. And whenever I want to use these functions, I add my component and call any functions there. Checkout my repo for a better understanding of what I did: https://github.com/malikov/simple-angular-phonegap-app and an example for this component: https://github.com/malikov/angular-phonegap-storage hope this helps

Answer 3

Here you will find a very useful tutorial: http://mobileangularui.com/blog/your-first-phonegap-app-with-mobile-angular-ui/

For the chance that the link above will change, here is a quick overview:

 // 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 the back office, 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'); }); }); }); }; });