【API设计风格—RESTful】:前端如何调用RESTful风格的API(三)
2016-03-23 17:33
691 查看
前端使用的是Ionic+AngularJS的架构,下面我们看看如何用AngularJS+$Resource定义Restful客户端。
在index.xml中引入js文件
备注:
1.baseUrl是在app.js定义的全局变量
.constant(‘baseUrl’, ‘http://localhost:8100/api‘); //定义请求数据的地址,这里是一个代理服务器地址全局变量
2.lessonService就是我们定制的服务的名称
3.里面用key,value的形式定义了具体方法
参考资料:http://www.angularjs.cn/A00e
$resource(url[, paramDefaults][, actions]);
参数
备注:
如:服务端定义的方法:
AngularJS中
controller中调用
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/
【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} |
相关文章推荐
- javaScript特殊知识点归纳
- React Native学习之RCTDeviceEventEmitter(类似iOS的NSNotificationCenter)简单用法以及背景透明
- 如何把自己用html写的简历导出成为pdf格式
- 扩展html 无边框的input 边框
- Javascript 模块化开发
- 用JavaScript将数字转换为大写金额
- HTML5新增结构标签
- jquery如何判断滚动条滚到页面底部并执行事件
- 从零开始搭建前端数据监控系统(二)-前端性能监控方案调研
- Gliffy Diagrams(在线绘图)
- HTML5 Inupt 类型
- Angularjs和bootstrap、jquery和easyUI的各自主要功能
- Javascript继承
- html5文字阴影与自动换行
- Gliffy Diagrams(在线绘图)
- JS常用正则表达式
- javaScript中定义类或对象的五种方式
- js里面“===”与“==”的区别
- Fentury: Personal Finance Manager(理财)
- 自定义HTML中select控件