Realtime Updates in AngularJS

问题

In an attempt to learn Angular & Codeigniter I have expanded the initial new tutorial (from CI). In it's current stage, it automatically displays new posts & removes deleted posts from the page & of course updates model/DB. -- I assume I'm not doing this the most effective way for AngularJS though. Feedback on my code would be helpful for that. --

However, my main concern is how to do differential updates in Angular? When I accomplished this via jQuery, I simply appended a timestamp to my ajax url. Then I would grab that time in the controller & assign it to a variable & do a comparison to pull any additional posts. It worked great. It would only pull new stories (if they exist), if they didn't exist then there wouldn't be much overhead.

However, currently in Angular, it's pulling the entire JSON data with every request (every 5 seconds) - for large scale apps, this will consume excessive bandwidth. How can I differentiate that and only pull new posts?

controllers.js (angular controller)

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

}

The above code successfully passes the time into the 3rd Segment of the URL (3rd according to Codeigniter). When the page initially loads, all posts appear. Then after newsRequest() fires again, I get a blank page. I assume because there aren't any newer posts, it assigns the empty array to my $scope.news. How would I fix this so that the newer posts are appended?

(And like I said, I assume I'm not taking advantage of AngularJS ng-repeat to the fullest. If someone has a better solution, please enlighten me!)

回答1:

You need to concat the loaded data to $scope.news. If it is an array- easy

 $scope.news.concat(data);

otherwise, you may need to iterate over the loaded data and add the new bits.

回答2:

I ended up getting things to work the way I needed them to. There was a huge flaw in my logic. In my code above, I kept trying to pass in the current time $.now(), but in order to have valid logic, I needed to pass in the time of the last post. That way I can compare if there are any posts that had been created after the last one that I had pulled.

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

Another big issue was that within my data object, I had an array inside. So I needed to be accessing things within that array. I had had somewhat compensated for it in my view, but that was just a bit sloppy. It's much more clean to let my Angular Controller handle it.

Something to point out is this line of code:

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

After first getting it working, I was initially concating data.recent to the end of $scope.news. But doing it like this would display the new item to the end of the view - rather than at the top. It was a simple fix to get it to append to the top by having $scope.news concat to my new object/array.

来源：https://stackoverflow.com/questions/15440908/realtime-updates-in-angularjs

标签

codeigniter

optimization

angularjs

real-time