白话$resource，$resource中的增删改查

前言

　$resource详解，在学习angular的过程中，我们已经知道，$http能十分便捷的为我们实现与后端的数据交互，格式如下：

$http({method:'GET'},url:'XX').then(successFun,errorFcun)

　选好交互方式（method是GET或者POST），填好地址（url是你要交互的后台地址），然后在成功（successFun）以及失败（errorFun）回调函数中分别去处理反馈回来的数据，这个容易理解，直到遇到angular中另一种数据交互方式$resource时，我觉得有必要着重整理记下笔记了。

1.$resource是个啥，$resouce起步

$resource是angularjs提供的另一种数据交互方式，它其实一个$resourced对象集合体，这个集合体中包含了五类常用的交互方式，比如get，remove.....我们可以直接使用它们（后面详细说），与$http相比，它的交互方式其实更为灵活，我们除了可以使用它体现提供的方法API外，它更支持用户自定义交互方法。它不像$http在控制器controller中申明就可以直接使用，angular并未包含$resource服务，所以我们需要额外去引用它。例如，在引用angularjs后还需引用$resouce的js文件（目录根据自己情况来）：

引用之后，我们还得在应用申明时去注入它，假设咱们有个app应用，如下：

var app = angular.module("myApp",["ngResource"])

这样，我们就可以在后续的开发中直接使用它而不报错了。

2. $resource对象与它包含的五类方法

2.1 理解$resource对象

假设，我们在网上一家百货店买了一些日用品到货了，由于你不在家，师傅给你丢在你楼下一家超市了，需要自己去自取，那现在最重要的，我们需要知道是楼下2家超市的哪一家（交互的后台url地址），去了超市，老板说你自己去那一堆快递里自己拿吧，我懒得管你，还好，快递在，然后我们取回了一个大箱子（一个$resource对象），箱子里是一些可以分别使用的工具，你只需要分别取使用它们就OK了。那么现在我们来看看$resouce对象的获取方法：

var url = "http://xxx/xxx/xxx"

app.controller("myCtrl",function($scope,$resource){
      var Entry = $resource(url);
)}

其中，url就是咱们数据交互的地址，而Entry就是咱们拿到手的一大箱东西了，知道地方咱们直接去拿，拿回来怎么用那就是后话，问题不大，那现在我们拆箱好好使用箱子里面的这些东西。

2.2 $resource中的方法

2个get类型

1.get(params，successFn，errorFn)

2.query(params，successFn，errorFn)

3个非get类型

3.save(params，payload，successFn，errorFn)

4.remove(params，payload，successFn，errorFn)

5.delete(params，payload，successFn，errorFn)

那括号里面分别代表什么意思呢？

params：跟随请求一起发送的参数，比如，查询条件。

payload：跟随请求一起发送的数据体，比如把要存的数据。

successFn：请求成功函数，在这里咱们可以根据自己需求去处理返回的数据。

errorFn：失败函数，会返回包含status状态码等参数，咱们可以根据这个判断哪里出错了。

2.2.1 get（）--查

首先说说get()，我们先看个例子：

//地址这里根据实际的来
var url = "http://xxx/xxx/xxx/:id";
//控制器中开始使用
app.controller("myCtrl",function($scope,$resource){
　　//第一次取快递，把$resource对象存在Entry中了
    var Entry = $resource(url);
　　//第二次取快递，更详细的数据交互
    Entry.get({
        'id':
    },function(resp){
　　　　//处理成功函数
       $scope.message = resp;
    },function(err){
　　　　//处理失败函数
        console.log(err);
    })
)}

咱们可以把这段代码理解为取两次快递

第一次取快递，咱们把$resouce对象保存在了Entry中

第二次取快递，咱们的又一个快递到了，还是丢在了那家超市，由于第一次咱们去过那家超市了就直接去取吧，不过这次老板就比较负责了，需要你提供下手机号码后四位数，那么我的尾数是3312（id:3312）,于是老板就把3312的这个快递（这条数据）给我们了。于是咱们完成了第二次较为详细的http请求。

地址虽然没变，但是却多了一个对手机号码的流程，所以在上述代码url结尾有个":id"，这个用处就是用来单一条件查询用的。

咱们之所以能直接使用Entry.get()就能获取到对应地址的数据，是因为Entry在赋值保存时已经包含了地址信息，所以get没必要再次提供地址。

2.2.2query():--查

Entry.query(function(messages) {
// 读取集合中第一条数据
$scope.message= messages[];
});

query也属于get请求，但与get相比，它更常用语获取大量数据的数组，而get更适合加上ID去获取某一条数据。

2.2.3save()--增

Entry.save({
           "id": ,
           "age": "",
            "name": "小钻风",
       },function(resp){
            $scope.message = resp;
       },function(err){
            console.log(err);
})

存储一条包含id，age以及name属性的一条数据

save用于像后端存储一条新的数据，需要注意的是，当你想修改某条已经存在的数据时，不要想着找到对应id数据后利用save进行覆盖更新，这是会报错的，因为save本质是新增数据，并不能用于存储覆盖现有数据。

2.2.4delete()与remove()--删

Entry.remove({
    'id':
},function(resp){
    $scope.message = resp;
},function(err){
    console.log(err);
})

找到id为10000的数据，并且删除掉这条数据

这对兄弟功能以及使用完全一样，那为啥要存在2个呢，那是因为delete是JS的保留字，在IE中使用会存在其它报错问题，所以保险起见，还是直接用remove进行删除吧。

3.$resource中的自定义方法

我们在前面说了增删查，那我们要改已经存在库里面的数据咋办，而且也说了，save只能新增，并不能修改，那这时候就得自定义一个修改的方法了。

其实在获取$resource对象时，除了单一提供url参数外，其实还有其他的可选参数，我们看看如何定义一个修改：

 var Entry = $resource(url,{},{
      update:{
           method:'PUT'
      }
 });  

　　Entry.update({

　　　　'id':10000

　　},{

　　　　"id": 10000,

　　　　"age": "28",

　　　　"name": "小钻风",

　　},function(resp){

　　　　$scope.message = resp;

　　},function(err){

　　　　console.log(err);

　　})

上述代码分为两步，第一，获取$resource对象，同时封装了一个update的方法，第二部，使用update找到id为10000的数据，将其覆盖为我们后面提供的数据。

这里我们定义的method为put，简单提下PUT: 把消息本体中的消息发送到一个URL,通常用于向服务器发送请求，如果URI不存在，则要求服务器根据请求创建资源，如果存在，服务器就接受请求内容，并修改URI资源的原始版本。

update是我们自定义的方法名，你想取啥就取啥，当然在使用时你得跟你上面定义的一样，在update中其实还可以定义更多属性，如下：

$resource(url,{},{
  update:{
    method:'', //送HTTP请求的方法
    url:'',  //为该方法的具体路由设置的URL
    params:{},
    isArray:boolean,  //为ture此动作返回数组
    transformRequest:函数或者函数数组
    transformResponse:函数或者函数数组
    cache:布尔型或缓存对象
    timeout:数值或promise对象
    withCredentials:布尔类型
    responseType:字符串，用来设置XMLHttpRequestResponseType属性
  }
})  

先整理到这吧。