前端使用的是Ionic+AngularJS的架构，下面我们看看如何用AngularJS+$Resource定义Restful客户端。
【1】如何写
模板
定制的服务被定义在app/js/services，所以我们需要在布局模板中引入这个文件。另外，我们也要加载angularjs-resource.js这个文件，它包含了ngResource模块以及其中的$resource服务，我们一会就会用到它们。
在index.xml中引入js文件
<script src="js/services.js"></script><!--使用Restful必须引入的脚本 --><script src="lib/ionic/js/angular/angular-resource.js"></script>
服务
在js/services.js文件中写如下代码
angular.module('itoo-basic-curriculumschedule.services', ['ngResource'])//定义了一个课程的服务工厂.factory('lessonService', function($resource,baseUrl){return $resource(baseUrl+'/student/:studentId/course/:courseId', {},{get: {method:'GET',isArray:false},query: {method:'GET',isArray:true},save: {method:'POST',isArray:false},update: {method:'PUT',isArray:false},del:{method:'DELETE',isArray:false}});})
把服务模块添加到app.js的依赖数组里面
itoo-basic-curriculumschedule.services和app.js中的要一致（即把模块添加到依赖数组）,app.js中写如下代码
angular.module('itoo-basic-curriculumschedule', ['ionic','itoo-basic-curriculumschedule.controllers','itoo-basic-curriculumschedule.routes','itoo-basic-curriculumschedule.services','itoo-basic-curriculumschedule.directives'])
备注：
1.baseUrl是在app.js定义的全局变量
.constant(‘baseUrl’, ‘http://localhost:8100/api‘); //定义请求数据的地址，这里是一个代理服务器地址全局变量
2.lessonService就是我们定制的服务的名称
3.里面用key，value的形式定义了具体方法
控制器中对方法进行调用
在controller.js中写
.controller('lessonCtrl',function($scope,lessonService){//GET单个JSON $scope.lesson=lessonService.get({studentId:1,courseId:1});//GET:JSON数组$scope.lessons=lessonService.query({studentId:1});//POST:保存一个新对象$scope.tempcourse = { code: '0008',courseName: '中国近现代史' };var course=$scope.tempcourse;$scope.savedLesson=lessonService.save({studentId:1},course);//PUT:修改JSON对象保存lessonService.get({studentId:1,courseId:3},function(course){//course.courseName="修改的课程：物理学";course.code="0006"; $scope.updateLesson=lessonService.update({studentId:1,courseId:3},course);},function(){});//DELETE$scope.deleteLesson=lessonService.del({studentId:1,courseId:5});})
页面上显示返回的JSON数据
tab-todayLesson.xml
<div class="list card" ng-controller="lessonCtrl"><p>GET请求单个JSON：{{lesson}}</p><p>GET请求JSON数组：{{lessons}}</p><p>POST提交新建的JSON对象：{{savedLesson}}</p><p>PUT提交修改的JSON对象：{{updateLesson}}</p><p>DELETE：{{deleteLesson}}</p></div>
参考资料：/A00e
【2】$resource方法说明
使用
$resource(url[, paramDefaults][, actions]);
参数
备注：
如：服务端定义的方法：
@RequestMapping(value="/student/{studentId}/course/{courseId}",method=RequestMethod.POST)
AngularJS中
.factory('lessonService', function($resource,baseUrl){return $resource(baseUrl+'/student/:studentId/course/:courseId', {courseId:'@id'},{save: {method:'POST',isArray:false}, });})
controller中调用
lessonService.get({studentId:1,courseId:3},function(course){//course.courseName="修改的课程：物理学";course.code="0006"; $scope.updateLesson=lessonService.update({studentId:1,courseId:3},course);},function(){});
lessonService.update({studentId:1,
courseId:3}这里就不需要传递courseId参数了（用删除线标注的），会自动将course.id赋值给参数courseId，所以对象的属性要和@后跟的名字一致HTTP GET “类”动作: Resource.action([parameters], [success], [error])
non-GET “类”动作: Resource.action([parameters], postData, [success], [error])
Success回调以(value, responseHeaders)参数调用。Error回调以(httpResponse)参数回调，比如：要在服务端返回数据之后，再进行某些操作，就要在回调函数里写代码
如：POST方法
$scope.savedLesson=lessonService.save({studentId:1},course,function(){},function(){});
参考资料：/content-5602494.html
/group/topic/348581/
附：前后端方法对应列表
大家可以结合上一遍博文一起看。
如果觉得《【API设计风格—RESTful】：前端如何调用RESTful风格的API（三）》对你有帮助，请点赞、收藏，并留下你的观点哦！
