angularjs - 機能検出に基づく AngularJS サービス インジェクション

Question

私の Angular アプリでは、ブラウザーで利用可能な永続化メカニズムに基づいて具体的な実装を呼び出す永続化サービスインターフェイスを作成する必要があります。ストレージメカニズムを理解する特定の 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 
}

Answer 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場所に注射するだけです。