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

使用angular 1.1.5并需要将URL编码的数据传递到后端。我从这里得到了解决方案：

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

$resource example 对于csrf，在rails应用程序中，您必须在标题布局中添加

（如果默认情况下没有）

var-app=angular.module（'app'，['ngResource']）；
app.config（[“$httpProvider”），函数（provider）
{
provider.defaults.headers.common['X-CSRF-Token']=$（'meta[name=CSRF-Token]'）.attr（'content'）；
}]);

这是一个服务对象

app.factory（'$folders'，['$resource'，function（$resource）
{
返回$resource（“/folders/：id”，
{id:'@id'}，
{
列表：{method'GET'，isArray:true}，//与查询相同
create:{method:'POST'}，//与save相同
更新：{method:'PUT'}
//$RESOURCE的默认实现
//'get'：{method:'get'}，
//'save'：{method:'POST'}，
//'query'：{method:'GET'，isArray:true}，
//'remove'：{method:'DELETE'}，
//'delete'：{method:'delete'}
});
}]);

这里是控制器的一个示例

app.controller（'projectController'，['$scope'，'$folders'，函数（$scope，$folders）
{
$scope.folders=$folders.list（）；
}]);

Folders.list（）

将在服务器上自动执行

GET/Folders/

，并将结果（应为json）作为对象返回

提示： 直接在

$scope.folders=folders.list（）之后

在控制器中，

$scope.folders

将为空，当服务器返回响应时，将及时填充该文件夹

使用$http和$resources的简单示例

关于表格 这是一张表格

%form{'ng-submit'=>'create（item）'，'ng controller'=>'projectController'，'ng init'=>'item.orientation=1；'}
%输入{'ng-model'=>'item.folderName'，：type=>：text，：placeholder=>'Name'，：Name=>'folderName'}
%text区域{'ng-model'=>'item.description'，：占位符=>'description'，：required=>true，：name=>'description'}
%输入{'ng-model'=>'item.orientation'，：type=>'radio'，：name=>'orientation'，：value=>'1'}
%输入{'ng-model'=>'item.orientation'，：type=>'radio'，：name=>'orientation'，：value=>'2'}
%输入{:type=>:submit，:value=>'Create'，:name=>'newproject'}

您会注意到

ng模型

。

'ng-model'=>'item.folderName'

将在

projectController

中创建一个

$scope.item

，并在其中添加一个键

folderName

。其他的

ng型号

也一样

'ng-init'=>'item.orientation=1；'将执行表达式。因此，它将执行以下
项。orientation=1
，这样我们就为无线电输入设置了一个默认值，非常简单

提交表单时，
ng submit
将捕获表单并从
projectController
调用
create
操作，参数为
item
，无需说明
item
将包含输入值

这是控制器部件

app.controller（'projectController'，['$scope'，'$folders'，函数（$scope，$folders）
{
$scope.create=函数（项）
{
f=新的$folders（项目）；
f、 $save（函数（数据、标题）
{
警报（“已保存”）；
},
函数（错误、标题）
{
警报（“失败”）；
});
};
}]);

$scope.create
是将由
ng submit
调用的操作，
item
也是表单中的
item
参数，因此您可以在其中找到
item.description
等内容

文件夹
是我们前面提到的服务对象

$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 () {});