从远程API获取到的响应内容，通常是json格式的，有时候需要对获取到的内容进行转换，比如去除某些不需要的字段，给字段取别名，等等。

本篇就来体验在AngualrJS中如何实现。

在主页面，还是从controller中拿数据。

 

 

以上，userName, url字段是从源数据中转换而来的，可能userName对应源数据中的fullName,可能源数据中有更多的字段。

在AngularJS中，把module之间的关系梳理清楚是一种很好的习惯，比如按如下方式梳理：

 

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

 

数据还是从controller中来：

 

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

 

controller依赖于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;        }    };}])

 

而$http服务中的transformResponse字段就是用来转换数据源的。services.Api依赖于services.transformer.ApiResponse这个服务，在这个服务力完成对数据源的转换。

 

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

 

以上，使用了underscore对数据源进行map转换。