Question

我有一个包含游戏集合的数据库以及关于这些游戏的评论集合。每个游戏都有一个唯一的ID，每个评论都有一个字段game_id。

在客户端，我在作用域中编写了一个异步函数，该函数从db中检索游戏的注释数并返回一个promise。什么是在HTML中显示价值的正确（最干净）方式？

我知道有不同的方法可以做到这一点。我正在寻找最简单，最干净的方式。

此代码是否有效？

//code in HTML
<div ng-repeat="game in games">
<span>{{game.date}}</span>
<span>{{game.home}}</span>
<span>{{game.away}}</span>
<span>{{getNumberOfComments(game.id)}} Comments</span>  
</div>

app.factory('apiService', function($http) {
  return {
    getGames: function() {
      return $http.get('/api/games',{cache: true});
    },
   getCommentsCount: function(game_id) {
      return $http.get('/api/CommentsCount/' + id);
    }
  };
});

app.controller('MyCtrl', function ($scope, apiService) {
  gameService.getGames().then(function(resp) {
        $scope.games = resp.data;
  });

 $scope.getNumberOfComments = function(id){ 
     return apiService.getCommentsCount(id).then(function(resp){
       return resp.data;
  });
 });
});

后续问题：如果我有很多游戏（比方说30），每个游戏向服务器发送30个HTTP请求是不是一个坏主意？最好发送一个名为＆＃34; getAllComments＆＃34;的请求。并从repsonse检索每个游戏的评论数量？

例如：

function getAllComments() {
   $http.get('/allComments',function(data){
       $scope.games.forEach(function(game){
           game.commentsCount = data[game.id];
       });
   });
}

 //code in HTML
<div ng-repeat="game in games">
<span>{{game.commentsCount}} Comments</span>  
</div>

这似乎是一个很好的解决方案 - 但是当我有超过30场比赛但我希望向用户展示30场比赛并让他有可能加载更多时，问题就开始了。然后我实际上要求的评论比我需要的多，我必须在每次用户加载更多游戏时运行此功能。这似乎是一个复杂而有效的解决方案。

修改

一种解决方案是在服务器端聚合信息，让客户端发送1个HTTP请求，响应将包含所有信息。为了实现这一点，我需要迭代服务器端的游戏列表，并为每个游戏从注释集合中检索注释计数。这个解决方案的缺点是客户端需要更长的时间才能看到游戏列表。我宁愿客户首先看到游戏列表，然后再加载评论数量。另一个缺点是NodeJS（我正在使用的后端框架），这样的代码将阻止主线程服务于其他客户端。因此，我不想在服务器端进行任何迭代。

需要考虑的另一件事是缓存。我想保存在$ http缓存中检索游戏的HTTP请求。因为游戏列表是静态的并且不会改变，所以与评论计数不同，这总是在增加。这样，当客户端移动到不同的路线并返回到游戏列表时，游戏将立即显示。但我确实希望每次用户返回游戏页面时加载评论计数。

Answer 1

一种干净的方法是首先将使http调用的代码移动到服务：

app.factory('gameService', function($http) {
  return {
    getGames: function() {
      return $http.get('/api/games');
    }
  };
});

然后，在控制器中注入服务，调用get方法并设置视图使用的范围值：

app.controller('MyCtrl', function ($scope, gameService) {
  $scope.model = {};
  gameService.getGames().then(function(resp) {
    $scope.model.games = resp.data;
  });
});

你的html会是这样的：

<div ng-repeat="game in model.games">
  <span>{{game.comments.length}} Comments</span>  
</div>

请注意，这假设端点返回所有游戏，并且每个游戏都有一个评论字段。例如，游戏的架构可能如下所示：

{
  "id": "1",
  "name": "The best game",
  "comments": [
    {
      "id": "c1",
      "content": "The is the best game ever"
    }
  ]
}

angularjs - 在html

1 个答案: