angularjs 리소스로 페이지 매김과 카운트를 처리하는 방법

angularjs 리소스로 페이지 매김과 카운트를 처리하는 방법

다음과 같이 JSON을 출력하는 API용 angularjs 클라이언트를 구축해야 합니다.

{
  "count": 10,
  "next": null,
  "previous": "http://site.tld/api/items/?start=4"
  "results": [
    {
      "url": "http://site.tld/api/items/1.json",
      "title": "test",
      "description": "",
      "user": "http://site.tld/api/users/4.json",
      "creation_datetime": "2013-05-08T14:31:43.428"
    },
    {
      "url": "http://site.tld/api/items/2.json",
      "title": "test2",
      "description": "",
      "user": "http://site.tld/api/users/1.json",
      "creation_datetime": "2013-05-08T14:31:43.428"
    },
    {
      "url": "http://site.tld/api/items/3.json",
      "title": "test3",
      "description": "",
      "user": "http://site.tld/api/users/2.json",
      "creation_datetime": "2013-05-08T14:31:43.428"
    }
  ]
}

어떻게 하면 이 맵을 만들 수 있나요?isArray=false전체 BLOB를 하나의 객체로 가져와 읽을 수 있지만 전화를 할 수 없습니다..put()내가 만약isArray, 그것은 단지 작동하지 않습니다.

이걸 어떻게 깔끔하게 할 수 있을까요?아니면 다시 사용할까요?$http?

몇 가지 옵션이 있습니다.서버 출력을 변경할 수 있는 경우 응답 본문에 메타데이터 정보를 추가하는 대신 헤더 값으로 메타데이터 정보(카운트, 다음, 이전)를 추가할 수 있습니다.

두 번째 옵션은 transformResponse를 사용하여 응답을 변환하는 것입니다.이는 각도 v1.1.2 이후(불안정 브랜치)에서 $response 설정으로 사용할 수 있습니다.

var Data = $resource('./data.json',{},{
  list:{isArray:true,method:'get',
    transformResponse: function (data, headers) {
      return JSON.parse(data).results; 
   }}
});

불안정한 브랜치를 사용하지 않으려면 $resource가 사용하는 $http를 변경할 수도 있습니다.

$http.defaults.transformResponse.push(function(data){
  if(data && data.results){
    return data.results;
  }
});

http://plnkr.co/edit/PmYotP0eo5k41Z6ZCxl4?p=preview의 두 가지 예를 모두 사용하여 플런커를 만들었습니다.

메타데이터를 애플리케이션의 나머지 부분에 전달하는 최선의 방법이 무엇인지 잘 모르겠습니다(필요한 경우).첫 번째 결과에 추가할 수도 있고 별도의 개체로 추가할 수도 있습니다. 그다지 우아하지는 않을 수도 있지만 작업을 완료할 수 있습니다.

이 질문이 좀 오래된 거 알아요.그러나 페이지 번호 정보를 얻는 방법과 개체 목록에 대한 리소스 기능을 유지하는 방법 등 주요 문제는 답변에 포함되지 않는다고 생각합니다.

기본적으로 두 가지 솔루션이 있습니다. 즉, 페이지 작성자 데이터를 변환 메시지의 헤더로 전달하거나 $http를 사용하여 항목을 수동으로 인스턴스화합니다.

1. 메시지 변환

여기서 쿼리를 재정의하여 페이지화 데이터를 헤더에 넣습니다.

헤더는 배열이 아닙니다.헤더("Headers-Name")를 호출하여 헤더를 반환하고 헤더()를 호출하여 내부 개체를 반환하는 "headersGetter"입니다.헤더를 소문자로 설정해야 합니다.

var PAGINATION_TOTAL = 'pagination-total-elements';
var PAGINATION_SIZE = 'pagination-size';

...

.factory('BeerResourceFactory', function($resource, API_URI) {
        return $resource(API_URI + '/beer/:id',
            {'id': '@id'},
            {
              'update': {method: 'PUT'},
              'query' : {method: 'GET', isArray:true, transformResponse : function(data, headers) {
                var jsonData = JSON.parse(data);
                headers()[PAGINATION_TOTAL] = jsonData.totalElements;
                headers()[PAGINATION_SIZE] = jsonData.size;

                return jsonData.content;
              }}
            });
      })

그 후, 이것을 캡슐화하는 서비스를 정의하고, 헤더로부터 페이지 매김을 실시합니다.그러나 $promise.then() 및 retrurn result는 사용할 수 없습니다.이는 약속은 headersGetter가 아닌 인수로만 얻을 수 있기 때문입니다.따라서 일반 콜백을 사용하여 자체 약속을 작성해야 하기 때문입니다.

.service('beerService', function(BeerResourceFactory, $q) {
    this.query = function(filter) {

          var defer = $q.defer();

          BeerResourceFactory.query(filter, function(result, headers) {
            var promiseResult =  {
              beers: result,
              paging: {
                totalItems: headers(PAGINATION_TOTAL),
                perPage: headers(PAGINATION_SIZE)
              }
            };

            defer.resolve(promiseResult);
          });

          return defer.promise;
    }

2. $http를 사용하여 리소스 인스턴스화

리소스 대신 $http를 사용하는 경우 어레이 요소를 리소스 인스턴스로 사용하여 $save/$delete를 호출할 수 있어야 하므로 수동으로 인스턴스화할 수 있습니다.여기서 당신은 평범한 약속도 평범하게 사용할 수 있습니다.

.service('beerService', function($http, BeerResourceFactory, API_URI) {
    this.query = function(filter) {
        return $http.get(API_URI + '/beer', {params: filter})
              .then(function(response) {

                var transformedList = response.data.content.map(function(element) {
                  return new BeerResourceFactory(element);
                });

                return {
                  beers: transformedList,
                  paging: {
                    totalItems: response.data.totalElements,
                    perPage: response.data.size
                  }
                };
              });
         };

나는 두 번째 해결책이 더 간단하기 때문에 선호한다.

나도 이 문제에 대해 고민했는데, 여기 나에게 효과가 있었던 것이 있다.어레이 결과를 가져와 수동으로 리소스 개체를 생성하는 응답 변압기를 추가합니다. ngResource는 내부적으로도 이 작업을 수행할 수 있을 것으로 예상됩니다.

  var Plan =  $resource(apiPath + 'plans/:planId/', {planId:'@id'}, {
    query: {
      isArray: false,
      transformResponse: function(response){
        response = angular.fromJson(response);
        response.results = response.results.map(function(plan) {
          return new Plan(plan);
        });
        return response;
      }
    },
  });

지금은 더 오래되었지만 단일 리소스 팩토리에서 이 문제를 해결할 수 있었습니다.

.factory('BeerResourceFactory', function($resource, API_URI) {
    var resource = $resource(API_URI + '/beer/:id',
        {'id': '@id'},
        {
          'update': {method: 'PUT'},
          'query' : {method: 'GET', isArray:true, transformResponse : function(data) {
            var jsonData = angular.fromJson(data);
            jsonData.beers = jsonData.beers.map(function (beer) {
                return new resource(beer)
            });

            return jsonData.content;
          }}
        });
      return resource;
  })

언급URL : https://stackoverflow.com/questions/16465768/how-to-handle-pagination-and-count-with-angularjs-resources