Улучшенный дизайн для передачи данных в другие виды ng-просмотра и их сохранения в контроллерах

Я начал развиваться в AngularJS. Я смущен относительно того, является ли это надлежащим дизайном для передачи данных между моими частичными представлениями.

Сейчас у меня есть страница загрузчика, где я делаю запрос.

function PeopleController($scope,$http,$location){
    $http.get('/location/-79.18925/43.77596').
    success(function(data){
      $scope.savePeopleResponse(data);
      $location.url('/test');
    });
}

Затем в представлении, которое загружается для /test

Я просто звоню

<div ng-controller="resultController">
    <div class="blueitem">{{getResultForPeople()|json}}</div>
</div>

[resultController]

    function resultController($scope){
      $scope.getResultForPeople = function(){
     return $scope.getPeopleResponse();
    }
}

и savePeopleResponse и getResultForPeople "кэшируются" в корневой системе как таковой

app.run(function($rootScope) {
  var peopleResponse = {};
  $rootScope.savePeopleResponse = function(data) {
   peopleResponse = data;
   console.log(data);
  }

  $rootScope.getPeopleResponse = function(){
    return peopleResponse;
  }
});

Теперь, как вы можете видеть, это будет очень грязно, если это приложение станет больше и больше. Каков наилучший способ обработки данных, чтобы он сохранялся на всех контроллерах?

Ответы

Ответ 1

Вы можете сохранить данные через контроллеры создать свой собственный сервис, как описано в этот блог. Вы также можете обратиться к этому вопросу.

В вашем случае вы можете переместить ваши savePeopleResponse и getPeopleResponse в службу, а затем ввести службу в любые контроллеры, к которым вы хотели бы получить доступ.

angular.module('myApp', [])
    .factory('peopleService', function () {
        var peopleResponse = {};

        return {
            savePeopleResponse:function (data) {
                peopleResponse = data;
                console.log(data);
            },
            getPeopleResponse:function () {
                return peopleResponse;
            }
        };
    });

С вашим контроллером что-то вроде этого:

function resultController ($scope, peopleService) {
    $scope.getResultForPeople = peopleService.getPeopleResponse;
}

В этом примере кода убедитесь, что вы включили ng-app="myApp"