角度のあるjsは複数のテーブルから同時にデータを取得します

Question

これは私が立ち往生している場所に関する質問ではありません。それは良い練習とパフォーマンスについての質問です。私のコードは適切に動作しています。しかし、私はこの作業を行う正しい方法を知りたい。多分私はすでに正しいです。シナリオとコードを見て、正しい方法を教えてください。

要件

私は、ときにユーザーがログインし、データベースには約20のテーブルの近くに持っていると私はすべてのテーブルからデータを表示する必要があるダッシュボードページに移動します。すべてのデータを表示する必要はないので、角度$ httpを使用して各テーブルから25行を取り出し、ダッシュボードページに表示します。

コード

マイ角度jsのコードは次のとおりです。

$scope.$on('$viewContentLoaded', function (event) { 

     $scope.loadDashboardQue(event, '/route1/getDashboardData?user_id=123', 'table1'); 

     $scope.loadDashboardQue(event, '/route2/getDashboardData?user_id=123', 'table2'); 

     $scope.loadDashboardQue(event, '/route3/getDashboardData?user_id=123', 'table3'); 

     $scope.loadDashboardQue(event, '/route4/getDashboardData?user_id=123', 'table4'); 

     $scope.loadDashboardQue(event, '/route5/getDashboardData?user_id=123', 'table5'); 

     $scope.loadDashboardQue(event, '/routeN/getDashboardData?user_id=123', 'tableN'); 
}); 

今loadDashboardQue機能defination

$scope.loadDashboardQue = function (event, url, tableName) { 
    $http.get(url) 
     .success(function (response) { 
      if (response.status === 'success') { 
       //Assigning data to HTML table 
       if (tableName === 'table1') { 
        $scope.table1Data = response.data; 
       } 
       if (tableName === 'table2') { 
        $scope.table2Data = response.data; 
       } 
       if (tableName === 'table3') { 
        $scope.table3Data = response.data; 
       } 
       if (tableName === 'table4') { 
        $scope.table4Data = response.data; 
       } 
       if (tableName === 'table5') { 
        $scope.table5Data = response.data; 
       } 
       if (tableName === 'tableN') { 
        $scope.tableNData = response.data; 
       } 
      } else { 
       console.log("Something wrong while fetching data from table ", tableName); 
      } 
     }) 
     .error(function (error) { 
      console.log("The error is :", err); 
     }); 
}); 

HTMLテーブル

<table style="width:100%"> 
    <tr> 
    <th>Nme</th> 
    <th>Id</th> 
    <th>Contact No</th> 
    </tr> 
    <!--Table1 Data--> 
    <tr ng-repeat="data in table1Data"> 
    <td>{{ data.user_name }}</td> 
    <td>{{ data.user_id }}</td> 
    <td>{{ data.mobile }}</td> 
    </tr> 
    <!--Table2 Data-->  
    <tr ng-repeat="data in table2Data"> 
    <td>{{ data.customerName }}</td> 
    <td>{{ data.customerId }}</td> 
    <td>{{ data.phone }}</td> 
    </tr> 
    <!--Table3 Data-->  
    <tr ng-repeat="data in table3Data"> 
    <td>{{ data.student_name }}</td> 
    <td>{{ data.roll_no }}</td> 
    <td>{{ data.mobile }}</td> 
    . 
    . 
    . 
    <!--TableN Data-->  
    <tr ng-repeat="data in tableNData"> 
    <td>{{ data.developer_name }}</td> 
    <td>{{ data.id }}</td> 
    <td>{{ data.mobile }}</td> 
    </tr> 
</table> 

各テーブルに列名が異なるので、すべてのデータを単一のng-repeatに表示することはできません。だから私はそれぞれのテーブルごとに別々に書いたng-repeatです。

このコードは正常に動作していますが、ページの読み込みが開始されるとは7秒以上かかりますこれは私の心配です（パフォーマンスは賢明です）。ですから、これを達成するためのより良い方法があれば教えてください。

貴重な時間をいただきありがとうございます。

Answer 1

マージは、すべてのテーブルからデータを取得し、一つのリクエストでそれを返しますあなたのAPIの新しいエンドポイントを作成します

を要求します。これは、特にあなたのリクエストがクロスドメインである場合には、時間を節約します。

以下は、アプリケーションの速度を向上させることはありませんが、ここではベストプラクティスについて質問しました。

抽象APIは、あなたのコントローラで$ HTTPを使用しないようにしてくださいサービスに

を呼び出します。コントローラーは、データを取得する方法と、データを取得する必要があるだけでなく、データを取得する必要があることだけを考慮する必要があります。

地図は

結果、あなたのテンプレートに単一ngのリピートを使用したい場合（あなたはすべての要求を合併した場合や、結果の一部）、すべての結果をマップするので、オブジェクト構造は、すべてのテーブルに同じです。以下は、table1の簡単な例です。

$scope.tableData = []; 

result.data.forEach(row => { 
    $scope.tableData.push({ 
     id: row.user_id, 
     mobile: row.mobile, 
     name: user_id 
    }); 
}); 

この方法では、1回のng-repeatを使用してすべてのテーブルデータをループすることができます。

使用の$ q.all（）

あなたはあなたのAPIレベルで要求をマージすることができない場合のみ、これが適用されます。あなたの例では、関数を手動で25回呼び出しています。これは、1から25及びPU配列に各要求にforループを作るために理にかなって：

const promises = []; 

for (let i = 1; i <= 25; i++) { 
    promises.push(loadDashboardQue(YOUR_ARGS_HERE)); 
} 

あなたが解決し、応答結果にアクセスするためにそれらのすべてを待つことができた後によるれます配列を、あなたの要求をpromises変数にプッシュしたのと同じ順序で返します。

$q.all(promises).then(response => { 
    // response[0] is table1data etc... 
}); 

私はこれが何とか役立つことを願っています。あなたはいくつかの質問がある場合は私に教えてください。