angularjs 后端更改时自动重新加载

Question

我的应用程序需要在后端更改时自动刷新。我添加了一个按钮以将 GET 重新加载到我的后端，但我不希望这样做。这是我的代码

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

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

谢谢

Answer 1

您可以定期重新加载数据。否则，您需要设置类似 socket.io or Pusher 的设置，并在服务器更新时向浏览器推送通知。

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

Answer 2

您可以按照记录 here 使用 $interval(fuctionToRepeat, intervalInMillisecond)。

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.

angularjs 后端更改时自动重新加载

angularjs auto reload when backend change

rest

frontend

backend

angularjs