4

いくつかの Web サービスを多数呼び出すアプリケーションを Angular で開発しています。特定の Web サービスの結果を LocalStorage にキャッシュし、接続がオフラインのときにそれらを使用するように、アプリにオフライン コンポーネントを開発したいと考えています。

その部分はかなり単純で、私が最も苦労している部分は、アプリがオフラインのときに論理的に分岐する方法です。

これが私の現在の流れです：

  1. ユーザーがページを読み込む
  2. Web サービスの呼び出しは通常どおり行われます
  3. $http インターセプターは 404 エラーを探し、$rootScope.isOnlineオフラインであることを示すブール値フラグをマークします。それ以外の場合は、404 がない場合はオンラインとしてマークします

保守可能な方法で、このフラグに応じてコードを分岐させたい。そのため、依存性注入を使用して、Web サービスを呼び出す「オンライン」サービス、または存在する場合は LocalStorage の結果とやり取りする「オフライン」サービスのいずれかを注入することを検討していました。

オンライン/オフラインフラグに基づいて依存性注入を行い、正しいサービスを注入することはできますか?

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

私が抱えている問題は、Web サービス$rootScope.isOnlineへの最初の呼び出しの前にオフラインとしてマークされていないため、接続がオフラインの場合でも、依存関係の注入が$rootScope.isOnlineOnlineAuthService を見て注入することです。

これは Angular でオンライン/オフライン アプリを開発する正しい方法ですか、それとももっと良い方法がありますか?

4

1 に答える 1