AngularJS ngcontroller to be reloading data periodically

Question

I have this working implementation af a angularJS app which fetches some links from an URL and paint them. However the links on the URL are being updated constantly, I would like to update periodcially this $scope.listlinks, let say every 10 seconds.

I tried playing with setInterval with no luck.

Javascript

var App = angular.module('App', []);
App.controller('ListLinksCtrl', 
function get($scope, $http ) {
  $http.get('http://example_url.com/my_changing_links_json').then(
       function(res){$scope.listlinks = res.data;});
}
);

HTML

<div id="cnt1" ng-controller="ListLinksCtrl">
   <div ng-repeat="singlelink in listlinks">
        <a href="{{ singlelink.url }}"> 
           {{ singlelink.destination }} 
        </a>
   </div>
</div>

Answer 1

While jvandemo's answer will work, I think it can be improved slightly. By using setInterval, it breaks the dependency injection convention that Angular follows and makes unit testing of the controller difficult.

Angular doesn't currently support setInterval through its built-in services, but you can use the $timeout service to produce the same functionality. I'd change the controller to this:

app.controller('MainCtrl', function($scope, $http, $timeout) {

  // Function to get the data
  $scope.getData = function(){
    $http.get('style.css')
      .success(function(data, status, headers, config) {

      // Your code here
      console.log('Fetched data!');
    });
  };

  // Function to replicate setInterval using $timeout service.
  $scope.intervalFunction = function(){
    $timeout(function() {
      $scope.getData();
      $scope.intervalFunction();
    }, 1000)
  };

  // Kick off the interval
  $scope.intervalFunction();

});

Answer 2

2016

---

$interval is made for this:

    $interval(function() {
        // your stuff          
    }, 1000);

Don't forget to inject $interval in your controller

app.controller('ExampleController', ['$scope', '$interval',function($scope, $interval) {
      $interval(function() {
            // your stuff          
      , 1000); 
}]);

https://docs.angularjs.org/api/ng/service/$interval

Answer 3

You can use the setInterval function but you need to encapsulate your logic in a function like this:

app.controller('MainCtrl', function($scope, $http) {

  // Function to get the data
  $scope.getData = function(){
    $http.get('style.css')
      .success(function(data, status, headers, config) {

        // Your code here
        console.log('Fetched data!');
      });
  };

  // Run function every second
  setInterval($scope.getData, 1000);

});

I've created a working plnkr for your at: http://plnkr.co/edit/vNCbBm45VYGzEQ7cIxjZ?p=preview

Hope that helps!

Answer 4

This answer builds off of drew.walker's answer, but makes it so that changing controllers will not spawn multiple endlessly running refreshes. It also runs getData immediately, instead of delaying it 1 second.

It depends on you using Angular routes and setting Ctrls in them. If you don't, you'll need another way to determine if this controller is in scope.

app.controller('MainCtrl', function($scope, $rootScope, $route, $timeout) {

    // Function to get the data
    $scope.getData = function() {
        ...
    };

    // Get the data immediately, interval function will run 1 second later
    $scope.getData();

    // Function to replicate setInterval using $timeout service.
    $scope.intervalFunction = function() {
        var currentCtrl = $route.current.$$route.controller;
        var currentlyRunning = $rootScope.myAppMainCtrlRefreshRunning;
        //do not run if the MainCtrl is not in scope
        //do not run if we've already got another timeout underway (in case someone jumps back and forth between
        //controllers without waiting 1 second between)
        if (currentCtrl === "MainCtrl" && !currentlyRunning) {
            $timeout(function() {
                $rootScope.myAppMainCtrlRefreshRunning = true;
                $scope.getData();
                $scope.intervalFunction();
                $rootScope.myAppMainCtrlRefreshRunning = false;
            }, 1000);
        };
    };
    // Kick off the interval
    $scope.intervalFunction();

});