CODEWITHSUNDEEP
angularjsrestfrontendbackend
user3486836
user3486836

Reputation: 163

angularjs auto reload when backend change

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

Upvotes: 10

Views: 43696

Answers (2)

Kelvin Lai
Kelvin Lai

Reputation: 2279

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.

Upvotes: 12

David Boskovic
David Boskovic

Reputation: 1519

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

Upvotes: 16

Related Questions