Angular 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 기능 해상력

$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 번 호출하고 있습니다. 그것은 1에서 25 PU 배열로 각 요청에 루프를 만들기 위해 나을 :

const promises = []; 

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

당신이 해결하고 응답 결과를 액세스하기 위해 그들 모두를 기다릴 수 후으로하는 것 배열을 약속 변수에 요청을 푸는 순서와 동일한 순서로 정렬합니다.

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

나는 당신이 어떻게 든 도움이되기를 바랍니다. 네가 몇 가지 질문이 있으면 알려줘.