AngularJS Рекомендации по изменению вида

Question

В настоящее время у меня есть угловое приложение с одним модулем. Этот модуль определяет контроллер и службу. В настоящее время я использую службу для обновления своего представления. Должны ли службы обновлять логику просмотра? Или это должно быть сделано в отдельном Угловом компоненте?

index.html

<div ng-controller="AppController as AppCtrl"> 
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div> 
    <button ng-click="AppCtrl.getPeople()" ng-model="AppCtrl.getPeopleButtonText" ng-bind="AppCtrl.getPeopleButtonText"></button> 
    <button ng-click="AppCtrl.clearPeople()">Clear</button> 
    {{AppCtrl.errorMessage}} 
</div> 

app.js

angular.module('app', ['ui.grid']) 
    .controller('AppController', ['$scope', "PersonService", function ($scope, PersonService) { 

    var controllerScope = this; 
    controllerScope.getPeopleButtonText = "Get People"; 

    this.getPeople = function(){ 
     PersonService.getPeople($scope, controllerScope); 
    }; 

    this.clearPeople = function(){ 
     PersonService.clearPeople($scope, controllerScope); 
    }; 
    }]) 
    .service("PersonService", ["$http", function($http) { 

    var refreshCount = 0; 
    this.getPeople = function(rootScope, controllerScope){ 

      var sampleData = [ 
     { 
      "firstName": "Cox", 
      "lastName": "Carney", 
      "company": "Enormo", 
      "employed": refreshCount%2 == 1 
     }, 
     { 
      "firstName": "Lorraine", 
      "lastName": "Wise", 
      "company": "Comveyer", 
      "employed": refreshCount%2 == 0 
     }, 
     { 
      "firstName": "Nancy", 
      "lastName": "Waters", 
      "company": "Fuelton", 
      "employed": refreshCount%2 == 1 
     } 
     ]; 

     $http.post("https://httpbin.org/post", sampleData) 
     .success(function(data){ 
      rootScope.myData = JSON.parse(data.data); 
      refreshCount++; 
      controllerScope.getPeopleButtonText = "Refresh " + refreshCount; 
      controllerScope.errorMessage = ""; 
     }) 
     .error(function() { 
      controllerScope.errorMessage = "An error has occurred." 
     }); 
    }; 

    this.clearPeople = function(rootScope, controllerScope) { 
     rootScope.myData = []; 
     controllerScope.getPeopleButtonText = "Get People"; 
    } 
}]); 

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

EDIT 19 ноября Я использую Угловое обещание обрабатывать случаи успеха/ошибки при выполнении вызова службы в контроллере, а не внутри службы. Это позволяет мне перемещать обновления просмотра в контроллер. Является ли это правильным местом для просмотра обновлений?

this.getPeople = function() { 
    PersonService.getPeople() 
    .then(function(data) { 
     $scope.myData = JSON.parse(data); 
     controllerScope.getPeopleButtonText = "Refresh"; 
     controllerScope.errorMessage = ""; 
    }, function(error) { 
     controllerScope.errorMessage = "An error has occurred." 
    }); 
}; 

Вот пример plnkr http://plnkr.co/edit/tzuSX3aAcUqpH5bM7cIa?p=preview

Answer 1

1. Никогда не используйте $rootScope для хранения данных
2. Используйте шаблон MVC, если вам нравится, так:

Один вид, имеет один контроллер , имеет столько услуг, сколько вам нужно.

• Ваше мнение показывает данные, которые находятся в $scope
• Ваш контроллер получает данные из PersonService
• PersonService (или только сервис API) получает данные из внутреннего интерфейса.

Наилучшая практика будет, как это (simplyfied):

Api.js

angular 
    .module('api', []) 
    .service('Api', Api); 

Api.$inject = ['$http']; 

function Api($http) { 

    var baseUrl = '/api/url/'; 

    function getPersons() { 
     return $http({ 
      method: 'GET', 
      url: baseUrl + 'YOUR/PERSON/URL' 
     }); 
    } 

    return { 
     getPersons: getPersons 
    } 
} 

PersonController.js

angular 
    .module('personApp') 
    .controller('PersonController', PersonController); 

PersonController.$inject = ['$scope', '$state', 'Api']; 

function PersonController($scope, $state, Api) { 

    $scope.getPersons = function() { 
     Api.getPersons().then(function(response) { 
      $scope.persons = response.data; 
     }, function(error) { 
      // error message 
     }); 
    }; 
} 

Лица.HTML

<div ng-controller="PersonController"> 
    <div id="grid1" ui-grid="{ data: persons }" class="grid"></div> 
    <button ng-click="getPersons()"></button> 
</div> 

Резюме

1. Ваш view отображает данные, которые внутри $scope
2. мнение имеет controller, который там просто получать данные и хранить его в $scope, предоставляя функции для кнопок
3. Ваши services доставляют данные на e