Rumah > hujung hadapan web > tutorial js > AngularJS mengubah kandungan tindak balas_AngularJS

AngularJS mengubah kandungan tindak balas_AngularJS

WBOY
Lepaskan: 2016-05-16 15:17:41
asal
1382 orang telah melayarinya

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> 
Salin selepas log masuk

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'
]) 
Salin selepas log masuk

Data masih datang daripada pengawal:

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

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;
}
};
}]) 
Salin selepas log masuk

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;
};
}); 
Salin selepas log masuk

Di atas, garis bawah digunakan untuk memetakan sumber data.

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan