$resoure服务的简单学习

$resource 服务是前段页面用来与服务端进行数据交互的angular服务，调用该服务后返回的$resource对象中包含了许多与服务端进行交互的API。

一，`$resource` 服务的使用和对象中的方法。

1，$resource 服务是angular的可选模块，所以使用之前应该先下载该模块。可以在终端使用npm安装。

npm install angular-resource --save

也必须在html文件中包含相应的js文件。

<script src='../Script/angular-resource.min.js'></script>

最后还应该在模块定义中将他设为一个依赖模块。

angular.module('myapp', ['ngResource']);

这样就可以在控制器或是其他服务的定义中调用这个服务了。完整的调用形式如下：

var obj = $resource(url[, parameDefaults][, actions]);

代码中url表示向服务端发送的请求地址，允许有占位符，但要以 : 为前缀。paramDefaults 是一个对象，发送请求时对象中的值全部序列化并添加到url之后。actions 主要用于自定义$resource 对象的方法的。
返回的 obj 对象包含了与服务端数据交互的所有API。有GET类型的get ,query方法以及POST类型的 save ,delete ,remove 方法。
其中GET类型的调用格式分别如下：

var obj = $resource(url);
obj.get(params, successFn, errorFn);
obj.query(params, successFn, errorFn);

方法get 与方法query 的区别是前者返回的是单个资源，后者返回的是一个数组或集合的资源。
POST类型的调用格式如下：

var obj = $resource(url);
obj.save(params, postData, successFn, errorFn);

方法delete与方法remove 调用格式也是一样的。
其中postData会随着请求被发出时一起被发送到服务端。

接下来看一个简单的$resource对象的方法使用。

<!DOCTYPE>
<html ng-app='myapp'>
<head>
    <title>myapp</title>
    <script type="text/javascript" src='/node_modules/angular/angular.js'></script>
    <script type="text/javascript" src='/node_modules/angular-resource/angular-resource.js'></script>
</head>
<body ng-controller='myCtrl'>
    <div ng-controller='myCtrl'>
        <ul>
            <li ng-repeat='item in items'>
                <span>{{item.Code}}</span>
                <span>{{item.Name}}</span>
                <span>{{item.Sex}}</span>
            </li>
        </ul>
    </div>
    Key值： <input type='text' ng-model='key'/>
    <button ng-click='save()'>保存</button>
    {{result}}
    <script type="text/javascript">
        angular.module('myapp', ['ngResource'])
        .controller('myCtrl', function($scope, $resource){
            var stus = $resource('/data');
            stus.query({action: 'search'}, function(resp){
                $scope.items = resp;
            });
            $scope.save = function() {
                var data = {key: $scope.key};
                stus.save({action: 'save'}, data, function(resp){
                    $scope.result = 'a' ? "保存成功" : "保存失败";
                });
            }
        });
    </script>
</body>
</html>

页面加载时调用query方法先从服务端那会数据，然后点击按钮调用save方法并根据返回的结果输出。
服务端代码如下：

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.use(express.static('./'));
app.use(bodyParser.urlencoded({extend: false}));
app.use(bodyParser.json());

app.get('/', function(req, res){
    res.sendFile('index.html', {root: __dirname});
});

app.get('/data', function(req, res){
    res.json([{Code: '1001', Name: 'xiezhenyu', Sex: '男'}]);
});

app.post('/data', function(req, res){
    if (req.body == '123')
        res.send('a');
    else
        res.send('b');
})

app.listen(3000, function(){
    console.log('listening on port 3000!');
});

二，$resource服务中的自定义请求方法。

请求方法的自定义主要是在调用$resource服务的方法中添加第三个参数actions。参数对象中，通过键key/值value来自定义$resource的方法。通过一个例子来演示。