Rumah  >  Artikel  >  hujung hadapan web  >  AngularJS mengubah kandungan tindak balas_AngularJS

AngularJS mengubah kandungan tindak balas_AngularJS

WBOY
WBOYasal
2016-05-16 15:17:411353semak imbas

Kandungan tindak balas yang diperoleh daripada API jauh biasanya dalam format json Kadangkala diperlukan untuk menukar kandungan yang diperoleh, seperti mengalih keluar beberapa medan yang tidak diperlukan, memberikan alias kepada medan, dsb.

Dalam artikel ini, mari kita alami cara melaksanakannya dalam AngualrJS.

Pada halaman utama, masih dapatkan data daripada pengawal.

<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> 

Di atas, medan Nama pengguna dan url ditukar daripada data sumber Mungkin nama pengguna sepadan dengan Nama penuh dalam data sumber, dan mungkin terdapat lebih banyak medan dalam data sumber.

Dalam AngularJS, adalah satu tabiat yang baik untuk menyusun perhubungan antara modul Contohnya, menyusunnya seperti berikut:

angular.module('publicapi.controllers',[]);
angular.module('publicapi.services',[]);
angular.module('publicapi.transformers',[]);
angular.module('publicapi',[
'publicapi.controllers',
'publicapi.services',
'publicapi.transformers'
]) 

Data masih datang daripada pengawal:

angular.module('publicapi.controllers')
.controller('controllers.View',['$scope', 'service.Api', function($scope, api){
$scope.repos = api.getUserRepos("");
}]); 

Pengawal bergantung pada perkhidmatan.Perkhidmatan 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;
}
};
}]) 

Medan transformResponse dalam perkhidmatan $http digunakan untuk mengubah sumber data. services.Api bergantung pada perkhidmatan services.transformer.ApiResponse, yang melengkapkan penukaran sumber data.

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

Di atas, garis bawah digunakan untuk memetakan sumber data.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn