需要Angularjs应用程序逻辑结构帮助

Question

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

我有一个应用程序在启动时从服务器检索一些数据。 这里要注意的重要一点是，我必须对服务器使用多个请求，而不仅仅是一个请求来获取数据。 （这样做是因为数据是从多个 3rd-party 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，它通过成功回调的返回值解决。

如果你需要在所有转换后的响应都可用时做某事，那么你可以在 globall 回调中做：

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