angular $resource参数占位符释疑

在angular文档关于$resource一节中,有如下用例:

var CreditCard = $resource('/user/:userId/card/:cardId',
 {userId:123, cardId:'@id'}, {
  charge: {method:'POST', params:{charge:true}}
 });

其中第二行让人疑惑,@id是什么意思,文档没有过多解释,说明这个问题太简单了,肯定是我想岔了,经过简单测试,第二行中“cardId:'@id'"的解释应为:
cardId是resource的URL中的参数名,而@id表示参数对象中的名字,等于是把参数的id字段赋值给了url中的cardId参数。见示例:

form:
	<form ng-submit="submit()" class="form-inline">
		<label>username:</label><input type="text" ng-model="user.username">
		<label>name:</label><input type="text" ng-model="user.displayname">
		<input type="submit" value="submit" class="btn btn-primary">
		<input type="reset" value="reset" class="btn btn-inverse">
	</form>
	
//route:
var app = angular.module('demo',['ngResource']);
	app.config(['$routeProvider',function($routeProvider){
		$routeProvider
			.when('/users',{templateUrl:'views/users.html',controller:userlistctrl})//用户列表
			.when('/user/add',{templateUrl:'views/userinfo.html',controller:userctrl})//添加用户
			.when('/user/add/:id',{templateUrl:'views/userinfo.html',controller:userctrl})//添加用户
			.otherwise({redirectTo:'/'})//默认
	}]);
	
//controller:	
function userctrl($scope,$http,$routeParams,$resource,userService){
	if($routeParams.id){
		//edit
		$scope.submit=function(){ userService.add({abc:$routeParams.id});};
	}else{
		//add
	}	
}

//service:
app.service('userService',function ($resource){
	var self=this;

	self.add=function(item){
		var res = $resource('/users/add/:test',{test:'@abc'});
		res.save(item);
	};
	self.list=function(){
		return $resource('/users').query();
	};
});

//server:
app.all('/users/add/:test',function(req,res){
	res.send(200,req.params.test);
});

用“添加用户”的功能作演示,访问:http://localhost:3000/#/user/add/123,经route解析到控制器userctrl
然后点submit提交表单,调用了userService服务的add方法,传入了{adc:123}这个对象

再来看userService,$resource('/users/add/:test',{test:'@abc'})
意思就是把参数中的abc取出来赋值给test,我们的参数是{abc:123},所以自然而然服务器会接到一个post请求:http://localhost:3000/users/add/123
服务器是用test接的,打印出来,123无误

posted @ 2013-05-15 19:26  $walker  阅读(1184)  评论(0编辑  收藏  举报