[Angularjs] page of one-page application

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.