这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了。
REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式
1)我们首先需要引入ng-Resource 模块,在angular之后
<script src="https://www.jb51.net/js/vendor/angular.js"></script> <script src="https://www.jb51.net/js/vendor/angular-resource.js"></script>
2) 在我们的应用中需要将其当做依赖进行引用
angular.module('myApp', ['ngResource']);
3)如何使用?
$resource服务本身是一个创建资源对象的工厂,返回的$resource对象中包含了同后端服务器进行的交互的高层API.
var User=$resource('/api/users/:userId',{userId:'@id'});
可以把User对象理解成同RESTful的后端服务进行交互的接口。
一、HTTP GET类型的方法
①GET请求: get(params,successFn,errrorFn)
不定义具体的参数,get()请求通常被用来获取单个资源。
//GET /api/users User.get(function(resp){ //处理成功 },function(err){ //处理错误 });
如果参数中传入了具名参数(我们例子中的参数是id),那么get()方法会向包含id的URL发送请求:
//发起一个请求:GET-->/api/users/123 User.get({id:'1234'},function(resp){ //success },function(error){ //fail });
②QUERY 请求:query向指定URL发送一个GET请求,并期望返回一个JSON格式的资源对象集合。
//发起一个请求 User.query(function(users){ //读取集合中的第一个用户 var user=users[0]; });
query()和get()方法之间唯一的区别是AngularJS期望query()方法返回数组。
二、非HTTP GET类型的方法
1. save(params, payload, successFn, errorFn)
save方法向指定URL发送一个POST请求,并用数据体来生成请求体。save()方法用来在服务器上生成一个新的资源。 payload:代表请求发送的数据体
//发送一个请求 with the body {name: 'Ari'} User.save({},{name:'Ari'},function(resp){ },function(error){ });
2. delete(params, payload, successFn, errorFn)
delete方法会向指定URL发送一个DELETE请求,并用数据体来生成请求体。它被用来在服务器上删除一个实例:
// DELETE /api/users User.delete({}, { id: '123' }, function(response) { // 处理成功的删除响应 }, function(response) { // 处理非成功的删除响应 });
3. remove(params, payload, successFn, errorFn)
remove方法和delete()方法的作用是完全相同的,它存在的意义是因为delete是JavaScript的保留字,在IE浏览器中会导致额外的问题。
// 发起一个请求: // DELETE /api/users User.remove({}, { id: '123' }, function(response) { // 处理成功的删除响应 }, function(response) { // 处理非成功的删除响应 });
三、$resource设置对象
$resource对常见的五种请求进行封装,我们还可以对$resource进行扩展,这里要扩展$resource我们需要传入第三个参数,该参数是一个对象。
$resource('/api/users',{},{ sendEmail:{ method:'', url:'', params:{}, isArray:boolean, transformRequest:函数或者函数数组 transformResponse:函数或者函数数组 cache:布尔型或缓存对象 timeout:数值或promise对象 withCredentials:布尔类型 responseType:字符串,用来设置XMLHttpRequestResponseType属性 } })
四、$resource实例
示例1:简单的CRUD --摘自点击打开链接 这哥们总结的很全面
var User = $resource('/user/:userId', {userId:'@id'}); var user = User.get({userId:123}, function() { user.abc = true; user.$save(); });
注意上面代码中的”@id”和”$save()”,使用了@后,当执行$save时,user.id就会被当做userId的值来发送请求。
以这种方式封装Ajax,不仅仅使得代码更加优雅,而且还能配合ng的视图渲染:当数据没有返回之前,模板引擎不会渲染,一旦异步数据获取完成,会自动触发模板引擎的渲染机制把数据呈现到视图中。
怎么理解呢?
简单来说,上述方法在返回数据时,响应会被一个原型类包装,并在实例中添加一些有用的方法。
有以下三个实例方法:
$save()
$remove()
$delete()