AngularJS：何度も何度も問い合わせる必要がないように、サービスからデータを保存する方法

私は、コントローラ間で変数を渡すためのサービスを構築しました。変数（vm.organizations）にすべての組織があり、vm.contactsにはlistview.Html（contactControllerの下にある）のデータベース内のすべての連絡先があります。AngularJS：何度も何度も問い合わせる必要がないように、サービスからデータを保存する方法

データサービス：

//dataService.js 

(function() { 

    angular.module('appContacts') 
     .factory('dataService', ['$http', dataService]); 

    function dataService($http) { 

     return { 
      getAllOrganizations: getAllOrganizations, 
      getAllAvailableOrganizations: getAllAvailableOrganizations, 
      getAllAvailableContacts: getAllAvailableContacts, 
      getOrganizationById: getOrganizationById, 
      GetContactById: GetContactById, 
     }; 

     function getAllOrganizations() { 
      return $http({ 
       method: 'GET', 
       url: 'api/organizations' 
      }); 
     } 

     function getAllAvailableOrganizations() { 
      return $http({ 
       method: 'GET', 
       url: 'api/organizations' 
      }); 
     } 

     function getAllAvailableContacts() { 
      return $http({ 
       method: 'GET', 
       url: 'api/contacts' 
      }); 
     } 

     function getOrganizationById(id) { 
      return $http({ 
       method: 'GET', 
       url: '/api/organizations/{id}' 
      }); 
     } 

     function GetContactById(id) { 
      return $http({ 
       method: 'GET', 
       url: '/api/contacts/{id}' 
      }); 
     } 

    } 
})();

そして、私は2つのコントローラからそれを呼び出す：contactsController.jsを

//listview.html 
<html ng-app="My-app"> 
<body ng-controller="contactsController"> 
<table class="table table-striped" > 
    <thead> 
     <tr> 
      <th>Name </th> 
      <th>Company</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="contact in vm.contacts> 
      <td><a ui-sref="contact({Id: contact.id})" ng-click="vm.setCurrentContact(contact)">{{ contact.lastName}}, {{contact.firstName}} </a></td> 
      <td><a ui-sref="organization({Id: contact.organizationId})"> {{contact.organization.organizationName}} </a></td> 

     </tr> 
    </tbody> 
</table> 
</body> 
</html>

私はサービスのデータベースからデータを取得する（dataservice.js）を構築していますand OrganizationsController.js

私の問題は、別のページに移動するたびに、サービスは、パフォーマンス問題で終了するのデータベースから、すでに持っているすべてのデータを取得する必要があります。そのデータはセッション内では変更されません。

この情報を保存してすべてのコントローラから利用できる方法はありますか？。私は、ローカルストレージについて読んだことがあるが、それは常に$scopeで使用されていて、私が（代わりに$scope.contact vm.contact）構文ASコントローラを使用しています見るようAngularJSでのサービスがsingleton.Theyあるため

出典

2016-10-08 Rafael Munoz

あなたはサービスでデータを永続化することができます別のビューに移動すると破壊されません。

(function() { 

    angular.module('appContacts') 
     .factory('dataService', ['$http', dataService]); 

    function dataService($http) { 
     var cachedOrganizations = []; 
     return { 
      getAllOrganizations: getAllOrganizations, 
      getAllAvailableOrganizations: getAllAvailableOrganizations, 
      getAllAvailableContacts: getAllAvailableContacts, 
      getOrganizationById: getOrganizationById, 
      GetContactById: GetContactById, 
      getCachedOrginations: getCachedOrginations, 
      setCachedOrginations: setCachedOrginations 
     }; 

     function getAllOrganizations() { 
      return $http({ 
       method: 'GET', 
       url: 'api/organizations' 
      }); 
     } 

     function getCachedOrginations(){ 
      return cachedOrganizations; 
     } 

     function setCachedOrginations(orginations){ 
      cachedOrganizations = orginations; 
     } 
    } 
});

あなたのコントローラから、あなたがバックエンドからデータを取得したら、サービス内のデータを設定するsetCachedOrginationsを呼び出します。

dataService.getAllOrganizations.then(function(data){ 
    dataService.setCachedOrginations(data); 
},function(error){ 
})

あなたが別のcontrollerに移動したら、コールしてサービスを以前に格納されたデータを取得することができます。

vm.orginations = dataService.getCachedOrginations();

あなたがデータ

dataService.getAllOrganizations.then(function(data){ // make sure you inject "dataCache" as a dependency dataCache.put("originations", data); },function(error){ })

あなたがからデータを取得する第二のコントローラに移動したらを得れば、あなたの最初のコントローラで2番目のオプション

使用$cacheFactoryサービス

angular.module('dataCache') 
    .factory('dataCache', ['$cacheFactory', function($cacheFactory) { 
    return $cacheFactory('data-cache'); 
    }]);

キャッシュ

vm.orginations = dataCache.put("originations");

出典

2016-10-08 09:20:20

答えていただきありがとうございます。しかし、$ scopeを使用せずにサービスを呼び出すにはどうすればよいですか。私はコントローラASの構文を使用しています –

'vm.orginations = dataService.getCachedOrginations（）;' $スコープはこれとは関係ありません。 –

@RafaelMunoz私は2番目のオプションで私の答えを更新しました。見てください –

AngularJS：何度も何度も問い合わせる必要がないように、サービスからデータを保存する方法

答えて

関連する問題