$资源示例
对于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', :type=>'radio', :name=>'orientation', :value=>'2'}
%input{:type => :submit, :value => 'Create', :name => 'new-project'}
你会注意到ng-model
.
'ng-model'=>'item.folderName'
将在其中创建一个$scope.item
并在其中projectController
添加一个键folderName
。其他ng-model
的也一样。
'ng-init'=>'item.orientation=1;'
将执行表达式。所以它将执行以下操作item.orientation=1
,这样我们就可以为我们的无线电输入设置一个默认值,就这么简单。
提交表单时ng-submit
会捕获它并create
从projectController
withitem
作为参数调用操作,无需说item
将包含输入值吗?
这是控制器部分
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
就是我们前面讲的服务对象。