需要Angularjs应用逻辑结构帮助

Question

我最近刚开始使用Angular，如果有人能帮助我如何以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>

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

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

如果有人能告诉我如何在angular中正确地构建这种应用程序，那就太好了。

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，该Promise通过成功回调的返回值来解决。

如果你需要在所有转换后的响应可用时做一些事情，那么你可以在全局回调中做:

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