这篇文章里,用以下两个情景用例来解释:

保存/持久化 新的数据对象

更新存在的数据对象

代码片段包含了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方法失败回调里的参数

 

AngularJS ——ngResource、RESTful APIs 使用的更多相关文章

  1. spring cloud 集成 swagger2 构建Restful APIS 说明文档

    在Pom.xml文件中引用依赖 <dependencies> <dependency> <groupId>org.springframework.cloud< ...

  2. Spring Boot中使用Swagger2构建RESTful APIs

    关于 Swagger Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. S ...

  3. Spring Boot中使用Swagger2构建RESTful APIs介绍

    1.添加相关依赖 <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger2 --> <depen ...

  4. Understanding REST and RESTful APIs

    Understanding REST and RESTful APIs If you've spent any amount of time with modern web development, ...

  5. 002.AngularJs调用Restful实现CRUD

    本节我们主要给大家介绍AngularJs如何调用Restful,实现数据的CRUD. 主要用到的技术: 后端:ASP.NET WebApi + SQLServer2008 前端:AngularJs,B ...

  6. HTTP based RESTful APIs - asp.net web api

    1.HTTP http://www.w3.org/Protocols/rfc2616/rfc2616.html 2.REST是什么http://www.ics.uci.edu/~fielding/pu ...

  7. [译]Node.js : Building RESTful APIs using Loopback and MySQL

    国庆后可能就要使用StrongLoop那套东西来做项目了 原文:http://www.javabeat.net/loopback-mysql/ Loopback是什么? Loopback是一个开源的N ...

  8. angularjs --- ngResource 类似于 ajax发送请求。

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  9. 黄聪:AngularJS中的$resource使用与Restful资源交互(转)

    原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...

随机推荐

  1. SynDBOracle.pas

    SynDBOracle.pas 通过OCI.DLL访问ORACLE数据库,是最快的访问方式,比任何其它数据库引擎访问ORACLE速度都要快. 程序发布的时候,只需要将OCI.DLL一同发布即可,而不需 ...

  2. FORM动态LIST ITEM

    DECLARE rg_list_item recordgroup; ret_code NUMBER; BEGIN --SQL里必做是以值键两个字段顺序,并且都要为字符串类型 rg_list_item ...

  3. 支持解析GitHub Flavored Markdown(GFM)的PHP库-Parsedown

    网上搜索PHP的markdown解析库,只能找得到Michel的PHP Markdown,这个库很不错,但是他只能支持标准markdown和他自己定义的一套扩展php Markdown Extra.这 ...

  4. Sqlite-Sqlite3中的数据类型

    大多数的数据库引擎(到现在据我们所知的除了sqlite的每个sql数据库引擎)都使用静态的.刚性的类型,使用静态类型,数据的类型就由它的容器决定,这个容器是这个指被存放的特定列. Sqlite使用一个 ...

  5. 利用github和git命令,将本地项目共享到服务器上——第二章

    附上关于git命令的第一章:https://www.cnblogs.com/mlw1814011067/p/9908856.html 六.删除服务器中的文件 1. 直接物理删除(右键,删除,或者是用b ...

  6. Sublimetext 3 经常使用插件

    今天配了一下开发工具,事实上主要是想配置svn插件,可是后来查了下,发现sublimet的插件库还是蛮丰富的.顺手安了一些别的插件进去. 1,Svn插件安装的一些问题 首先ctrl+shift+p,打 ...

  7. Python游戏引擎开发(七):绘制矢量图

    今天来完毕绘制矢量图形. 没有读过前几章的同学,请先阅读前几章: Python游戏引擎开发(一):序 Python游戏引擎开发(二):创建窗体以及重绘界面 Python游戏引擎开发(三):显示图片 P ...

  8. CardLayout使用

    相对于BoxLayout,GridBugLayut等常用的Swing layout,CardLayout是特殊的,前者是一个容器内布置组件,而后者是在一个容器内放置很多页面(但一个时间只用显示一个). ...

  9. java中compareTo和compare方法之比较,集合中对象的比较

    前言 转自:http://www.cnblogs.com/yueliming/archive/2013/05/22/3092576.html (这里做了一些小改动) 一直一来对集合中对象的比较方案,有 ...

  10. 使用two.js生成的卫星环绕动画效果

    来源:GBin1.com two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现: webgl svg 2d画布 使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:T ...