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.
1 2 3 4 5 6 7 8 | <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>
|
Nach dem Login kopieren
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:
1 2 3 4 5 6 7 8 | angular.module( 'publicapi.controllers' ,[]);
angular.module( 'publicapi.services' ,[]);
angular.module( 'publicapi.transformers' ,[]);
angular.module( 'publicapi' ,[
'publicapi.controllers' ,
'publicapi.services' ,
'publicapi.transformers'
])
|
Nach dem Login kopieren
Die Daten stammen weiterhin vom Controller:
1 2 3 4 | angular.module( 'publicapi.controllers' )
.controller( 'controllers.View' ,[ '$scope' , 'service.Api' , function ($scope, api){
$scope.repos = api.getUserRepos( "" );
}]);
|
Nach dem Login kopieren
Controller hängt vom Dienst service.Api ab.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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;
}
};
}])
|
Nach dem Login kopieren
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.
1 2 3 4 5 6 7 8 9 10 11 | 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;
};
});
|
Nach dem Login kopieren
Oben wird der Unterstrich verwendet, um die Datenquelle abzubilden.