post - angular.js $http(或$resource)POST和transformRequest作为服务的请求示例

Question

使用 angular 1.1.5 并且需要将 urlencoded 数据传递到后端。我已经从这里得到了这个解决方案:
How can I post data as form data instead of a request payload?

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: xsrf
}).success(function () {});

我已经成功地将它嵌入到我的 Controller 中，但“更清洁”的方法是使用服务，并使用 $resource 而不是 $http 对象。
可以在本主题的 1.1.2 之后将 transformRequest 与 $resource 一起使用:
$resource transformResponse not working
但我找不到任何工作示例。任何人都可以提供上述解决方案的示例作为使用 $resource 的服务对象吗？

Answer 1

$资源示例

对于 csrf , 在 Rails 应用程序中，您必须添加 <%= csrf_meta_tags %>在您的标题布局中(如果默认情况下不存在)

var app = angular.module('app', ['ngResource']);
app.config(["$httpProvider", function(provider)
{
      provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
}]);

这是一个服务对象

app.factory('$folders', ['$resource', function($resource)
{
    return $resource('/folders/:id',
            { id: '@id' },
            {
              list: { method: 'GET' , isArray: true }, //same as query
              create: { method: 'POST' }, // same as save
              update: { method: 'PUT' }
              // DEFAULT IMPLEMENTATION OF $RESOURCE
              //   'get':    {method:'GET'},
              //   'save':   {method:'POST'},
              //   'query':  {method:'GET', isArray:true},
              //   'remove': {method:'DELETE'},
              //   'delete': {method:'DELETE'}
            });
}]);

这是 Controller 的示例

app.controller('projectController', ['$scope', '$folders', function($scope, $folders)
{
    $scope.folders = $folders.list();
}]);

Folders.list()会自动做GET /folders/在服务器上并将结果(应该是 json)作为对象返回。

提示:

直接在 $scope.folders = Folders.list(); 之后在 Controller 中，$scope.folders将为空，当响应从服务器返回时，它将及时填充。

$http 和 $ressources 的简单示例
http://jsfiddle.net/jhsousa/aQ4XX/

关于表格

这是一个表格

%form{'ng-submit' => 'create(item)', 'ng-controller' => 'projectController', 'ng-init' => 'item.orientation=1;'}
  %input{'ng-model'=>'item.folderName', :type => :text, :placeholder => 'Name', :name => 'folderName'}
  %textarea{'ng-model'=>'item.description', :placeholder => 'Description', :required=>true, :name => 'description'}
  %input{'ng-model'=>'item.orientation', :type=>'radio', :name=>'orientation', :value=>'1'}
  %input{'ng-model'=>'item.orientation', :type=>'radio', :name=>'orientation', :value=>'2'}
  %input{:type => :submit, :value => 'Create', :name => 'new-project'}

您会注意到 ng-model .'ng-model'=>'item.folderName'将创建一个 $scope.item在 projectController并添加一个 key folderName在里面。其他相同ng-model的。
'ng-init'=>'item.orientation=1;'将执行表达式。所以它将执行以下item.orientation=1 ，这样我们就可以为我们的 radio 输入设置一个默认值，就这么简单。

提交表格时ng-submit会捕获它并调用create来自 projectController 的行动与 item作为参数，不用说item将包含输入值？

这是 Controller 部分

app.controller('projectController', ['$scope', '$folders', function($scope, $folders)
{
    $scope.create = function(item)
    {
        f = new $folders(item);
        f.$save(function(data,headers)
                {
                   alert('SAVED');
                },
                function(err,headers)
                {
                    alert('FAILED');
                });
    };
}]);

$scope.create是 ng-submit 将调用的操作, item是 item表单中的参数也是如此，因此您会在其中找到诸如 item.description 之类的内容.
Folders就是我们前面讲的服务对象。