【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>
  <!--使用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> 

参考资料: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}

你可能感兴趣的:(api,Restful,API设计)