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

Posted 2023-02-23

【中文标题】基于特征检测的AngularJS服务注入

【英文标题】：AngularJS service injection based on feature detection

【发布时间】：2015-06-27 06:15:00

【问题描述】：

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

例如，通用的 storageService 会提供如下接口：

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

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

    ...

storageService 将有多种实现，例如localStorageService、indexedDbStorageService、webSqlStorageService。

根据浏览器功能动态注入具体存储服务的最佳方式是什么。例如，

if (isWebSqlAvailable()) 
    // inject webSqlStorageService 

else if (isIndexedDbAvailable() 
    // inject indexedDbStorageService 

else if (isLocalStorageAvailable() 
    // inject localStorageService 

【参考方案1】：

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()

   

然后，您只需将storageService 注入您想要的任何地方。

【讨论】：

正是我想要的！谢谢，Deblaton。