zoukankan      html  css  js  c++  java
  • 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无误

  • 相关阅读:
    Ubuntu adb devices :???????????? no permissions (verify udev rules) 解决方法
    ubuntu 关闭显示器的命令
    ubuntu android studio kvm
    ubuntu 14.04版本更改文件夹背景色为草绿色
    ubuntu 创建桌面快捷方式
    Ubuntu 如何更改用户密码
    ubuntu 14.04 返回到经典桌面方法
    ubuntu 信使(iptux) 创建桌面快捷方式
    Eclipse failed to get the required ADT version number from the sdk
    Eclipse '<>' operator is not allowed for source level below 1.7
  • 原文地址:https://www.cnblogs.com/walkerwang/p/3080469.html
Copyright © 2011-2022 走看看