使用 AngularJS 的 $resource 连接 WebAPI Controller
使用 AngularJS 的 $resource 连接 WebAPI Controller
ASP.NET Web API 是 .NET 平台创建 REST 风格的 HTTP 服务的理想框架, REST 风格的 HTTP 服务可以被多种客户端使用, 包括浏览器和移动设备, 使用 REST 风格的 HTTP 服务也越来越多。
由于 REST 服务的逐渐流行, 越来越多的客户端类库都提供了 REST 服务的专用类库, AngularJS 也不例外, 提供了 $resource
来实现 REST 服务的支持。
在 AngularJS 的文档中, 对 $resource
的描述如下:
A factory which creates a resource object that lets you interact with RESTful server-side data sources.
接下来就介绍如何使用 AngularJS 的 $resource
对接 ASP.NET Web API 创建的 REST 服务。
假设我们有下面一个 Category
实体类:
public class Category {
public int CategoryId { get; set; }
public string CategoryName { get; set; }
public string Description { get; set; }
}
CategoriesController
类实现了基本的 CURD 操作, 代码如下:
public class CategoriesController : ApiController {
private static readonly IList<Category> Data;
// GET ~/api/categories
public IHttpActionResult GetAll() {
return Ok(Data);
}
// GET ~/api/categories/{id:int}
public IHttpActionResult Get(int id) {
var c = Data.FirstOrDefault(cat => cat.CategoryId == id);
if (c == null) {
return NotFound();
}
return Ok(c);
}
// POST ~/api/categories
public IHttpActionResult Post(Category category) {
category.CategoryId = Data.Count + 1;
Data.Add(category);
var response = Request.CreateResponse(category);
var url = Url.Link("DefaultApi", new { id = category.CategoryId });
response.Headers.Location = new Uri(url);
return ResponseMessage(response);
}
// PUT ~/api/categories/{id:int}
public IHttpActionResult Put([FromUri]int id, [FromBody]Category category) {
var cat = Data.FirstOrDefault(c => c.CategoryId == id);
if (cat == null) {
return NotFound();
}
cat.CategoryName = category.CategoryName;
cat.Description = category.Description;
return Ok(cat);
}
// DELETE ~/api/categories/{id:int}
public IHttpActionResult Delete(int id) {
var cat = Data.FirstOrDefault(c => c.CategoryId == id);
if (cat != null) {
Data.Remove(cat);
}
return StatusCode(System.Net.HttpStatusCode.NoContent);
}
}
实现的 REST 服务描述如下:
方法 |
地址 |
描述 |
---|---|---|
GET |
~/api/categories |
Get all categories |
GET |
~/api/categories/{id:int} |
Get category by id |
POST |
~/api/categories/ |
Create a new category |
PUT |
~/api/categories/{id:int} |
Update an exist category |
DELETE |
~/api/categories/{id:int} |
Delete category by id |
AngularJS 提供了 resource 服务来创建具有高级行为的对象和 REST 服务交互, 从而不需要在使用底层的 http 服务。
$resource
的基本用法如下:
$resource(url, [paramDefaults], [actions], options);
参数说明如下:
- url REST 服务的地址, 如果URL有参数, 则在参数名之前添加
:
, 比如:/user/:username
; - paramDefaults , 用 json 形式表示的 url 参数的默认值, 比如上面的
/user/:username
, 可以设置默认值为:{ username: 'anonymous' }
, 则默认会生成下面的 URL:/user/anonymous
; 如果参数的默认值是函数, 在请求时会执行函数以求得默认值;如果参数值是以@
开头的, 则表示要从请求发送的 json 对象中提取对应的属性值, 比如参数默认值为{ username: '@username' }
, 则会讲发送对象的username
属性填充到 URL 中; - actions 额外的 HTTP 动作, 具体请参考 $http.config;
- options 可选项, 只支持
stripTrailingSlashes
, 配置是否将 URL 结尾的/
移除;
$resource 返回的对象默认支持下列动作:
{
'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'}
};
因此, 针对前面创建的 REST 服务, 还需要一个使用 PUT
的 update
动作, 客户端代码如下:
var categories = $resource('/api/categories/:id', { id: '@id' }, {
update: {
method: 'PUT'
}
});
使用起来也是非常方便的, 比如:
// get all categories from server
categories.query(function(data) {
// play with data in the call back;
});
// get one category
var cat = categories.get({id: 1}, function() {
cat.Description = 'a nice description';
cat.$update();
});
当然, 也可以使用 promise
风格的回调函数, 比如:
// get all categories with promise
categories.query().promise.then(function(data) {
// play with data in promise.then
})
.fail(function(http) {
// show http error here.
});
- 一步一步学lucene——(第四步:搜索篇)
- Python爬虫代理IP池
- SSDB图形界面管理工具:phpssdbadmin安装部署
- [Go 语言社区] 初始化内存数据--游戏列表数据
- SSDB安装配置记录
- Python标准库笔记(3) — datetime模块
- Django 1.10中文文档-第一个应用Part4-表单和通用视图
- Python标准库笔记(2) — re模块
- Python爬虫—破解JS加密的Cookie
- Go语言中json转成map结构
- rpc-dubbo简单入门
- Django 1.10中文文档-第一个应用Part3-视图和模板
- Go语言对JSON进行编码和解码
- [Go 语言社区]服务器自测JS 工程
- 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 数组属性和方法
- Python requests模块解析XML
- python requests提示警告InsecureRequestWarning
- python进程池:multiprocessing.pool
- AttributeError: 'list' object has no attribute 'keys'
- raise ValueError("Cannot convert {0!r} to Excel".format(value))
- ImportError: cannot import name 'Process' from 'multiprocessing'
- mac卸载mysql
- 不可错过的Webpack核心知识点
- APP+Web混合全局版的几种布署方法
- 关于合并pdf文件出现的问题
- Python中的with是测试常用到的资源打开利
- python批量运行py文件
- beautifulsoup的使用
- PWN:House Of Einherjar
- 2.用Python套用Excel模板,一键完成原亮样式