Question

我已经构建了一个服务来在控制器之间传递变量。我有一个变量（vm.organizations）所有组织和vm.contacts listview.Html中的所有联系人（在contactController下）。

//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）：

数据服务：

//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和OrganizationsController.js

我的问题是，每次我导航到另一个页面，该服务必须从数据库获取我已经拥有的所有数据结束了性能问题。这些数据不会在内部发生变化会话。

有没有办法存储该信息并可从所有控制器获取？。我已阅读有关本地存储的信息，但它始终与$scope一起使用，如您所见，我使用的是Controller AS语法（vm.contact而不是$scope.contact）

Answer 1

您可以在服务中保留数据，因为AngularJS中的服务是单例。当您导航到不同的视图时，它们不会被销毁。

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

第二个选项

使用$cacheFactory服务

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

获得数据后，在第一个控制器中

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

一旦你去第二个控制器从缓存中获取数据

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

AngularJS：如何存储来自服务的数据，因此我不需要反复查询

1 个答案: