Ruby on rails AngularJS如何转换Rails API的请求

我将AngularJS 1.x添加到表单中，用于编辑订单（在本例中可以更改日期、发货和地址）。我有一个Ruby on Rails JSON API，有几个端点：

GET /addresses
[{ id: 1, line1: "...", line2: "...", zip: "..." }, ...]

GET /shippings
[{ id: 1, name: "priority" }, ...]

GET /orders/:id
{ date: "...", 
  shipping: { id: 1, name: "priority" }, 
  address: { id: 1, line1: "...", line2: "...", zip: "..." } }

PATCH /orders/:id
{ date: "...",
  shipping_id: 1,
  address_attributes: { line1: "...", line2: "...", zip: "..." } }

在我的

OrdersController

中，我有以下内容：

var app = angular.module('app');

app.controller('OrdersController', ['$scope', 'Order', 'Address', 'Shipping',
  function($scope, Order, Address, Shipping) {
    $scope.order = Order.get({ id: 123 });
    $scope.addresses = Address.query();
    $scope.shippings = Shipping.query();

    $scope.save = function() {
      $scope.order.$save(function() {
        // ...
      }, function(error) { alert(error); });
    };
  }
]);

我的表格很简单：

<form ng-submit="save()">
  <input type="date" ng-model="order.date" />

  <select ng-model="order.shipping" 
    ng-options="option.name for option in shippings track by option.id">
  </select>

  <input type="text" ng-model="order.address.line1" />
  <input type="text" ng-model="order.address.line2" />
  <input type="text" ng-model="order.address.zip" />

  <input type="submit" value="Save"/>
</form>

在AngularJS中，推荐的方法是什么？这应该通过拦截器来完成吗？我是否应该创建一个新的

订单

资源，并按所需的表单顺序复制属性？

Angular的（and）服务具有一个名为

transformRequest

的配置选项，该选项接受一个可用于转换请求数据的函数（或函数数组）

假设您正在使用这些服务中的一个，这将是处理对象映射的最合适的位置

例如：

---

注意，在我的示例中，我使用一组函数来转换请求。这是因为，默认情况下，

$http

用于字符串化数据对象，我仍然希望在映射器函数运行后出现这种行为。

AngularJS

$resource

支持在每个操作上设置

transformRequest

和

transformResponse

（请参阅）。例如：

angular.module("app").factory("OrderSerializer", function() {
  return function(data) {
    var parameters = angular.copy(data);

    if (parameters.address) {
      parameters.address_attributes = parameters.address;
      delete parameters.address;
    }

    if (parameters.shipping && parameters.s.id) {
      parameters.shipping_id = parameters.shipping.id;
      delete parameters.shipping;
    }

    return parameters;
  };
});

angular.module("app").factory("Order", ["$resource", "OrderSerializer",
  function($resource, serializer) {
    return $resource("...", { id: "@id" }, {
      "save": {
        method: "...",
        transformRequest: [serializer, angular.toJson],
      },
    });
  }
]);

如果需要高级转换，则值得寻找

ng资源的替代品，例如

function MyController($http) {
  var vm = this;

  vm.data = {
    message: 'Hello World!'
  };

  vm.mapper = function(data, headersGetter) {
    data.greeting = data.message;
    delete data.message;
    return data;
  };

  $http({
    url: '/path/to/endpoint',
    method: 'PUT',
    data: vm.data,
    transformRequest: [vm.mapper, angular.toJson]
  });
}

angular.module("app").factory("OrderSerializer", function() {
  return function(data) {
    var parameters = angular.copy(data);

    if (parameters.address) {
      parameters.address_attributes = parameters.address;
      delete parameters.address;
    }

    if (parameters.shipping && parameters.s.id) {
      parameters.shipping_id = parameters.shipping.id;
      delete parameters.shipping;
    }

    return parameters;
  };
});

angular.module("app").factory("Order", ["$resource", "OrderSerializer",
  function($resource, serializer) {
    return $resource("...", { id: "@id" }, {
      "save": {
        method: "...",
        transformRequest: [serializer, angular.toJson],
      },
    });
  }
]);