我正在Angular中开发一个应用程序,该应用程序会调用多个Web服务。我想为应用程序开发一个脱机组件,以便它将某些Web服务结果缓存到LocalStorage并在连接脱机时使用它们。
该部分非常简单,而我最困扰的部分是当应用程序离线时如何进行逻辑分支。
这是我当前的流程:
$rootScope.isOnline
布尔值标志以指示我们处于离线状态,否则,如果没有404,则我们会将其标记为在线我希望我的代码以可维护的方式根据此标志分支。因此,我正在考虑使用依赖项注入来注入对网络服务进行调用的“在线”服务,或注入与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中开发在线/离线应用程序的正确方法还是有更好的方法?
有很多方法可以做到这一点。看一下这个简化的插件:
http://plnkr.co/edit/CpiJaF480Mai050b63RC?p=preview
这里的想法是,您有服务返回的单例服务对象,但是随着联机/脱机更改,您将复制不同的函数方法。
还有许多其他方法可以执行此操作,例如添加间接级别(例如,创建可从中请求当前活动服务的服务)。
您不能简单地使用角度注入来完成此操作,因为工厂调用和服务调用都只会被调用一次,并且只会为服务名称注册一个实例(每次注入时都不会调用)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句