Question

我创建了一个用户可以喜欢图片的应用。在类似之后，计数必须增加一个。

问题是应用程序的整个内容（大约20个项目（文本，图像））被重新下载，这使得应用程序无响应，尤其是在移动网络上。

我知道AngularJS的视图是基于模型的，但有没有更好的方法来处理简单的功能＆＃34;没有重新加载整个内容以进行类似计数的更新？

Answer 1

AngularJS的重点不是重新加载整个页面。我甚至无法想到如何在没有明确命令angularjs的情况下实现整页重新加载的方法。例如，这个小应用程序将在没有页面重新加载的情况下执行此操作：

angular.module("App", [])
.service("LikeService", function($http, $q, $timeout) {
  function getLikeCount() {
    // return $http.get("/api/yourLikeCountGetterApi").then(response => response.data);
    
    // Simulate the endpoint with returning a random number between 0..50 after 1 secs
    return $timeout(angular.noop, 1000).then(() => (Math.random() * 50)|0);
  }
  
  function sendLike() {
    // return $http.post("/api/yourLikeCountIncreaseApi");
    
    return $timeout(angular.noop, 500).then(() => {
      // simulate occasional failure by 20% chance
      if (Math.random() < 0.2) {
        return $q.reject({});
      }
    });
  }
         
  return { getLikeCount, sendLike };
})
.controller("MyController", function($scope, LikeService) {
  $scope.likeCount = 0;
  $scope.loaded = false;
  
  LikeService.getLikeCount().then(count => {
    $scope.likeCount = count;
  }).finally(() => {
    $scope.loaded = true;
  });
  
  $scope.doLike = () => {
    $scope.likeCount++;
    LikeService.sendLike().then(null, error => {
      // in case of an error, revert local increase
      $scope.likeCount--;
    });
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>

<div ng-app="App">
  <div ng-controller="MyController">
    <div>Like count: {{ loaded ? likeCount : "..." }}</div>
    <button ng-click="doLike()">LIKE</button>
  </div>
</div>

在AngularJS中实现类似功能，而无需在单击时再次重新下载整个内容

1 个答案: