angularjs - html 범위에서 비동기 함수를 실행하십시오.

Question

나는 게임 컬렉션과 그 게임에 대한 의견 모음이있는 DB를 가지고 있습니다. 각 게임에는 고유 한 ID가 있으며 각 설명에는 game_id 필드가 있습니다. 클라이언트 측에서는

범위에서 비동기 함수를 작성하여 db의 게임에 대한 주석 수를 검색하고 약속을 반환합니다. 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 개 HTTP 요청을 보낼 수있는 좋은 생각이 그것입니다 (30 말을 할 수 있습니다) 각 게임마다? "getAllComments"라는 하나의 요청을 보내고 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" 
    } 
    ] 
}