Question

我正在Angular中开发一个应用程序，它可以调用几个web服务。我想为应用程序开发一个离线组件，以便将某些Web服务结果缓存到LocalStorage并在连接脱机时使用它们。

这一部分相当简单，我遇到的最麻烦的部分是如何在应用程序离线时进行逻辑分支。

这是我目前的流程：

用户加载页面
Webservice调用正常发生
$ 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);

我遇到的问题是$rootScope.isOnline在第一次调用我的webservice之前没有被标记为脱机，所以即使连接处于脱机状态，依赖注入也会查看$rootScope.isOnline并注入OnlineAuthService

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

Answer 1

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

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

这个想法是你有服务返回的单件服务对象，但是你可以将不同的函数方法复制为在线/离线更改。

还有许多其他方法可以做到这一点，例如添加间接级别（例如，创建一个可以请求当前活动服务的服务）。

你不能简单地使用角度注入来实现它，因为工厂和服务调用都会被调用一次，并且只会为服务名称注册一个实例（每次注入时都不会调用它们）。

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

1 个答案: