Angular中的在线/离线应用程序

Question

I am developing an application in Angular that makes many calls to a couple of webservices. I want to develop an offline component to the app such that it will cache certain webservice results to LocalStorage and use them when the connection is offline.

That part is fairly simple, and the part I am having the most trouble with is how to branch logically when the app is offline.

Here is my current flow:

1. User loads the page
2. Webservice calls happen as usual
3. $http interceptor looks for a 404 error and marks a $rootScope.isOnline boolean flag to indicate we are offline, otherwise if no 404 then we mark as online

I want my code to branch depending on this flag, in a way that is maintainable. As such, I was looking at using dependency injection to inject either an 'online' service which makes calls to the webservice, or an 'offline' service, which interfaces with the LocalStorage results if they exist.

Can I base my dependency injection based off the online/offline flag to inject the correct service like so?

.factory('AuthService', ['$rootScope', '$injector', function($rootScope, $injector) {
    if($rootScope.isOnline) {
        return $injector.get('OnlineAuthService');
    }
    else {
        return $injector.get('OfflineAuthService');
    }
}])

.service('OnlineAuthService', ['$rootScope', '$http', '$location', 'serviceEndpoint', 'securityEndpoint', 'organisationId', function ($rootScope, $http, $location, serviceEndpoint, securityEndpoint, organisationId) {
    this.ensureSession = function (data) {
        // Do some connection to the webservice
    };
}])

.service('OfflineAuthService', ['$rootScope', function ($rootScope) {
    this.ensureSession = function (data) {
        // Do some LocalStorage stuff
    };
}])

AuthService.ensureSession(data);

The issue I am having is that $rootScope.isOnline is not marked as offline before the first call to my webservice, so even when the connection is offline, the dependency injection looks at $rootScope.isOnline and injects the OnlineAuthService.

Is this the correct way of developing an Online/Offline app in Angular or is there a better way?

Answer 1

There are many ways to do this. Take a look at this simplified plunker:

http://plnkr.co/edit/CpiJaF480Mai050b63RC?p=preview

The idea there is that you have the singleton service object returned by the service, but then you copy over different function methods as online/offline changes.

There are many other ways to do this, such as adding levels of indirection (creating a service from which you can request the current active service for example).

You can not simply do it with angular injection, because both factory and service calls will get called once and only once and will simply register a single instance for the service name (they will not get called every time you inject).