Question

我最近开始使用Angular，非常感谢有关如何以角度方式正确构建代码的一些帮助。这更像是一个元问题，而不是技术问题。

我有一个应用程序，可以在启动时从服务器检索一些数据。这里需要注意的一件重要事情是，我必须对服务器使用多个请求，而不是仅使用一个请求来获取数据。（这样做是因为从多个第三方API检索数据，并且可以更快地逐个检索它）

我还需要在加载所有数据时执行一些代码并在每次迭代时执行（我在此示例中计算平均分数）

我的控制器看起来像这样：

angular.module('app', []).
  controller('myController', function() {
    $scope.data = [];
    $scope.averageScore = 0;

    var requests = ['something', 'other_thing'];
    var scoreCount = 0;
    // Load data
    for(var i=0; i<requests.length; i++) {
      myService.getData(requests[i]).then(function(response) {
        $scope.data.push(response.data);
        // Calculate average score
        scoreCount += response.data.score;
        $scope.averageScore = scoreCount/$scope.data.length;

        if($scope.data.length == requests.length) {
          // All data is loaded, execute some code..
        }
      });
    }

  });

然后在模板中我有ng-repeat：

<div class="items-container" ng-controller="myController">
  <h1> Average score: {{averageScore}}</h1>

  <div class="item-block" ng-repeat="item in data">
    <span> {{item.name}} </span>
    <span> {{item.score}} </span>
  </div>
</div>

我不喜欢这个设置，在我的实际应用程序中，加载数据的循环要“更大”，并且对接收的数据执行了更多操作。

我认为将每个数据项抽象为一个指令并在其中执行所需的操作将是一种更好的方法，但我在其他讨论中读到，使用服务来检索指令中的数据并不是一种好的做法。如果每个项目都是指令，我也不知道如何加载所有数据。

如果有人可以指出我这个应用程序如何在角度上正确组织，那将会很棒。

Answer 1

您可以使用$q.all()并行执行所有请求，并且只有在完成所有承诺时才会调用回调：

$q.all([myService.getData('something'), myService.getData('other_thing')]).
    then(function(array) {
        var somethingResponse = array[0];
        var otherThingResponse = array[1];
        ...
    });

如果您需要对每个检索到的数据完成工作，那么您应该在服务中执行此操作：

function getSomething() {
    return getData('something').then(function(response) {
        return transformResponse1(response);
    });
}

function getOtherTthing() {
    return getData('other_thing').then(function(response) {
        return transformResponse2(response);
    });
}

确实，then()返回一个新的Promise，它通过成功回调的返回值解析。

如果您需要在所有已转换的响应都可用时执行某些操作，那么您可以在全球回调中执行此操作：

$q.all([myService.getSomething(), myService.getOtherThing()]).
    then(function(array) {
        var transformedResponse1 = array[0];
        var transformedResponse2 = array[1];
        // do what you need here
    });

Angularjs app逻辑结构需要帮助

1 个答案: