Angular js同時從多個表中獲取數據

Question

這不是一個關於我陷入困境的問題。這是一個關於良好實踐和表現的問題。我的代碼工作正常。但我想知道做這個任務的正確方法。也許我是對的。只要看看場景和代碼，請給我建議正確的方法。

要求

我有近數據庫約20桌，當用戶登錄並轉至儀表板頁面，我需要從所有表顯示的數據。不需要顯示所有數據，因此我使用Angular $ 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功能界定及

$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 
    }); 
}); 

這樣，您可以使用一個ng-repeat循環遍歷所有表格數據。

使用$ q.all（）

這僅適用，如果你不能合併你API級別要求。在你的例子中，你正在手動調用該功能25次。它將使意義做一個for循環，從1到25和PU每個請求到一個數組：

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... 
}); 

我希望這對你有幫助。如果您有問題，請告訴我。