javascript - 在 AngularJS Controller 和服务之间共享资源

Question

我有一个 AngularJS 服务“people”，它通过请求“大量”(例如 ajax)资源( JSFiddle )来关联人员列表。

此人员列表是 Controller 之间共享的。 我想知道将此列表保存为全局变量是否是正确的方法。 我这样做是因为不想每次执行 ajax 请求来恢复初始列表:

var people = [];

var myApp = angular.module('myApp', []);

myApp.controller("infoCtrl", function($scope, person) {
  $scope.people = person.get();
});

myApp.controller("filterCtrl", function($scope, person) {
  $scope.$watch("maxAge", function(newValue) {
    if (newValue) { person.filterPeople(newValue); }
  });
});

myApp.service("person", function() {
  return {
    get: function() {
      people = AjaxGetPeople();
      angular.forEach(people, function(p) {
        p.visible = true;
      });
      return people;
    },
    filterPeople: function(maxAge) {
      angular.forEach(people, function(person) {
        person.visible = person.age <= maxAge;
      });
    }
  };
});

function AjaxGetPeople() {
  return [
    { name: 'Marcel Sapin', age: 26  }, 
    { name: 'Anhel De Niro', age: 42  }, 
    { name: 'Johny Resset', age: 30  }];
}

input {  width: 40px; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="filterCtrl" ng-init="maxAge=30">
    People younger than
    <input ng-model="maxAge" type="number" />years:
  </div>
  <hr/>
  <div ng-controller="infoCtrl">
    <div ng-repeat="person in people" ng-show="person.visible">
      {{person.name}}, age {{person.age}}
    </div>
  </div>
</div>

Answer 1

您可以在服务中缓存 AJAX 调用的结果，并在第一次调用后返回该结果，如下所示:

myApp.service("person", function() {
  return {
    get: function() {
      if (this.people) {
        return this.people; 
      }
      people = AjaxGetPeople();
      angular.forEach(people, function(p) {
        p.visible = true;
      });
      this.people = people;
      return people;
    },
    filterPeople: function(maxAge) {
      angular.forEach(people, function(person) {
        person.visible = person.age <= maxAge;
      });
    }
  };
});