AngularJSのコンテンツを同時に表示

Question

私はAngularの初心者ですが、この問題を解決するにはどのように手掛かりがありません。 私は、お金をお互いに負う2人のユーザーがいるとします。ユーザーは「A」と「B」です。

'A'には5件の取引があり、5000 $を 'B'に支払う必要があります。そして 'B'は50000件の取引を持ち、100000ドルを 'A'に支払わなければなりません。この瞬間、私は1の代わりに2つの取引を見て、私は頭で数学をしなければなりません。コードは次のようになります。

$scope.charges = {}; 

totalChargeUserToFactory.query({ 
    id: null 
}).$promise.then(function (data) { 
    $scope.charges.to = data; 

    totalChargeUserFromFactory.query({ 
     id: null 
    }).$promise.then(function (data) { 
     $scope.charges.from = data; 

     for (var i = 0; i < $scope.charges.to.length; i++) { 
      for (var j = 0; j < $scope.charges.from.length; j++) { 
       if ($scope.charges.to[i].userFromId === $scope.charges.from[j].userToId) { 
        if ($scope.charges.to[i].charge < $scope.charges.from[j].charge) { 
         $scope.charges.from[j].charge = (parseFloat($scope.charges.from[j].charge) 
         - parseFloat($scope.charges.to[i].charge)).toFixed(2); 
         $scope.charges.to.splice(i, 1); 
         i--; 
        } else { 
         $scope.charges.to[i].charge = (parseFloat($scope.charges.to[i].charge) 
         - parseFloat($scope.charges.from[j].charge)).toFixed(2); 
         $scope.charges.from.splice(j, 1); 
         j--; 
        } 
       } 
      } 
     } 

    }); 
}); 

そして今、本当の問題はoccures：

$scope.charges = {}; 

totalChargeUserToFactory.query({ 
    id: null 
}).$promise.then(function (data) { 
    $scope.charges.to = data; 
}); 

totalChargeUserFromFactory.query({ 
    id: null 
}).$promise.then(function (data) { 
    $scope.charges.from = data; 
}); 

だから私はちょうど私の問題を解決するためにそれを変更することを決めました。トランザクションが多すぎると、コンテンツがロードされるまでに時間がかかります。 Aがちょうどロードされているとき、Bは2秒以上ロードされていて、画面に表示されます。それは良い見ていない...あなたは私にこれを避けるためのヒントを教えてもらえますか？このコードに基づいていますか？私は感謝します。

私は解決策を見つけるためにGoogleを探していましたが、私の問題に直接影響を与える何か不満足なものは見つかりませんでした。

Answer 1

$q.all()の助けを借りて両方の約束が解決された場合、初期設計を使用してコードを実行することができます。

$scope.charges = {}; 

var q1 = totalChargeUserToFactory.query({ 
    id: null 
}).$promise.then(function (data) { 
    $scope.charges.to = data; 
    return data; 
}); 

var q2 = totalChargeUserFromFactory.query({ 
    id: null 
}).$promise.then(function (data) { 
    $scope.charges.from = data; 
    return data; 
}); 

$q.all([q1, q2]).then(function(data) { 
    // do math here 
}) 

Answer 2

$ q.allを使用すると、すべてのapi呼び出しが完了して何かが表示されるまで待つことができます。

$q.all([ 
    totalChargeUserToFactory.query({ 
    id: null 
    }), 
    totalChargeUserFromFactory.query({ 
     id: null 
    }) 
]).then(function(values) { 
    $scope.charges.to = values[0]; 
    $scope.charges.from = values[1]; 
    });