원격 API에서 얻은 응답 콘텐츠는 일반적으로 json 형식입니다. 불필요한 필드를 제거하거나 필드에 별칭을 지정하는 등 얻은 콘텐츠를 변환해야 하는 경우가 있습니다.
이 글에서는 이를 AngualrJS에서 구현하는 방법을 경험해 보겠습니다.
메인 페이지에서는 여전히 컨트롤러로부터 데이터를 가져옵니다.
<body ng-app="publicapi"> <ul ng-controller="controllers.View"> <li ng-repeat="repo in repos"> <b ng-bind="repo.userName"></b> <span ng-bind="repo.url"></span> </li> </ul> </body>
위의 userName 및 url 필드는 소스 데이터에서 변환됩니다. userName이 소스 데이터의 fullName에 해당할 수도 있고 소스 데이터에 더 많은 필드가 있을 수도 있습니다.
AngularJS에서는 모듈 간의 관계를 정리하는 것이 좋은 습관입니다. 예를 들어 다음과 같이 정리합니다.
angular.module('publicapi.controllers',[]); angular.module('publicapi.services',[]); angular.module('publicapi.transformers',[]); angular.module('publicapi',[ 'publicapi.controllers', 'publicapi.services', 'publicapi.transformers' ])
데이터는 여전히 컨트롤러에서 나옵니다.
angular.module('publicapi.controllers') .controller('controllers.View',['$scope', 'service.Api', function($scope, api){ $scope.repos = api.getUserRepos(""); }]);
컨트롤러는 service.Api 서비스에 따라 다릅니다.
angular.module('publicapi.services').factory('services.Api',['$q', '$http', 'services.transformer.ApiResponse', function($q, $http, apiResponseTransformer){ return { getUserRepos: function(login){ var deferred = $q.defer(); $http({ method: "GET", url: "" + login + "/repos", transformResponse: apiResponseTransformer }) .success(function(data){ deferred.resolve(data); }) return deferred.promise; } }; }])
$http 서비스의 변환 응답 필드는 데이터 소스를 변환하는 데 사용됩니다. services.Api는 데이터 소스 변환을 완료하는 services.transformer.ApiResponse 서비스에 의존합니다.
angular.module('publicapi.transformers').factory('services.transformer.ApiResponse', function(){ return function(data){ data = JSON.parse(data); if(data.length){ data = _.map(data, function(repo){ return {userName: reop.full_name, url: git_url}; }) } return data; }; });
위에서 밑줄은 데이터 소스를 매핑하는 데 사용되었습니다.