Building an online/offline App with angular

[Roman Sachse]

Hi there,

I am building an application for my masters thesis which should be able to work online and offline.
The idea is that the application fetches the data either from a remote server (when online) or the browsers local storage (when offline).

I have two questions concerning this idea:

1.)
My approach is to create a proxy service which uses either the $http service or a custom LocalStorage service depending on the navigator.onLine property.
I created a very basic fiddle to demonstrate my approach: http://jsfiddle.net/rommsen/DqKtx/9/
Is there any better or "more angular" way of doing this? I was thinking of implementing the LocalStorage service similar to the $http service but to be honest I can not really get a grip of the $q and defer api.

2.)
The application needs to listen (globally) to changes of its online/offline state. Something like:
window.addEventListener("online", function () {
        alert("You're now online");
    }, true);

    window.addEventListener("offline", function () {
        alert("You're now offline.");
    }, true);

I am still not 100% into the angular way of doing things. Where should I put these event listeners and what is the best way of implementing them.

Thanks a lot,

Roman

[Will Kriski]

I'm interested in this as well.

[Roman Sachse]

I came up with a solution to my second question (how to handle online/offline Browser events). I like it but still I am not sure if this is a correct way of doing these things in angular.

I created a service with a dependency to $windows and to $rootScope. This service binds to the events and triggers $rootScope.$digest .

In my controller I can $watch service.isOnline() an react appropriately.

Here is a fiddle: http://jsfiddle.net/rommsen/QY8w2/ (note: not working in Fiddle, but works locally without any problems, even if the app is included via an iframe, just close/open your network connection an you will see the result).

Any comments on this (and maybe on my solution in the first post)?

Cheers,

Ro

[Andy Joslin]

You should $broadcast an event when the online status changes.

Eg:

angular.module('myApp').run(function($rootScope) {

  window.addEventListener("online", function () {

        $rootScope.$broadcast('onlineChanged', true);

    }, true);

    window.addEventListener("offline", function () {

        $rootScope.$broadcast('onlineChanged', false);
    }, true);

});

angular.module('myApp').factory('storage', function($rootScope, $http, LocalStorage) {

  var currentStorage;

  $rootScope.$on('onlineChanged', function(evt, isOnline) {

    currentStorage = isOnline ? $http : LocalStorage

  });

});

[Roman Sachse]

Thanks Andy, this looks very good