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

Question

我正在使用 Angular 开发一个应用程序，该应用程序对几个网络服务进行多次调用。我想为应用程序开发一个离线组件，以便它将某些网络服务结果缓存到 LocalStorage 并在连接离线时使用它们。

那部分相当简单，我遇到最多问题的部分是如何在应用程序离线时进行逻辑分支。

这是我目前的流程:

1. 用户加载页面
2. 网络服务调用照常进行
3. $http 拦截器查找 404 错误并标记一个 $rootScope.isOnline bool 标志以指示我们处于离线状态，否则如果没有 404 则我们标记为在线

我希望我的代码以可维护的方式根据此标志进行分支。因此，我正在考虑使用依赖项注入(inject)来注入(inject)调用 Web 服务的“在线”服务，或者注入(inject)与 LocalStorage 结果(如果存在)接口(interface)的“离线”服务。

我可以基于在线/离线标志来注入(inject)正确的服务吗？

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

我遇到的问题是 $rootScope.isOnline 在第一次调用我的网络服务之前没有标记为离线，所以即使连接离线，依赖注入(inject)也会查看 $rootScope.isOnline 并注入(inject) OnlineAuthService。

这是在 Angular 中开发在线/离线应用程序的正确方法还是有更好的方法？

Answer 1

有很多方法可以做到这一点。看看这个简化的 plunker:

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

这里的想法是，您拥有服务返回的单例服务对象，然后随着在线/离线更改复制不同的功能方法。

还有许多其他方法可以做到这一点，例如添加间接级别(例如，创建一个您可以从中请求当前事件服务的服务)。

您不能简单地使用 Angular 注入(inject)来做到这一点，因为工厂和服务调用都只会被调用一次，并且只会为服务名称注册一个实例(它们不会在您每次注入(inject)时都被调用)。