4

我正在使用 Angular 开发一个应用程序，该应用程序对几个 Web 服务进行多次调用。我想为应用程序开发一个离线组件，以便它将某些 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);

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

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

4

1 回答 1

3

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

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

那里的想法是您拥有服务返回的单例服务对象，但随后您复制不同的函数方法作为在线/离线更改。

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

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

于 2013-10-29T01:22:38.670 回答