2

매우 큰 JSON 파일 (거의 10,000 줄)을 검색하기 위해 각도 서비스가 사라졌습니다.AngularJS - 서비스 호출 및 데이터 바인딩 성능 향상

내가 직면 한 문제는 (예상대로) 프런트 엔드에 데이터를 바인딩하는 데 시간이 걸리는 것입니다.

샘플 컨트롤러 :

$scope.dataLoaded = false; 

serviceReport.getData(function (data) { 
    $scope.data1 = data.data1; 
    $scope.data2 = data.data2; 
    $scope.data3 = data.data3; 
    $scope.data4 = data.data4; 
    $scope.data5 = data.data5; 
    $scope.data6 = data.data6; 
    $scope.data7 = data.data7; 
    $scope.data8 = data.data8; 
    $scope.data9 = data.data9; 
    $scope.data10 = data.data10; 
    $scope.data11 = data.data11; 
    $scope.data12 = data.data12; 
    $scope.data13 = data.data13; 
    $scope.data14 = data.data14; 
    $scope.data15 = data.data15; 
    $scope.data16 = data.data16; 
    $scope.data17 = data.data17; 

    $scope.dataLoaded = true; 
}); 

서비스 :

app.factory('serviceReport', function($http) { 
    return { 
     getData: function(value,done) { 
      $http.get('data.json', { 
       }) 
      .success(function(data) { 
       done(data); 
      }) 
      .error(function(error) { 
       alert('An error occured'); 
      }); 
     } 
    } 
}); 

나는 사실 dataLoaded =이이 데이터가 될 수 있습니다 나타냅니다으로 제거 될 때 내 HTML 요소에 겨 - 망토를 가지고 표시됩니다.

서비스 호출/데이터 바인딩을 어떻게 향상시킬 수 있습니까? 전화를 나누면 도움이 될까요?

+1

로더가 데이터를로드하는 동안 왜 보이지 않습니까? – gkalpak

+0

@ExpertSystem - 저는 현재 로더를 보여주고 있습니다. 내가 물어 보는 것 같아요. 페이지 상단에있는 나머지 데이터를로드하면서 최대한 빨리 data1,2,3,4를 표시 할 수 있습니까? –

+0

하지만 지연은 아마도 데이터를 가져 오는 중입니다. 따라서 요청을 분할하는 것 이외에는 할 수있는 일이 많지 않습니다. – gkalpak

답변

1

서버 측 솔루션은 응답 크기를 줄이고 응답을 줄여 더 많은 요청을 처리하는 것입니다. 처음에 전체 응답이 실제로 필요합니까? 전체 응답을 바인딩하면 많은 관찰자가 생성되므로 이후의 모든 다이제스트가 느려질 것이라는 점을 알아야합니다.

클라이언트 쪽 솔루션은 응답 부분을 $ scope. $ apply() 또는 $ timeout()의 콜백 매개 변수로 루프의 일부로 바인딩하는 것입니다.