这篇文章里,用以下两个情景用例来解释:
保存/持久化 新的数据对象
更新存在的数据对象
代码片段包含了AngularJs代码和Spring MVC代码,以能够让你简单快速的上手。
想要$resource 服务工作,需要添加一段实际代码:
应用angular-resource.js文件,你可以使用Google Hosted Libraries来实现。
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js">
</script>
下面的代码告诉你如何在创建控制器时引入ngResource模块和注入$resource服务:
var helloApp = angular.module("helloApp", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource', function($scope, $resource) {
//
// 在这写你的实际业务代码...
//
} ]);
保存/持久化新对象 (其实就是传给后台存进数据库的一个过程)
下面的代码演示了如何使用POST方法提交form表单中的user信息(这部分是由controller来做),controller会把uers信息提交给REST URL “/user/new”(这部分是Spring MVC的控制器执行)。
AngularJS代码
var helloApp = angular.module("helloApp", [ 'ngResource' ]); helloApp.controller("HttpController", [ '$scope', '$resource', function($scope, $resource) { $scope.users = [ { 'firstname':'Ajitesh', 'lastname':'Shukla', 'address':'Hyderbad', 'email':'ajitesh101@gmail.com'}, { 'firstname':'Sumit', 'lastname':'Jha', 'address':'Muzaffarpur', 'email':'sumitjha2011@yahoo.com'}, ]; $scope.saveUser = function(){ // 创建一个resource对象 // var User = $resource('/user/new'); // 调用save方法 //(其实和我们$http.post(url,data).success(function(){})是一样一样的,只是它封装一下而已) User.save({firstname:$scope.firstname,lastname:$scope.lastname,address:$scope.address,email:$scope.email}, function(response){ $scope.message = response.message;
Spring MVC 代码
请注意User对象的字段要和JSON数据的要一致。同时确保Jackson包已经引入了,并且正常工作了。这是最重要的步骤。我推荐参考这篇文章 how to fix 415 Unsupported Mediatype error 来帮助你实现前面两个步骤。(1.Spring转对象的时候,是按照字段名来转的,比如你的Java的User对象的firstname会绑定Json对象的firstname,所以需要保持一致,否则帮出来的数据可能不对。2.不引人Jackson包,那么Json对象和Java对象不能想换转化,也就不能正常工作了)
/ 创建一个新user
// @RequestMapping(value = "/user/new", method = RequestMethod.POST) public @ResponseBody String saveUserRestful( @RequestBody User user ) { // // 处理输入参数的代码 // String response = "{"message":"Post With ngResource: The user firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail()+""}"; return response; }
更新已存在的数据对象
下面的代码演示了如何通过POST方法提交表单信息来更新user对象,请求会发送到服务器的REST URL "/user/{id}",也包括Spring MVC的方法。
AngularJS代码
var helloApp = angular.module("helloApp", [ 'ngResource' ]); helloApp.controller("HttpController", [ '$scope', '$resource', function($scope, $resource) { $scope.users = [ { 'firstname':'Ajitesh', 'lastname':'Shukla', 'address':'Hyderbad', 'email':'ajitesh101@gmail.com'}, { 'firstname':'Sumit', 'lastname':'Jha', 'address':'Muzaffarpur', 'email':'sumitjha2011@yahoo.com'}, ]; $scope.updateUser = function(){ // Create a resource class object // var User = $resource('/user/:userId', {userId:'@id'}); // Create an instance of User resource var user = User.get({userId:25}); // Update the new values entered in the form fields // user.id = 25; user.firstname = $scope.firstname; user.lastname = $scope.lastname; user.address = $scope.address; user.email = $scope.email; // Call '$' prefixed action menthod to post ("save" ) // user.$save(function(response){ $scope.message = response.message; }); // Push the new objects in the $scope.users // $scope.users.push({ 'firstname':$scope.firstname, 'lastname': $scope.lastname, 'address':$scope.address, 'email':$scope.email }); $scope.firstname=''; $scope.lastname=''; $scope.address=''; $scope.email=''; } } ]);
Spring MVC 代码
请注意下面几点
-用例的路径变量(就是"/user/{id}"这东西)
-Java的User对象要和Json对象匹配(字段名,或者说是属性名)
-确保Jackson包引入并且正常工作(确保你后台能正常转化Json和java对象)
// 更新 user // @RequestMapping(value = "/user/{id}", method = RequestMethod.POST) public @ResponseBody String updateUserProfile( @PathVariable("id") long userId, @RequestBody User user ) { // // Code processing the input parameters // String response = "{"message":"Post With ngResource - id: " + String.valueOf( userId ) + ",firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail() +""}"; return response; }
补充:
3.$resource的参数:
$resource(url,{url参数},{自定义方法})
url: 必填,资源的基础url
url中带有 ':' 项的是根据第二个参数来进行配置的.
url参数: 选填,配置url中的带有 ':' 项的参数
eg:
('/card/user/:userID/:id',{userID:123,id:'@id'}),那么userID会被配置为123.
另外,在调用$resource()的方法的时候(比如get,query...),可以传入参数覆盖这里对url参数的配置,这在后面说得到它的方法的时候再详解
而id属性在后面讲第三个参数的时候讲解
自定义方法:
使用$resource获取到的资源,或者通过$resource实例化的资源,资源本身会具有一些方法,比如$save,第三个参数用于给资源添加自定义的方法:详见:http://www.cnblogs.com/liulangmao/p/3907032.html
4.$resource()的方法:
$resource()一共有以下5个方法:
get:
{method:'GET'}
一般用于获取某个资源:
query:
{method:'GET',isArray:true}
一般用于获取一整套的资源,以数组形式返回
save:
{method:'POST'}
一般用于保存某个资源,有可能是新建的资源,也有可能是更新现有的资源
remove:
{method:'DELETE'}
一般用于删除某个资源
delete:
{method:'DELETE'}
一般用于删除某个资源
resource.save(data) 和 实例.$save()在这里,两者是等价的.但是在有参数的时候,他们接受的参数其实是不同的:
使用cardResource.save([parameters], postData, [success], [error])方法时,可以接受四个参数:
[parameters]: 可选.用于配置url参数,比如配置{userID:124},那么请求url就会变成 'card/user/124/3',其中的3,还是从请求体的id属性获取的.
同样,如果没有参数需要配置,是不要填空的.不存在顺序一一对应.可以直接把postData作为第一个参数.
postData: 必填. 发送的请求体. save方法是post请求,必须要带有请求体.
[success]:选填. 响应成功后的回调函数,参数同get方法成功回调里的参数
[error]:选填. 响应失败后的回调函数.参数同get方法失败回调里的参数
使用data.$save([parameters], [success], [error])方法时,可以接受三个参数:
[parameters]: 可选.注意它不是用于配置url的参数的.它是用来设置url?后面的参数的! 比如设置{name:'code_bunny'},那么请求url就会变成'card/user/123/3?name=code_bunny',
通过$save方法来调用save方法,是不能够配置url参数的.它直接就是提交资源自己.
同样,如果没有参数需要配置,是不要填空的.不存在顺序一一对应.可以直接把[success]作为第一个参数.
[success]:选填. 响应成功后的回调函数,参数同get方法成功回调里的参数
[error]:选填. 响应失败后的回调函数.参数同get方法失败回调里的参数