Angular企业级开发(4)-ngResource和REST介绍
时间:2022-04-22
本文章向大家介绍Angular企业级开发(4)-ngResource和REST介绍,主要内容包括一、RESTful介绍、二、$resource介绍和使用、三、参考资料、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
一、RESTful介绍
REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性(Human Readable),而且易于做缓存以及服务器扩展(scalability)。REST风格体现在URL设计上:
- 每个URL对应一个资源
- 对资源的不同操作对应于HTTP的不同方法
- 资源表现形式(representation)通过Accept和Content-Type指定
符合REST设计风格的Web API称为RESTful API。它从以下三个方面资源进行定义:
- 直观简短的资源地址:URI,比如:http://example.com/resources/。
- 传输的资源:Web服务接受与返回的互联网媒体类型,比如:JSON,XML,YAML等。
- 对资源的操作:Web服务在该资源上所支持的一系列请求方法(比如:POST,GET,PUT或DELETE)。
二、$resource介绍和使用
A factory which creates a resource object that lets you interact with RESTful server-side data sources.
$resource服务主要用来处理使用RESTful编写后台的接口进行数据交互。
- high level: $resource service
- low level:$http service
语法格式:
$resource(url, [paramDefaults], [actions], options);
$resource()
根据actions
对象的不同,默认一共有提供一下5个方法,开发者可以进行重名覆盖:
{
"get": {
"method": "GET"
}, //一般用于获取某个资源
"query": {
"method": "GET",
"isArray": true
}, //一般用于获取资源列表,以数组形式返回
"save": {
"method": "POST"
}, //一般用于保存某个资源,有可能是新建的资源,也有可能是更新现有的资源
"remove": {
"method": "DELETE"
} //一般用于删除某个资源delete: {"method": 'DELETE'}一般用于删除某个资源
}
demo: 为资源建立一个Factory:
var blogModule = angular.module('blogModule', ['ngResource']);
blogModule.factory('BlogResource', ['$resource',
function ($resource) {
return $resource(serverUrl + "/api/blog/:id", {}, {
get: { method: 'GET', cache: false, isArray: false },
save: { method: 'POST', cache: false, isArray: false },
update: { method: 'PUT', cache: false, isArray: false },
delete: { method: 'DELETE', cache: false, isArray: false }
});
}]);
CRUD操作
blogModule.controller('BlogListCtrl', ['$scope', 'BlogResource',
function($scope, BlogResource) {
BlogResource.get({}, function (response) {
$scope.blogList = response;
}, function (error) {
console.log("Error:" + JSON.stringify(error));
});
//返回数据
// $scope.blogList = [
// {
// "id": 1,
// "date": 1400623623107,
// "introText": "This is a blog post about AngularJS. We will cover how to build",
// "blogText": "This is a blog post about AngularJS. We will cover how to build a blog and how to add comments to the blog post."
// },
// {
// "id": 2,
// "date": 1400267723107,
// "introText": "In this blog post we will learn how to build applications based on REST",
// "blogText": "In this blog post we will learn how to build applications based on REST web services that contain most of the business logic needed for the application."
// }
// ];
}]);
blogModule.controller('BlogDetailCtrl', ['$scope', '$routeParams', 'BlogResource',
function($scope, $routeParams, BlogResource) {
var blogId = $routeParams.id;
BlogResource.get({ id: blogId }, function (response) {
$scope.blogEntry = response;
}, function (error) {
console.log("Error:" + JSON.stringify(error));
});
}]);
新建博客
//新建博客控制器
blogModule.controller('NewBlogPostCtrl', ['$scope', '$routeParams', 'BlogResource', function ($scope, $routeParams, BlogResource) {
$scope.submit=function(){
var postData={
"introText":$scope.introText,
"blogText":$scope.blogText,
"languageId":1
};
var blogId=Date.now();
BlogResource.save({ id: blogId },postData,function(response){
console.log("Success:"+JSON.stringify(response));
},function(errorResponse){
console.log("Error:"+JSON.stringify(errorResponse));
});
}
}]);
ps:前后端代码都写好之后,上传到Github上。http://angularjsblog.duapp.com/ 后端是Node.js编写。
三、参考资料
- https://docs.angularjs.org/api/ngResource/service/$resource
- Build a RESTful API Using Node and Express 4
- http://www.cnblogs.com/ilinuxer/p/5835879.html
- 《微信小程序七日谈》- 第一天:人生若只如初见
- 类加载器详解
- 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
- 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期
- 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩
- 《微信小程序七日谈》- 第五天:你可能要在登录功能上花费大力气
- 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密
- boi剖析 - 基于webpack的css sprites实现方案
- 深入JDK源码之ThreadLocal类
- 独家 | 一文读懂TensorFlow基础
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
- RPC原理及实现
- RMI原理及实现
- webpack多页面开发与懒加载hash解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux搭建自己Nexus私服的实现方法
- centos7系统nginx服务器下phalcon环境搭建方法详解
- Logrotate实现Catalina.out日志每俩小时切割示例
- Linux常见问题解决方案汇总
- Linux中文件/文件夹无法删除的解决方案
- GNU Parallel的具体使用
- crontab定时任务不执行的原因分析与解决方法
- 在Linux中安装ASPNET.Core3.0运行时的示例代码
- linux Bash脚本判别使用者的身份方法示例
- 配置Linux使用LDAP用户认证的方法
- linux Dig命令使用大全
- Ubuntu虚拟机下使用cutecom进行串口通信的方法
- 虚拟机Linux系统忘记密码修改root或其他用户密码的方法
- 在 RHEL8 /CentOS8 上建立多节点 Elastic stack 集群的方法
- linux 搭建svn服务器的方法步骤