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

使用角度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 () {});

我已经成功地将它嵌入到我的控制器中,但“更清洁”的方式是使用服务和$resource而不是$http对象.
在本主题的1.1.2之后,可以将transformRequest与$resource一起使用：
$resource transformResponse not working
但我找不到任何有效的例子.任何人都可以使用$resource作为服务对象提供上述解决方案的示例吗？

$RESOURCE示例

对于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'}
            });
}]);

这是一个控制器的例子

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

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

小费：

直接在$scope.folders = Folders.list()之后;在控制器中,$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',:value=>'2'}
  %input{:type => :submit,:value => 'Create',:name => 'new-project'}

你会注意到ng模型.
‘ng-model’=>’item.folderName’将在projectController中创建$scope.item并在其中添加密钥folderName.与其他ng-model相同.

‘NG-INIT’=> ‘item.orientation = 1;’将要执行表达式.所以它将执行以下item.orientation = 1,这样我们设置了无线电输入的默认值,这么简单.

提交表单时,ng-submit将捕获它并使用itemas参数从projectController调用create操作,不需要说该项将包含输入值吗？

这是控制器部分

app.controller('projectController',$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之类的内容.

文件夹是我们之前谈到的服务对象.

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

相关文章