我是不是在angular controller中发出了太多http请求

Question

我在角度控制器中有以下代码：

  $scope.openCat = function(catId) {
    $http.get('/api/cat/' + catId).
      success(function(data) {
        $scope.sortedArticles = [];
        var lst = data.articles;
        lst.forEach(function(n) {
          $http.get('/api/article/' + n).
            success(function(article) {
              $scope.sortedArticles.push(article);  
          });  
        });
      });
  };

由于mongo中的categories集合与article集合交叉引用，http.get只返回article_ids。这个想法是按照每个类别的标题显示文章链接，然后我有另一个控制器，它处理单个文章点击并呈现内容：

  $scope.articleClick = function(n) {        
    $http.get('/api/article/' + n).
      success(function(data) {
        $scope.form = data;
      });    
  };

代码都按我的意愿工作，但我的问题是：我是否复制了http请求？还是做错了什么？请注意，我对此完全陌生，只是在尝试，所以我可能完全走错了方向。我应该为此使用服务吗？谢谢

Answer 1

这不是一个好的做法，因为如果你有50篇文章，你的代码将只为它们发出52个请求。总是尽量减少http请求，因为它们是你的瓶颈。后端的一个简单代码如下：

app.get('/api/cat/:cat', function(req, res) {
    var catid = req.params.cat;
    ArticleModel.find({cat: catid}, function(err, data) {
        if ( err || !data ) {..}
        var output = [];
        data.forEach(function(i){
            output.push({
                title: i.title,
                id: i._id
            });
        });
        res.json(output);
    });
});

因此，您只发送一个包含文章标题和id的JSON数组。然后用简单的ng重复你可以做：

<div ng-repeat="article in articles">
     <a ng-href="article.id">{{article.title}}</a>
</div>

同时处理这样的角度：

$scope.openCat = function(catId) {
    $http.get('/api/cat/' + catId).success(function(data) {
        $scope.sortedArticles = data;
    });
};

因此，只需一个查询，您就可以获得所需的所有信息。

并尝试将API与服务/工厂分离。你可以在这里阅读更多。