在上一篇中实现了增删改查，本篇实现分页和过滤。
本系列包括：
1、前端使用AngularJS的$resource,后端ASP.NET Web API，实现增删改查
2、前端使用AngularJS的$resource,后端ASP.NET Web API，实现分页、过滤
后端添加分页、排序逻辑
首先要在后端API中添加分页的逻辑。对于分页来说，一般需要从前端获取页容量和当前页变量，还可以获取有关排序的变量。大致这样：
public IHttpActionResult Get(int pageSize, int pageNumber, string orderBy = ""){}
在StudentsController这个控制器中，增加一个Get重载方法，用于接受分页变量。
[RoutePrefix("api/Students")]
public class StudentsController : ApiController
{
private StudentsReop _reop = new StudentsReop();
//GET api/Students
public HttpResponseMessage Get()
{
var students = _reop.Query().ToList();
return Request.CreateResponse(HttpStatusCode.OK, students);
}
//GET api/Students/5
public HttpResponseMessage Get(int id)
{
var student = _reop.Get(id);
return Request.CreateResponse(HttpStatusCode.OK, student);
}
//GET api/Students/pageSize/pageNumber/orderBy(optional)
[Route("{pageSize:int}/{pageNumber:int}/{orderBy:alpha?}")]
public IHttpActionResult Get(int pageSize, int pageNumber, string orderBy = "")
{
var totalCount = _reop.Query().ToList().Count();//总数量
var totalPages = Math.Ceiling((double)totalCount/pageSize);//总页数和pageSize有关
var tempResult = _reop.Query();
if (QueryHelper.PropertyExists<StudentVm>(orderBy))
{
var orderByExpression = QueryHelper.GetPropertyExpression<StudentVm>(orderBy);
tempResult = tempResult.AsQueryable().OrderBy(orderByExpression);
}
else
{
tempResult = tempResult.OrderBy(c => c.Id);
}
var students = tempResult.Skip((pageNumber - ) * pageSize)
.Take(pageSize)
.ToList();
var result = new
{
TotalCount = totalCount,
TotalPages = totalPages,
Students = students
};
return Ok(result);
}
//POST api/Students
public void Post([FromBody]StudentVm student)
{
_reop.Post(student);
}
//PUT api/Students/5
public void Put(int id, [FromBody]StudentVm student)
{
_reop.Put(id, student);
}
//DELETE api/Students
public void Delete(int id)
{
_reop.Delete(id);
}
}
以上，Get(int pageSize, int pageNumber, string orderBy = "")方法中，首先获取排序后的临时数据，再使用skip,take方法获取分页数据，最后返回给前端一个json数据，其中，TotalCount表示总数据量，Students表示当前页下的数据，这2个字段供前端读取。另外，QueryHelper封装了可以根据模型字段获取表达式树的方法。
internal static class QueryHelper
{
public static bool PropertyExists<T>(string propertyName)
{
return typeof(T).GetProperty(propertyName, BindingFlags.IgnoreCase | BindingFlags.Public | BindingFlags.Instance) != null;
} public static Expression<Func<T, string>> GetPropertyExpression<T>(string propertyName)
{
if (typeof(T).GetProperty(propertyName, BindingFlags.IgnoreCase | BindingFlags.Public | BindingFlags.Instance) == null)
{
return null;
} var paramterExpression = Expression.Parameter(typeof(T)); return (Expression<Func<T, string>>)Expression.Lambda(Expression.PropertyOrField(paramterExpression, propertyName), paramterExpression);
} public static Expression<Func<T, int>> GetPropertyExpressionInt<T>(string propertyName)
{
if (typeof(T).GetProperty(propertyName, BindingFlags.IgnoreCase | BindingFlags.Public | BindingFlags.Instance) == null)
{
return null;
} var paramterExpression = Expression.Parameter(typeof(T)); return (Expression<Func<T, int>>)Expression.Lambda(Expression.PropertyOrField(paramterExpression, propertyName), paramterExpression);
}
}
此时，通过浏览器可以获取到分页数据。比如：http://localhost:49621/api/Students/5/2/Name
前端准备
前端需要用到Michael Bromley写的一个分页Directive。 通过如下可安装：
bower install angular-utils-pagination
或
npm install angular-utils-pagination
还需要安装bootstrap和jquery:
npm install bootstrap
npm install jquery
文件结构变为：
app.js 主module，路由都在这里配置
index.html 主视图，引用所有的css,js文件，提供让其它部分视图呈现的一块区域<div ng-view></div>
.....service/ 自定义服务，$resouce的核心就封装在这里
..........studentService.js
.....controller/
..........studentsCtrl.js 列表
..........studentUpdateCtrl.js 更新
..........studentCreateCtrl.js 添加
.....views/
..........Students.html 列表
..........StudentInfo.html 更新
..........StudentCreate.html 添加
vendor/
......diaPagination/ Michael Bromley写的directive
..........dirPagination.css
..........dirPagination.js
..........dirPagination.tpl.html
index.html
相对于上一篇，添加了如下：
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="vendor/dirPagination/dirPagination.css"/>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/dirPagination/dirPagination.js"></script>
并使用上了bootstrap。
<!DOCTYPE html>
<html lang="en" ng-app="studentManagement">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="node_modules/alertify/themes/alertify.core.css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="vendor/dirPagination/dirPagination.css"/>
</head>
<body>
<div>
<p>
<a href="#/">Students</a>
<a href="#/Create">Create Student</a>
</p>
</div> <div class="container">
<div class="row">
<div class="col-lg-8">
<div ng-view></div>
</div>
</div>
</div> <script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/angular-resource/angular-resource.min.js"></script>
<script src="node_modules/angular-cookies/angular-cookies.min.js"></script>
<script src="node_modules/alertify/lib/alertify.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="app.js"></script> <script src="service/studentService.js"></script>
<script src="controller/studentUpdateCtrl.js"></script>
<script src="controller/studentsCtrl.js"></script>
<script src="controller/studentCreateCtrl.js"></script>
<script src="vendor/dirPagination/dirPagination.js"></script> </body>
</html>
app.js
对比上一篇，这里添加了对angularUtils.directives.dirPagination这个module的依赖，去掉了/这个路由中有关resolve获取数据的机制，因为现在要分页了，每次都要获取数据，而不是把所有数据先从服务端获取到放到路由中。
"use strict";
var studentsManagement = angular.module("studentManagement",["ngResource","ngCookies","ngRoute","angularUtils.directives.dirPagination"])
.run(function($rootScope){
$rootScope.title = "Home";
})
.config(["$routeProvider","$locationProvider", function($routeProvider, $locationProvider){
//在全局配置分页模板 需要注入paginationTemplateProvider
//paginationTemplateProvider.setPath('path/to/dirPagination.tpl.html');
//关于url的基本配置
//$locationProvider.html5Mode({
// enabled: true,
// requireBase: false
//});
//配置路由
$routeProvider.when("/", {
templateUrl: "views/Students.html",
controller: "studentsCtrl"
//resolve: {
// students: function($q,studentDataService){
//
// var queryArgs = {
// pageSize: 3,
// pageNumber: 1,
// orderBy: "id"
// };
//
// //$q异步执行方法
// var deferred = $q.defer();
// studentDataService.query(function(data){
// deferred.resolve(data);
// });
//
// return deferred.promise;
// }
//}
}).when("/Student/:id",{
templateUrl: "views/StudentInfo.html",
controller: "studentUpdateCtrl",
resolve: {
student: function($q, studentDataService, $route){
var defered = $q.defer();
//从路由中获取id的值
var id = $route.current.params.id;
studentDataService.get({id: id}, function(data){
defered.resolve(data);
});
return defered.promise;
}
}
}).when("/Create",{
templateUrl: "views/CreateStudent.html",
controller: "studentCreateCtrl"
});
}]);
以上，我们还可以通过paginationTemplateProvider.setPath('path/to/dirPagination.tpl.html');在全局中配置分页模板，但这里没有。
studentService.js
用$resouce封装请求数据这块有变化，因为要带上分页、排序参数。
angular.module('studentManagement').factory("studentDataService",["$resource", function($resource){
var baseUrl = "http://localhost:49621/api/Students";
return $resource("http://localhost:49621/api/Students",{},{
query: {
method: "GET",
url: baseUrl + "/:pageSize/:pageNumber/:orderBy",
params: {pageSize: '@pageSize', pageNumber: '@pageNumber', orderBy: '@orderBy'}
},
//query: {
// method: "GET",
// isArray: true,
//},
create: {method: "POST"},
get: {method: "GET", url: baseUrl + "?id=:id"},
remove: {method: "DELETE", url: baseUrl + "?id=:id"},
update: {method: "PUT", url: baseUrl + "?id=:id"}
})
}]);
studentsControl.js
angular.module('studentManagement').controller("studentsCtrl", ['$scope', '$route', '$rootScope', 'studentDataService', function ($scope, $route, $rootScope, studentDataService) {
$scope.students = [];
$scope.total = 0; //总数据条数
$scope.currentPage = 1;
$scope.pageSize = 3; //页容量
//初次加载
getPageStudents(1);
$scope.pageChangeHandler = function (num) {
getPageStudents(num);
};
//获取分页数据
function getPageStudents(pageNumber){
var queryArgs = {
pageSize: $scope.pageSize,
pageNumber: pageNumber,
orderBy: 'name'
};
studentDataService.query(queryArgs).$promise.then(function(result){
$scope.students = result.students;
$scope.total = result.totalCount;
}, function(result){ //如果失败
console.log('fail');
});
}
$rootScope.title = "Students";
//$scope.students = $route.current.locals.students;//students在路由resolve中定义
//删除
$scope.removeStudent = function (id, student) {
studentDataService.remove({id: id}).$promise.then(function () {
//获取student在当前集合中的索引
var index = $scope.students.indexOf(student);
$scope.students.splice(index, 1);
alertify.log(student.Name + ' is removed');
});
};
}]);
//.controller("OtherController", ["$scope", function ($scope) {
// $scope.pageChangeHandler = function (num) {
// console.log('going to page ' + num);
// };
//}]);
以上，初次加载以及点击分页按钮的时候都触发getPageStudents方法，传入页容量和当前页变量。
Students.html
在dir-paginate中多了一个total-items属性，把从controller中获取到的total变量值赋值给它。
<!--显示内容的控制器-->
<div class="my-controller"> <div class="row">
<div class="col-xs-4">
<h3>当前页: {{ currentPage }}</h3>
</div>
<div class="col-xs-4">
<label for="search">搜索:</label>
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
</div>
<div class="col-xs-4">
<label for="search">每页条数:</label>
<input type="number" min="1" max="100" class="form-control" ng-model="pageSize">
</div>
</div>
<br>
<div class="panel panel-default">
<div class="panel-body"> <table>
<thead>
<tr>
<th>Name</th><th>Age</th><th>Actions</th>
</tr>
</thead>
<tbody>
<!--itemsPerPage是必须的，要放在所有过滤的最后面，表示页容量-->
<!--dir-paginate的pagination-id属性，可选，和dir-pagination-controls中的pagination-id对应-->
<!--dir-paginate的current-page属性，可选，默认会读取$scope中的_currentPage字段-->
<!--dir-paginate的total-items属性，可选，用来读取服务端数据，先把总页数显示出来-->
<tr dir-paginate="student in students | filter:q | itemsPerPage: pageSize" total-items="total" current-page="currentPage">
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>
<a href="#/Student/{{student.Id}}">更新</a>
<a href="javascript:void(0)" ng-click="$parent.removeStudent(student.Id, student)">移除</a>
</td>
</tr>
</tbody>
</table> </div>
</div>
</div> <!--显示分页的控制器-->
<!--<div ng-controller="OtherController" class="other-controller">-->
<div class="other-controller">
<div class="text-center">
<!--其它属性包括：max-size, direction-links,boundary-links,pagination-id,auto-hide-->
<!--max-size:可选，默认为最大是9，最小是5-->
<!--direction-links:可选，默认true，决定是否显示向前向后按钮-->
<!--boundary-links,可选，默认false，决定是否显示首页和最后一页按钮-->
<!--on-page-change,可选，默认为null,声明当点击页数按钮后的回调函数，一旦声明，必须传入newPageNumber形参，必须在$scope中声明回调函数，比如这里的pageCHnageHandler函数-->
<!--pagination-id,可选，与dir-paginate中的pagination-id值对应-->
<!--template-url,可选，默认值是directives/pagination/dirPagination.tpl.html，也可以在全局config中，通过paginationTemplateProvider配置-->
<!--auto-hide,可选,默认是true，决定当没有足够的分页数据时，分页是否显示-->
<!--这里的dir-pagination-controls不能离开dir-paginate而单独存在，否则报错-->
<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="vendor/dirPagination/dirPagination.tpl.html"></dir-pagination-controls>
</div>
</div>
本系列结束☺
参考资料：
有关Web API配合AngularJS分页：
● https://code.msdn.microsoft.com/AngularJS-with-Web-API-43e5de16
有关AngularJS分页的Directive：
● http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs
● https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination#working-with-asynchronous-data