AngularJS mengubah kandungan tindak balas_AngularJS-tutorial js-php.cn

AngularJS mengubah kandungan tindak balas_AngularJS

WBOY

Lepaskan： 2016-05-16 15:17:41

asal

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