angularjs auto reload when backend change

Question

I need in my app to auto refresh when the back-end changes. I added a button to reload the GET to my back-end but I don't wish do that. This is my code

<body data-ng-app="myPr">
  <div ng-controller="TodosController">
    <div ng-repeat="todo in todos">
      <p>{{todo.title}} ...... {{todo.is_completed}}</p>
    </div>
    <button ng-click="reload()">Reload</button>
  </div>
</body>

my app.js

var myPr = angular.module('myPr',[]);

myPr.controller("TodosController", function ($scope,$http){

  $scope.reload = function () {
    $http.get('http://localhost:3000/api/todos').
        success(function (data) {
          $scope.todos = data.todos;
      });
  };
  $scope.reload();
});

Thanks

David Boskovic · Accepted Answer · 2015-10-22 03:50:05Z

16

You could just reload your data at regular intervals. Otherwise you'd need to setup something like socket.io or Pusher and push notifications to the browser when the server updates.

var myPr = angular.module('myPr',[]);

myPr.controller("TodosController", function ($scope,$http,$timeout){

  $scope.reload = function () {
    $http.get('http://localhost:3000/api/todos').
        success(function (data) {
          $scope.todos = data.todos;
      });

    $timeout(function(){
      $scope.reload();
    },30000)
  };
  $scope.reload();
});

answered Oct 22, 2015 at 3:50

David Boskovic

1,53910 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SolessChong Over a year ago

You should use $interval as in @Kelvin's answer. Timeout just execute once.

Aditya Parmar Over a year ago

we can use $interval, But how to stop it?

Jared Chu Over a year ago

it's actually working as an interval, to stop it you just need to use a flag to stop calling the timeout function.

David Boskovic · Accepted Answer · 2015-10-22 04:14:28Z

12

You can use $interval(fuctionToRepeat, intervalInMillisecond) as documented here.

var myPr = angular.module('myPr',[]);

myPr.controller("TodosController", function ($scope,$http){

    $scope.reload = function () {
        $http.get('http://localhost:3000/api/todos').
            success(function (data) {
                $scope.todos = data.todos;
            });
    };
    $scope.reload();
    $interval($scope.reload, 5000);
});

Note: Intervals created by this service must be explicitly destroyed when you are finished with them. In particular they are not automatically destroyed when a controller's scope or a directive's element are destroyed. You should take this into consideration and make sure to always cancel the interval at the appropriate moment.

edited Oct 22, 2015 at 4:14

David Boskovic

1,53910 silver badges15 bronze badges

answered Oct 22, 2015 at 3:57

Kelvin Lai

2,2897 gold badges24 silver badges27 bronze badges

1 Comment

Pavan Jadda Over a year ago

I used $interval, it's pretty good. Make sure to include decent interval time to prevent too much load on backend

Collectives™ on Stack Overflow

angularjs auto reload when backend change

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related