angular.jsサービスのデータをコントローラに含めるにはどうすればいいですか？

Question

サーバーからデータを取得するサービスを作成しました。ブラウザツールは、データが正しく取得されたことを確認します。

angular. 
    module('karassApp'). 
    factory('Person', ['$rootScope', '$http', function($rootScope, $http){ 

    var persons = []; 
    var loaded = false; 

    // returns a promise that resolves to the persons. 
    var load = function(){ 
     return $http.get('/get_persons').then(function(response){ 
     persons = response.data.map(function(person){ 
      return { 
      id: person.id, 
      fullname: person.fullname, 
      birthdate: person.birthdate ? new Date(person.birthdate) : null, 
      deathdate: person.deathdate ? new Date(person.deathdate) : null, 
      description: person.description, 
      picture: person.picture ? person.picture : '/client/views/person.png' 
      }; 
     }); 

     $rootScope.$broadcast('Persons.update'); 
     loaded = true; 

     return persons; 
     }); 
    }; 

    return { 
     load: load, 
     persons: persons 
    }; 
    }]); 

次に、私はサービスを消費しているはずのコントローラを持っています。

angular. 
    module('karassApp'). 
    component('personList', { 
    templateUrl: 'client/views/person-list.template.html', 
    controller: ['$scope', 'Person', function PersonListController($scope, Person){ 
     var self = this; 

     Person.load().then(function(){ 
     $scope.persons = Person.persons; 
     }); 
... 

この時点で、コードは失敗し、$ scope.personsは空になります。私は、データが人に読み込まれることを保証するべきであると約束する人を待っています。私はまた、サービスがシングルトンであると考えました。つまり、最初の呼び出しの後で、人の変数にはPerson.load()を書き込む必要があります。事前に

おかげで、 ジョシュ

更新 は、私は答えからコードを組み込むことを試み、それは次のようになります。

angular. 
    module('karassApp'). 
    factory('Person', ['$http', '$q', function($http, $q){ 

    var persons = []; 

    // returns a promise that resolves to the persons. 
    var load = function(){ 
     return $q(function(resolve, reject){ 
     $http.get('/get_persons').then(function(response){ 
      persons = response.data.map(function(person){ 
      return { 
       id: person.id, 
       fullname: person.fullname, 
       birthdate: person.birthdate ? new Date(person.birthdate) : null, 
       deathdate: person.deathdate ? new Date(person.deathdate) : null, 
       description: person.description, 
       picture: person.picture ? person.picture : '/client/views/person.png' 
      }; 
      }); 
      resolve(persons); 
     }); 
     }); 
    }; 

...

Answer 1

I理解した。私は正しいアイデアを持っていましたが、私は人を次のthenに渡せるように返す必要がありました。

サービス：

angular. 
    module('karassApp'). 
    factory('Person', ['$rootScope', '$http', '$q', function($rootScope, $http, $q){ 

    var persons = []; 

    // returns a promise that resolves to the persons. 
    var load = function(){ 
     return $http.get('/get_persons').then(function(response){ 
     persons = response.data.map(function(person){ 
      return { 
      id: person.id, 
      fullname: person.fullname, 
      birthdate: person.birthdate ? new Date(person.birthdate) : null, 
      deathdate: person.deathdate ? new Date(person.deathdate) : null, 
      description: person.description, 
      picture: person.picture ? person.picture : '/client/views/person.png' 
      }; 
     }); 
     return persons; 
     }); 
    }; 

コントローラ：

angular. 
    module('karassApp'). 
    component('personList', { 
    templateUrl: 'client/views/person-list.template.html', 
    controller: ['$scope', 'Person', function PersonListController($scope, Person){ 
     var self = this; 

     Person.load().then(function(persons){ 
     self.persons = persons; 
     });