zoukankan      html  css  js  c++  java
  • AngularJS中转换响应内容

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

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

    在主页面,还是从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>

    以上,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转换。

  • 相关阅读:
    设计模式实战应用之五:工厂方法模式
    Codeforces445A_DZY Loves Chessboard(预处理)
    void f(int(&amp;p)[3]){} 和void f(int(*p)[3]){}的差别
    《linux 内核全然剖析》 mktime.c
    Java中对象、对象引用、堆、栈、值传递以及引用传递的详解
    android 仿ios开关控件
    ViewDragHelper实战 自己打造Drawerlayout
    [javase学习笔记]-8.5 statickeyword的使用场景
    玩转图片Base64编码
    Android stuido viewpagerindicator的使用
  • 原文地址:https://www.cnblogs.com/darrenji/p/5162557.html
Copyright © 2011-2022 走看看