Réponse de transformation AngularJS content

Réponse de transformation AngularJS content_AngularJS

WBOY

Libérer： 2016-05-16 15:17:41

original

1382 Les gens l'ont consulté

Le contenu de la réponse obtenu à partir de l'API distante est généralement au format json. Parfois, il est nécessaire de convertir le contenu obtenu, par exemple en supprimant certains champs inutiles, en donnant des alias aux champs, etc.

Dans cet article, voyons comment l'implémenter dans AngualrJS.

Sur la page principale, obtenez toujours les données du contrôleur.

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

Copier après la connexion

Ci-dessus, les champs userName et url sont convertis à partir des données source. Peut-être que userName correspond au fullName dans les données source, et peut-être qu'il y a plus de champs dans les données source.

Dans AngularJS, c'est une bonne habitude de trier les relations entre les modules. Par exemple, triez-les comme suit :

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

Copier après la connexion

Les données proviennent toujours du contrôleur :

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

Copier après la connexion

Le contrôleur dépend du service 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;
}
};
}])

Copier après la connexion

Le champ transformResponse du service $http est utilisé pour transformer la source de données. services.Api dépend du service services.transformer.ApiResponse, qui termine la conversion de la source de données.

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

Copier après la connexion

Ci-dessus, le trait de soulignement est utilisé pour mapper la source de données.