基于特征检测的AngularJS服务注入(inject)

在我的 Angular 应用程序中，我需要创建一个持久性服务接口(interface)，该接口(interface)基于浏览器中可用的持久性机制调用具体实现。我正在考虑使用通用 storageService 来实现这一点，该服务调用了解存储机制的特定 storageService。

例如，通用 storageService 将提供以下接口(interface):

angular
    .module('app.storage')
    .factory('storageService', storageService);

function storageService() {
    return {
        saveItem: saveItem,
        getItem: getItem
    }

    ...
}

storageService 会有多个实现，例如localStorageService、indexedDbStorageService、webSqlStorageService。

基于浏览器功能动态注入(inject)具体存储服务的最佳方法是什么。例如，

if (isWebSqlAvailable()) {
    // inject webSqlStorageService
}
else if (isIndexedDbAvailable() {
    // inject indexedDbStorageService
}
else if (isLocalStorageAvailable() {
    // inject localStorageService
}

最佳答案

angular
  .module('app.storage')
  .factory('storageService', ['$injector', storageService]);

  function storageService($injector) {

  var svc;
  if (isWebSqlAvailable()) {
    svc = $injector.get('webSqlService');
  }
  else if (isIndexedDbAvailable() {
    svc = $injector.get('indexedDbService');
  }
  else if (isLocalStorageAvailable() {
    svc = $injector.get('localStorageService');
  }

  return svc;
}


angular
  .module('app.storage').factory('webSqlService', webSqlService);

function webSqlService(){
   return {
      saveItem: saveItem,
      getItem: getItem
   }

   function getItem(){

   }

   function saveItem(){

   }

}

angular
  .module('app.storage').factory('indexedDbService', indexedDbService);

function indexedDbService(){
   return {
      saveItem: saveItem,
      getItem: getItem
   }

   function getItem(){

   }

   function saveItem(){

   }

}

然后，你只需要在任何你想要的地方注入(inject)你的 storageService。

关于基于特征检测的AngularJS服务注入(inject)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29749273/