AngularJS에서의 실시간 업데이트

Question

각도를 익히기 위해, & Codeigniter 나는 (CI로부터) 새로운 초기 튜토리얼을 확장했다. 현재 단계에서는 자동으로 새 게시물을 표시합니다 & 페이지에서 삭제 된 게시물을 제거합니다 물론 & 물론 모델/DB를 업데이트하십시오. - 나는 이것을 AngularJS에게 가장 효과적인 방법이라고 생각하지 않습니다. 내 코드에 대한 피드백이 도움이 될 것입니다. -

그러나 내 관심사는 각도로 차등 업데이트하는 방법은 무엇입니까? jQuery를 통해이 작업을 완료했을 때 간단히 ajax url에 타임 스탬프를 추가했습니다. 그런 다음 컨트롤러에서 그 시간을 잡아 & 변수에 할당 & 다른 게시물을 가져 오기 위해 비교를 수행하십시오. 그것은 훌륭하게 작동했습니다. 새로운 이야기를 끌어낼뿐입니다 (존재하는 경우). 존재하지 않으면 많은 오버 헤드가 발생하지 않습니다.

그러나 Angular에서는 요청할 때마다 (매 5 초마다) 전체 JSON 데이터를 가져옵니다. 대규모 앱의 경우 과도한 대역폭을 소비합니다. 어떻게 차별화하고 새 게시물 만 가져올 수 있습니까?

controllers.js (각 컨트롤러)

var timestamp = ''; 
function NewsListCtrl($scope, $http, $timeout) { 

$scope.newsRequest = function(){ 
    $http.get('/ci/index.php/news/get_news_ajax/' + timestamp).success(function(data) { 
     timestamp = $.now(); 
     $scope.news = data; 
    }); 
}; 
$scope.newsRequest(); 
setInterval(function(){ 
    $scope.$apply(function(){ 
      $scope.newsRequest(); 
    }); 
}, 5000); 

} 

위의 코드가 성공적으로 (CodeIgniter의에 따라 3)를 URL의 세번째 세그먼트에 시간을 전달합니다. 페이지가 처음로드되면 모든 게시물이 나타납니다. 그런 다음 newsRequest()가 다시 발생하면 빈 페이지가 표시됩니다. 새로운 게시물이 없기 때문에 $ array.news에 빈 배열을 할당한다고 가정합니다. 새로운 게시물이 추가되도록 어떻게 수정해야합니까?

은 (그리고 같은 난 내가 최대한 반복 겨 AngularJS와 활용하고 있지 않다 생각했다. 누군가가 더 나은 솔루션이있는 경우, 가르치 려주세요!)

Answer 1

필자는 필자가 필요로하는 방식대로 작동하게되었습니다. 내 논리에는 큰 결함이있었습니다. 위의 코드에서 계속 현재의 시간 인 $ .now()을 전달하려고했지만 유효한 로직을 가지려면 마지막 게시물 시간에 전달해야했습니다. 그런 식으로 내가 뽑은 마지막 게시물 이후에 만들어진 게시물이 있는지 비교할 수 있습니다.

var timestamp = ''; 
function NewsListCtrl($scope, $http, $timeout) { 
    $scope.news = []; 
    $scope.newsRequest = function(){ 
     $http.get('/ci/index.php/news/get_news_ajax/' + timestamp).success(function(data) { 
      $scope.news = data.recent.concat($scope.news); 
      if (data.recent[0] != null){ 
       timestamp = data.recent[0].time; 
      } 
     }); 
    }; 
$scope.newsRequest(); 
setInterval(function(){ 
    $scope.$apply(function(){ 
      $scope.newsRequest(); 
    }); 
}, 5000); 

또 다른 큰 문제는 내 데이터 객체 내에서, 나는 내부 배열을했다이었다. 그래서 나는 그 배열 내에서 사물을 접근 할 필요가있었습니다. 내 견해로는 다소 보상을 받았지만, 그것은 조금 엉성함이었습니다. 각도 조절기가 처리하는 것이 훨씬 깨끗합니다.

$scope.news = data.recent.concat($scope.news); 

처음 작업을 얻기 후에, 나는 처음에 $ scope.news의 끝에 data.recent을 concating되었다 지적하는

뭔가 코드 줄 것입니다.그러나 이와 같이하면 새 항목이 맨 위에 표시되는 대신보기 끝에 표시됩니다. $ scope.news이 새 객체/배열에 연결되도록하여 상위에 추가하는 간단한 수정 방법이었습니다.

Answer 2

당신은로드를 CONCAT 필요 데이터를 $ scope.news에 추가하십시오. 그것은 그렇지 않으면

$scope.news.concat(data); 

array- 쉽게

경우에는로드 된 데이터를 반복하고 새로운 비트를 추가해야 할 수 있습니다.