Question

我目前有一个带有一个模块的Angular应用程序。该模块定义了控制器和服务。我目前正在使用该服务来更新我的观点。服务应该更新视图逻辑吗？或者应该在单独的Angular组件中完成？

的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暴露在根范围内。

编辑11月19日 我使用Angular Promise来处理控制器中服务调用的成功/错误情况，而不是服务内部。这允许我将视图更新移动到控制器中。这是保持视图更新的正确位置吗？

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

绝不使用$rootScope来存储数据
如果您愿意，请使用MVC模式，所以：

一个视图，有一个控制器，拥有您需要的任意数量的服务。

您的视图显示$scope
您的Controller正在从您的PersonService获取数据
PersonService（或只是API服务）从后端获取数据。

最佳做法就是这样（简单）：

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

<强> Persons.html

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

<强>摘要

您的view会显示$scope
该视图有一个controller，用于获取数据并将其存储在$scope中，为按钮提供功能
您的services正在向控制器提供数据

AngularJS修改视图的最佳实践

1 个答案: