AngularJS使用OData请求ASP.NET Web API资源的思路
2015-10-29 10:01
661 查看
本篇整理AngularJS使用OData请求ASP.NET Web API资源的思路。
首先给ASP.NET Web API插上OData的翅膀,通过NuGet安装OData.
然后,给controller中需要使用OData的Action加上EnableQuery特性,并让Action方法返回IQueryable<T>类型。
以上,EnableQuery特性还可以做出很多配置,比如:
[EnableQuery(PageSize=50)]
[EnableQuery(AllowedQueryOptons=AllowedQueryOptions.Skip | AllowedQueryOptions.Top)]
在前端,可能先要自定义一个module,把uri路径作为这个module的一个常量。
ngResource这个module来自于angular-resource.js文件,需要引用。
接着可能要通过factory的方式,为custommodule这个module添加一个自定义service。
以上,productResource这个service返回一个完整的api请求路径。
接着需要把productResource这个service注入到某个controller中去。这时候就可以把OData的语法放在一个object对象传递给服务端。
最终呈现出的OData相关uri大致是这样:http://localhost:52293/api/products?$filter=Price+gt+5&$orderby=Price
基本就是这个思路
有关OData的Operation:
$top
$skip
$orderby
$filter
$select
$filter的一些操作符:
$filter: "Price eq 10"
$filter: "Price ne 10"
$filter: "Price gt 10"
$filter: "Price ge 10" 大于等于
$filter: "Price lt 10"
$filter: "Price le 10" 小于或等于
$filter: "Price gt 10 and Price lt 20"
$filter: "Price eq 10 or Price eq 20"
$filter: "(Price lt 10) and not (Price eq 0)"
$filter的一些函数:
$filter: "Starswith(ProductCode,'GDN')"
$filter: "endswith(ProductCode, '001')"
$filter: "contains(ProductCode, 'GDN')"
$filter: "tolower(ProductCode) eq '001a'"
$filter: "toupper(ProductCode) eq '001B'"
$filter其它:
运算符:Additon, subtraction
日期:year, month, day, now, etc
运算:round, floor, etc
位置:distance, length, etc
Lamda:any, all
可空:null, etc
首先给ASP.NET Web API插上OData的翅膀,通过NuGet安装OData.
然后,给controller中需要使用OData的Action加上EnableQuery特性,并让Action方法返回IQueryable<T>类型。
public class ProductsController : ApiController { // GET: api/Products [EnableQuery()] public IQueryable<Product> Get() { var productRepository = new ProductRepository(); return productRepository.Retrieve().AsQueryable(); } ... }
以上,EnableQuery特性还可以做出很多配置,比如:
[EnableQuery(PageSize=50)]
[EnableQuery(AllowedQueryOptons=AllowedQueryOptions.Skip | AllowedQueryOptions.Top)]
在前端,可能先要自定义一个module,把uri路径作为这个module的一个常量。
(function () { "use strict"; angular.module("custommodule", ["ngResource"]) .constant("appSettings", { serverPath: "http://localhost:49705/" }); }());
ngResource这个module来自于angular-resource.js文件,需要引用。
接着可能要通过factory的方式,为custommodule这个module添加一个自定义service。
function () { "use strict"; //通过工厂的方式创建了一个服务 angular.module("custommodule") .factory("productResource", ["$resource", "appSettings", productResouce]); function productResouce($resource, appSettings) { return $resource(appSettings.serverPath + "/api/products/:search"); } }());
以上,productResource这个service返回一个完整的api请求路径。
接着需要把productResource这个service注入到某个controller中去。这时候就可以把OData的语法放在一个object对象传递给服务端。
(function () { "use strict"; angular .module("productManagement") .controller("ProductListCtrl", ProductListCtrl); function ProductListCtrl(productResource) { var vm = this; vm.searchCriteria = "GDN"; productResource.query({ $orderby: "Price desc" }, function (data) { vm.products = data; }); } }());
最终呈现出的OData相关uri大致是这样:http://localhost:52293/api/products?$filter=Price+gt+5&$orderby=Price
基本就是这个思路
有关OData的Operation:
$top
$skip
$orderby
$filter
$select
$filter的一些操作符:
$filter: "Price eq 10"
$filter: "Price ne 10"
$filter: "Price gt 10"
$filter: "Price ge 10" 大于等于
$filter: "Price lt 10"
$filter: "Price le 10" 小于或等于
$filter: "Price gt 10 and Price lt 20"
$filter: "Price eq 10 or Price eq 20"
$filter: "(Price lt 10) and not (Price eq 0)"
$filter的一些函数:
$filter: "Starswith(ProductCode,'GDN')"
$filter: "endswith(ProductCode, '001')"
$filter: "contains(ProductCode, 'GDN')"
$filter: "tolower(ProductCode) eq '001a'"
$filter: "toupper(ProductCode) eq '001B'"
$filter其它:
运算符:Additon, subtraction
日期:year, month, day, now, etc
运算:round, floor, etc
位置:distance, length, etc
Lamda:any, all
可空:null, etc
相关文章推荐
- angularjs与PHP的交互通信问题
- AngularJs angular.element
- 读angularjs权威指南入坑之旅
- Angularjs Response Headers 只有content-type
- angularjs现在真的那么少?
- AngularJS之Provider, Value, Constant, Service, Factory, Decorator的区别与详解
- angular模块加载
- AngularJS ngTouch 插件,替代原来的ng-click
- [Angular 2] Using Pipes to Filter Data
- [Angular 2] Controlling how Styles are Shared with View Encapsulation
- [Angular 2] ng-class and Encapsulated Component Styles
- angularjs 路由的使用
- AngularJs angular.uppercase、angular.lowercase、angular.fromJson、angular.toJson
- angular 继承和扩展
- angularjs-paste-upload
- AngularJS最常用的八种功能
- AngularJSb表单校验示例
- AngularJS 指令
- AngularJS 表达式
- AngularJS 简介