[Angularjs] page of one-page application

Write in front

In the project, using a single page application of paging, then think of the use of rolling load scheme, but a few attempts have not been configured successfully, idle bored to get a demo.

Series Articles

[Angularjs]ng-select and Ng-options

[Angularjs]ng-show and Ng-hide

[Angularjs] View and Route (i)

[Angularjs] View and Routing (ii)

[Angularjs] views and routes (iii)

[Angularjs] views and routes (iv)

[Angularjs]ng-class,ng-class-even,ng-class-odd

An example

You need to use infinite-scroll here, you can go here to download: http://sroze.github.io/ngInfiniteScroll/index.html

Html

<! DOCTYPE html>"MyApp">"Content-type"Content="text/html; Charset=utf-8"/> <title> scrolling page </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>varApp = Angular.module ('MyApp', ['Infinite-scroll']); App.controller ('PersonController', function ($scope, $http) {$scope. Data={busy:false, users: [], page:1            }; //load More$scope. Loadmore =function () {//Whether you are loading                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(vari =0; i < data.length; i++) {$scope. Data.users.push (Data[i]);                }                }); $scope. Data.busy=false; $scope. Data.page++;        }        }); //Filter FiltersApp.filter ('togenderstring', function () {returnfunction (input) {if(input) {return 'male'; } Else {                    return 'female';        }            };        }); //convert time in JSON format to normal timeApp.filter ('formatdate', function () {returnfunction (jsondate) {jsondate= Jsondate.replace ("/date (",""). Replace (")/",""); if(Jsondate.indexof ("+") >0) {jsondate= Jsondate.substring (0, Jsondate.indexof ("+")); } Else if(Jsondate.indexof ("-") >0) {jsondate= Jsondate.substring (0, Jsondate.indexof ("-")); }                varDate =NewDate (parseint (Jsondate,Ten)); varmonth = Date.getmonth () +1<Ten?"0"+ (Date.getmonth () +1): Date.getmonth () +1; varcurrentdate = Date.getdate () <Ten?"0"+date.getdate (): Date.getdate (); returnDate.getfullyear () +"-"+ Month +"-"+currentdate;        };    }); </script> <style type="Text/css"> *{margin:0; padding:0; } div {width:98%;            border:1px solid #0094ff; Text-Align:center;            } table {margin:3px auto;        border:0px solid #0094ff;        } TD {height:30px; }    </style>"PersonController"> <div infinite-scroll="Loadmore ()"Infinite-scroll-disabled='Data.busy'Infinite-scroll-distance=' -'> <table cellpadding="0"cellspacing="0"Border="1"> <tr><th> serial number </th><th> name </th><th> creation time </th><th> gender &LT;/TH&G T;</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&gt ;</body>
General processing procedures
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingsystem.web;usingSystem.Web.Caching;usingSystem.Web.Script.Serialization;namespacewolfy.angularjs.service{/// <summary>    ///Summary description of UserInfo/// </summary>     Public classUserinfo:ihttphandler { Public voidProcessRequest (HttpContext context) {intpage = Convert.ToInt32 (context. request["page"]); intPageSize = -; Context. Response.ContentType="Application/json"; List<Person> lstpersons =NULL; varobj = context. Cache.get ("Persons"); if(obj = =NULL) {lstpersons=NewList<person>();  for(inti =0; I < +; i++) {Lstpersons.add (NewPerson () {ID= i +1, Gender= i%2==0?true:false, Name="Wolfy"+ (i +1).                ToString ()}); } context. Cache.Insert ("Persons", Lstpersons,NULL, DateTime.Now.AddSeconds ( -), Cache.noslidingexpiration, Cacheitempriority.low, Cache            Itemremovedcallback); }            Else{lstpersons= obj asList<person>; } JavaScriptSerializer JSS=NewJavaScriptSerializer (); //page Out            varPageList = Lstpersons.skip (pageSize * (Page-1)).            Take (pageSize); stringJSON =JSS.            Serialize (pagelist); Context.        Response.Write (JSON); }        //This callback function when the cache is removed, be sure to maintain the same name as the last parameter in the Cache.Insert () method.//The delegate is used here, and you can see it in the Cache.Insert () function, so the format here can only be written in the way I wrote it.          Public Static voidCacheItemRemovedCallback (stringKeyObjectvalue, CacheItemRemovedReason reason) {        }         Public BOOLisreusable {Get            {                return false; }        }    }     Public classPerson {/// <summary>        ///numbering/// </summary>         Public intID {Set;Get; } /// <summary>        ///name/// </summary>         Public stringName {Set;Get; } /// <summary>        ///creation Time/// </summary>         PublicDateTime CreateDate {Set;Get; } =DateTime.Now; /// <summary>        ///sex, true male false female/// </summary>         Public BOOLGender {Set;Get; } =true; }}
Test results
Summarize
This is in the project to use a paging effect, on the mobile side or use more, then did not succeed, then made a simple demo, tested. Of course, using a "load more" button is also a solution.
[Angularjs] page of one-page application