AngularJS 변환 응답 content_AngularJS-JS 튜토리얼-php.cn

AngularJS 변환 응답 content_AngularJS

WBOY

풀어 주다： 2016-05-16 15:17:41

원래의

1297명이 탐색했습니다.

원격 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;
};
});

로그인 후 복사

위에서 밑줄은 데이터 소스를 매핑하는 데 사용되었습니다.