AngularJS使用OData请求ASP.NET Web API资源的思路
本篇整理AngularJS使用OData请求ASP.NET Web API资源的思路。
首先给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使用OData请求ASP.NET Web API资源的思路的更多相关文章
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤
在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
AngularJS中的$resource服务相比$http服务更适合与RESTful服务进行交互.本篇后端使用ASP.NET Web API, 前端使用$resource,实现增删改查. 本系列包括: ...
- OData查询ASP.NET Web API全攻略
本篇使用ASP.NET Web API来体验OData各种query. 首先是本篇即将用到的Model.使用的OData版本是4.0. public class Customer { public i ...
- 有关AngularJS请求Web API资源的思路
页面部分大致如下: <body ng-app="productManagement"> ... <div ng-include="'app/produc ...
- 对一个前端AngularJS,后端OData,ASP.NET Web API案例的理解
依然chsakell,他写了一篇前端AngularJS,后端OData,ASP.NET Web API的Demo,关于OData在ASP.NET Web API中的正删改查没有什么特别之处,但在前端调 ...
- ASP.NET Web API 2 external logins with Facebook and Google in AngularJS app
转载:http://bitoftech.net/2014/08/11/asp-net-web-api-2-external-logins-social-logins-facebook-google-a ...
- [水煮 ASP.NET Web API 2 方法论] 目 录
一.ASP.NET 中的 Web API [水煮 ASP.NET Web API2 方法论](1-1)在MVC 应用程序中添加 ASP.NET Web API 与 ASP.NET MVC 在同一个进程 ...
- 杂项:ASP.NET Web API
ylbtech-杂项:ASP.NET Web API ASP.NET Web API 是一种框架,用于轻松构建可以访问多种客户端(包括浏览器和移动设备)的 HTTP 服务. ASP.NET Web A ...
- 使用ASP.NET Web API 2创建OData v4 终结点
开放数据协议(Open Data Protocol[简称OData])是用于Web的数据访问协议.OData提供了一种对数据集进行CRUD操作(Create,Read,Update,Delete)的统 ...
随机推荐
- mac安装sentry
最近需要一个日志监视系统所以选择了sentry. 安装docker https://download.docker.com/mac/stable/Docker.dmg 登录 安装完了打开 会提示登录输 ...
- python运行execjs解密js
[转]http://www.knowsky.com/1041161.html python 记一次计算qzonetoken经历 之前用python写了个发表说说的爬虫,但最近发现在post数据时返回不 ...
- 解决centos7下tomcat启动正常,无法访问项目的问题
centos7防火墙不再采用iptables命令,改用firewalld 禁用防火墙命令: # systemctl stop firewalld.service # systemctl disable ...
- 二、vue中组件的使用
1.组件拆分 1.组件实质上也是一个vue实例,因此组件中也可以使用vue的对象属性,反过来每一个vue实例也是一个vue组件(注:1.唯一不同的是el是根实例的特有选项,2.组件中的data必须是一 ...
- Python_oldboy_自动化运维之路_线程,进程,协程(十一)
本节内容: 线程 进程 协程 IO多路复用 自定义异步非阻塞的框架 线程和进程的介绍: 举个例子,拿甄嬛传举列线程和进程的关系: 总结:1.工作最小单元是线程,进程说白了就是提供资源的 2.一个应用程 ...
- jira ao UpgradeTask
插件发布到市场后,后续版本迭代的过程中,可能会对ao实体类的字段作添加或删除,或者要将某一字段的值映射解析到另一字段上. 本来这个工作,可以在插件启动的时候,在实现了com.atlassian.sal ...
- Kubernetes Master节点灾备恢复操作指南---升级版
本文档简述了Kubernetes主节点灾备恢复的相关步骤,供在发生k8s master崩溃时操作. 就算是在k8s里部署了etcd群集, 主节点控制组件的高可用节点,灾备恢复也是必须要实现的操作,才能 ...
- transform:rotate/旋转
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; backgr ...
- vuejs、eggjs、mqtt
vuejs.eggjs.mqtt全栈式开发设备管理系统 vuejs.eggjs.mqtt全栈式开发简单设备管理系统 业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据 ...
- 搭建微信小程序基本的https与wss环境
年底了写一篇小程序环境搭建的文章, 主要是怎么搭建一个线上环境以及怎么不改动原有http Api的情况 1.准备工作 域名一个 免费证书(推荐: 腾讯云.阿里云.便宜ssl 都是免费的 配置好后先将证 ...