2016-10-08 1 views
0

컨트롤러 사이에 변수를 전달하는 서비스를 구축했습니다. 변수 (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}' 
      }); 
     } 

    } 
})(); 

내가 두 개의 컨트롤러에서 호출 : 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 때문에

답변

0

당신은 서비스에서 데이터를 유지 할 수 있습니다 다른보기로 이동할 때 파괴되지 않습니다. 컨트롤러에서

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

당신의 데이터를 얻을 수 두 번째 컨트롤러로 이동 후를 일단 첫 번째 컨트롤러에서 두번째 옵션

사용 $cacheFactory 서비스

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

캐시

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

답해 주셔서 감사합니다.하지만 $ scope를 사용하지 않고 서비스를 호출하려면 어떻게해야합니까? 나는 컨트롤러 AS 구문을 사용하고있다. –

+0

'vm.orginations = dataService.getCachedOrginations();'$ scope는 이것과 아무 관련이 없다. –

+0

@RafaelMunoz 두 번째 옵션으로 내 대답을 업데이트했습니다.보세요 –

관련 문제