【API设计风格—RESTful】：前端如何调用RESTful风格的API（三）

　　前端使用的是Ionic+AngularJS的架构，下面我们看看如何用AngularJS+$Resource定义Restful客户端。

【1】如何写

模板

定制的服务被定义在app/js/services，所以我们需要在布局模板中引入这个文件。另外，我们也要加载angularjs-resource.js这个文件，它包含了ngResource模块以及其中的$resource服务，我们一会就会用到它们。
在index.xml中引入js文件

 <script src="js/services.js">script>
  
  <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>

参考资料：http://www.angularjs.cn/A00e

【2】$resource方法说明

使用
$resource(url[, paramDefaults][, actions]);
参数

参数名	类型	详情
url	string	参数以【:】为前缀的参数化的URL模板，例如【/user/:username】。如果url带有后缀，则直接添加。例如【http://example.com/:id.json】，甚至是【http://example.com/resource/:resource_id.:format】。
paramDefaults【可选】	Object	url参数中的默认值。可在action方法中被覆盖。若任一参数为函数，则每当一次请求需要获取参数值时，都将被执行（除非参数被覆盖）。参数对象中的每个键值对，若在url模板中存在则会被首先绑定，多余的键将被添加到url搜索查询（?之后）。给定模板【/path/:verb】与参数【{verb:’greet’, salutation:’Hello’}】，将得到URL【/path/greet?salutation=Hello】。若参数值以【@】作为前缀，则该参数的值将被从data对象中取出（用于非GET操作）。
actions【可选】	Object	声明扩展默认资源动作集合的自定义动作的声明集合。声明应以$http.config的格式创建：{action1: {method:?, params:?, isArray:?, headers:?, …}, action2: {method:?, params:?, isArray:?,headers:?, …}, …}其中：action - {string} - 动作名。该名称成为你的资源对象的方法名。method – {string} – HTTP请求方法。合法的方法包括GET, POST, PUT, DELETE和JSONP。params – {Object=} – 本动作提前绑定的参数的可选集合。若任一参数为函数，则每当一次请求需要获取参数值时，都将被执行（除非参数被覆盖）。url – {string} – 动作特定url覆盖。支持url模板，与资源级别url相似。（如果不使用资源的url，这里可以覆盖）isArray – {boolean=} – 本动作的返回对象是一个数组，则为真。【以下略】

备注：
如：服务端定义的方法：

@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(){});

参考资料：http://www.ithao123.cn/content-5602494.html
http://www.thinksaas.cn/group/topic/348581/

附：前后端方法对应列表

大家可以结合上一遍博文一起看。

方法描述	Angular中的资源函数	方法类型	URL	期望返回对象	实际返回结果
获取某个学生的某门课程	lessonService.get({studentId:1,courseId:1});	GET	/student/1/course/1	单个JSON对象	{“id”: “1”, “code”: “0002”, “courseName”: “高等数学”}
获取某个学生的所有课程	lessonService.query({studentId:1});	GET	/student/1/course	JSON数组	[ { “id”: “1”, “code”: “0001”, “courseName”: “大学语文” }, { “id”: “2”, “code”: “0002”, “courseName”: “高等数学” }]
添加	lessonService.save({studentId:1},$scope.tempcourse);	POST	/student/1/course with post data course	单个	{“result”:true}
修改	lessonService.update({studentId:1,courseId:3},course);	PUT	/student/1/course/1 with post data course	单个	{“result”:true}
删除	lessonService.del({studentId:1,courseId:5});	DELETE	/student/1/course/1	单个	{“result”:true}