[Angularjs]单页应用之分页
写在前面
在项目中，用到单页应用的分页，当时想到使用滚动加载的方案，可是几次尝试都没配置成功，闲着无聊就弄了一个demo。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
一个例子
这里需要用到infinite-scroll，可以去这里下载：http://sroze.github.io/ngInfiniteScroll/index.html
Html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动分页</title>
<meta charset="utf-8" />
<script src="JS/jquery.js"></script>
<script src="JS/angular.js"></script>
<script src="JS/ng-infinite-scroll.js"></script> <script>
var app = angular.module('myapp', ['infinite-scroll']);
app.controller('PersonController', function ($scope, $http) { $scope.data = {
busy: false,
users: [],
page:
};
//加载更多
$scope.loadMore = function () {
//是否正在加载
if ($scope.data.busy) {
return;
}
$scope.data.busy = true;
$http.get("/Service/UserInfo.ashx?page=" + $scope.data.page).success(function (data) {
console.log(data);
for (var i = ; i < data.length; i++) {
$scope.data.users.push(data[i]);
}
});
$scope.data.busy = false;
$scope.data.page++;
}
});
//过滤器
app.filter('toGenderString', function () {
return function (input) {
if (input) {
return '男';
} else {
return '女';
}
};
});
//将json格式的时间转换成一般时间
app.filter('formatDate', function () {
return function (jsondate) {
jsondate = jsondate.replace("/Date(", "").replace(")/", "");
if (jsondate.indexOf("+") > ) {
jsondate = jsondate.substring(, jsondate.indexOf("+"));
} else if (jsondate.indexOf("-") > ) {
jsondate = jsondate.substring(, jsondate.indexOf("-"));
}
var date = new Date(parseInt(jsondate, ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate; };
});
</script>
<style type="text/css">
* {
margin: ;
padding: ;
} div {
width: %;
border: 1px solid #0094ff;
text-align: center;
} table {
margin: 3px auto;
border: 0px solid #0094ff;
} td {
height: 30px;
}
</style>
</head>
<body>
<div ng-controller="PersonController"> <div infinite-scroll="loadMore()" infinite-scroll-disabled='data.busy' infinite-scroll-distance=''>
<table cellpadding="" cellspacing="" border="">
<tr><th>序号</th><th>姓名</th><th>创建时间</th><th>性别</th></tr>
<tr ng-repeat="user in data.users">
<td>{{user.ID}}</td>
<td>{{user.Name}} </td>
<td>{{user.CreateDate|formatDate}}</td>
<td>{{user.Gender|toGenderString}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
一般处理程序
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Caching;
using System.Web.Script.Serialization; namespace Wolfy.AngularJs.Service
{
/// <summary>
/// UserInfo 的摘要说明
/// </summary>
public class UserInfo : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
int page = Convert.ToInt32(context.Request["page"]);
int pageSize = ;
context.Response.ContentType = "application/json";
List<Person> lstPersons = null;
var obj = context.Cache.Get("persons");
if (obj == null)
{
lstPersons = new List<Person>();
for (int i = ; i < ; i++)
{
lstPersons.Add(new Person()
{
ID = i + ,
Gender = i % == ? true : false,
Name = "wolfy" + (i + ).ToString()
});
}
context.Cache.Insert(
"persons",
lstPersons,
null,
DateTime.Now.AddSeconds(),
Cache.NoSlidingExpiration,
CacheItemPriority.Low,
CacheItemRemovedCallback);
}
else
{
lstPersons = obj as List<Person>;
} JavaScriptSerializer jss = new JavaScriptSerializer();
//分页
var pageList = lstPersons.Skip(pageSize * (page - )).Take(pageSize);
string json = jss.Serialize(pageList);
context.Response.Write(json);
}
//这个为缓存移除时的回调函数，一定要保持与 Cache.Insert（）方法中的最后一个参数名字一致，
//这里使用了委托，你可以在 Cache.Insert（）这个函数中转定义看到的，所以这里的格式就只能按我写的这种方法签名写。
public static void CacheItemRemovedCallback(string key, object value, CacheItemRemovedReason reason) { } public bool IsReusable
{
get
{
return false;
}
}
}
public class Person
{
/// <summary>
/// 编号
/// </summary>
public int ID { set; get; }
/// <summary>
/// 姓名
/// </summary>
public string Name { set; get; }
/// <summary>
/// 创建时间
/// </summary>
public DateTime CreateDate { set; get; } = DateTime.Now;
/// <summary>
/// 性别，true 男 false 女
/// </summary>
public bool Gender { set; get; } = true; }
}
测试结果
总结
这是在项目中用到一种分页特效，在移动端还是用的比较多的，当时没有弄成功，就弄了一个简单的demo，进行了测试。当然，用个“加载更多”的按钮，也是一种解决方案。
[Angularjs]单页应用之分页的更多相关文章
- 【UGUI】 （三）------- 背包系统（上）之简易单页背包系统及检索功能的实现
背包系统,无论是游戏还是应用,都是常常见到的功能,其作用及重要性不用我多说,玩过游戏的朋友都应该明白. 在Unity中实现一个简易的背包系统其实并不是太过复杂的事.本文要实现的是一个带检索功能的背包系 ...
- [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作
写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...
- [译]用AngularJS构建大型ASP.NET单页应用（一）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣 ...
- AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
- [译]用AngularJS构建大型ASP.NET单页应用（二）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 客 ...
- [Angularjs]asp.net mvc+angularjs+web api单页应用
写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...
- Angular单页应用&AngularJS内部实现原理
回顾 自定义指令 登录后获取登录信息session 首先在登录验证的时候保存一个user 在学生管理页面中运用ajax调用获取到登录的用户信息 对注销按钮添加点击事件:调用ajax在表现层给user赋 ...
- Nodejs之MEAN栈开发（六）---- 用Angular创建单页应用(上)
在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方 ...
- 单页Web应用优缺点
一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HT ...
随机推荐
- 阻塞与非阻塞IO step by step
谈到IO,阻塞.非阻塞,异步.同步是绕不开的话题.说实话,我也没搞清楚,网上查了许多资料,大家众说纷纭,一种比较靠谱的说法是:”在处理 IO 的时候,阻塞和非阻塞都是同步 IO,使用使用了特殊的API ...
- 如何配置CentOS或者RedHat5.X、6.X、7.X的网络yum源
第一步:找到一个可靠的yum源 中科大帮助:https://lug.ustc.edu.cn/wiki/mirrors/help/centos源:http://mirrors.ustc.edu.cn/c ...
- Jquery跨域获得Json
这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值, 一般跨域用到的两个方法为:$.ajax 和$.get ...
- MVC4 WebAPI
不管是因为什么原因,结果是在新出的MVC中,增加了WebAPI,用于提供REST风格的WebService,个人比较喜欢REST风格的WebService,感觉比SOAP要轻量级一些,而且对客户端的要 ...
- 浅谈设计模式--单例模式(Singleton Pattern)
题外话:好久没写blog,做知识归纳整理了.本来设计模式就是个坑,各种文章也写烂了.不过,不是自己写的东西,缺少点知识的存在感.目前还没做到光看即能记住,得写.所以准备跳入设计模式这个大坑. 开篇先贡 ...
- JS 之原型，实例，构造函数之间的关系
JS是面向对象的语言,函数也是对象.下面大致介绍下实例,原型与构造函数之间的关系. 构造函数模式 function Person(name,age){ this.name = name; this.a ...
- Python解析器源码加密系列之（一）：标准c的tmpfile()、tmpfile_s()生成的临时文件究竟放在哪里了？
这两天由于修改python解释器的需求,需要用到tmpfile()来生成临时文件的FILE*,但是又担心这个临时文件是否存在于磁盘的某个地方,终究会被人找到,所以就简单做了以下几点实验,看看是否可以找 ...
- Linux第13周学习笔记
网络编程 客户端-服务器编程模型 每个网络应用都是基于客户端-服务器模型. 一个应用是由一个服务器进程和一个或者多个客户端进程组成. 服务器管理某种资源,并通过操作资源来为客户端提供某种服务. 基本操 ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- Entity Framework若干个扩展
声明 这里有此东西是参考各大神修改和补充而来,有些地方就找不到原文章的地址了,一参考地址如下: http://www.cnblogs.com/ahui/archive/2011/08/04/21272 ...