suchen

Heim >Web-Frontend >js-Tutorial >AngularJS-Transformationsantwort content_AngularJS

AngularJS-Transformationsantwort content_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:17:411410Durchsuche

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für einen Kreis-im-Kreis-Effekt, der durch JavaScript-HTML5-Canvas_Javascript-Kenntnisse erzeugt wirdNächster Artikel：Beispiel für einen Kreis-im-Kreis-Effekt, der durch JavaScript-HTML5-Canvas_Javascript-Kenntnisse erzeugt wird

In Verbindung stehende Artikel

Mehr sehen