在AngularJS控制器和服务之间共享资源

Question

I have a AngularJS service "people" that has associated a people list by requesting a "heavy"(say, ajax) ressource ( JSFiddle ).

This people list is share between controllers. I wonder if is the proper way to do it, saving this list as a global variable. I do it because don't want to perform each time an ajax request to recuperate the initial list:

 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

You could cache the results of the AJAX call in the service and return that after the first call like this:

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