Der von der Remote-API erhaltene Antwortinhalt liegt normalerweise im JSON-Format vor. Manchmal ist es erforderlich, den erhaltenen Inhalt zu konvertieren, z. B. einige unnötige Felder zu entfernen, Feldern Aliase zuzuweisen usw.
In diesem Artikel erfahren wir, wie man es in AngualrJS implementiert.
Auf der Hauptseite erhalten Sie weiterhin Daten vom Controller.
<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>
Oben wurden die Felder „Benutzername“ und „URL“ aus den Quelldaten konvertiert. Möglicherweise entspricht „Benutzername“ dem vollständigen Namen in den Quelldaten, und möglicherweise sind in den Quelldaten weitere Felder vorhanden.
In AngularJS ist es eine gute Angewohnheit, die Beziehung zwischen Modulen zu regeln. Sortieren Sie es beispielsweise wie folgt:
angular.module('publicapi.controllers',[]);
angular.module('publicapi.services',[]);
angular.module('publicapi.transformers',[]);
angular.module('publicapi',[
'publicapi.controllers',
'publicapi.services',
'publicapi.transformers'
]) Die Daten stammen weiterhin vom Controller:
angular.module('publicapi.controllers')
.controller('controllers.View',['$scope', 'service.Api', function($scope, api){
$scope.repos = api.getUserRepos("");
}]); Controller hängt vom Dienst service.Api ab.
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;
}
};
}]) Das transformResponse-Feld im $http-Dienst wird zum Transformieren der Datenquelle verwendet. Services.Api ist vom Dienst „services.transformer.ApiResponse“ abhängig, der die Konvertierung der Datenquelle abschließt.
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;
};
}); Oben wird der Unterstrich verwendet, um die Datenquelle abzubilden.
