$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
的方法。通过一个例子来演示。