머리말
어떤 언어를 배우기 전에, 언어를 배우려면 비즈니스가 필요합니다. 물론 NG도 예외는 아닙니다. NG를 배우기 전에 내가하고 싶은 첫 번째 데모는 NG를 기반으로 한 페이징을 구현하는 것이 었습니다. 기본 컴퓨팅 아이디어 외에도 지침을 사용하여 플러그인으로 캡슐화하고 페이징이 필요한 목록 페이지에서 직접 참조해야합니다.
플러그인
페이징 플러그인을 캡슐화 할 때 일반적으로 몇 가지 방법을 구현했으며 마침내 친구 (http://www.miaoyueyue.com/archives/813.html)가 캡슐화 한 플러그인을 발견했습니다. 나는 그것이 꽤 좋다고 느꼈기 때문에 그의 소스 코드를 읽고 프로젝트에서 직접 사용했습니다.
사용을위한 원칙 및 지침
1. 플러그인 소스 코드는 주로 각도 지침을 기반으로 구현됩니다.
2. 호출 시점은 배경 요청 처리 기능, 즉 배경에서 데이터를 얻는 것입니다.
3. 플러그인에는 CurrentPage, ItemSperPage, 현재 페이지 번호 및 페이지 당 레코드 번호의 두 가지 주요 매개 변수가 있습니다.
4. 메소드 호출을 구현 한 후에는 페이징 플러그인의 페이지 번호를 클릭하여 해당 페이지 번호 데이터를 얻으려면 배경을 다시 제출해야합니다. 통화의 페이지 번호에서 $ watch를 사용하여 모니터링했습니다. 처음 사용했을 때, 호출 기능을 플러그인의 OnChange에 넣었지만 배경이 매번 두 번 트리거 될 것임을 알았습니다. 이곳은주의가 필요합니다.
5. 요청 배경을 서비스 계층에 캡슐화 한 다음 컨트롤러에서 호출하는데, 이는 MVC 아이디어와도 일치합니다.
복제 다이어그램
통화 코드
<div ng-app = "demoapp"ng-controller = "democontroller"> <table> <thead> <tr> id> id </td> <td> firstName </td> <td> lastName </td> <td> status </td> <td> 주소 </td> </tr> </thead> 안에 사람 "> <td> {{emp.id}} </td> <td> {{emp.firstname}} </td> <td> {{emp.lastname}} </td > <td> {{emp.status}} </td> <td> {{emp.address}} </td> </tbody> </table> <tm-pagination conf = "paginationconf"> </tm-pagination> </div> <script type = "text/javaScript"> var app = angular.module ( 'demoapp', [ 'tm.pagination']); app.controller ( 'democontroller', [ '$ scope', 'businessservice', businessee (vargervice) {varservice). postData = {pageIndex : $ scope.paginationconf.currentPage, pagesize : $ scope.paginationconf.itemsperpage} businessVice.list (postData) .success (function (function) {$ scope.paginationconf.totalitems = response.count; $ scop. parameters of paging $scope.paginationConf = {currentPage: 1,itemsPerPage: 5};/****************************************************************************************************************** When the page number and page record number change, monitoring background query If currentPage and itemsPerPage are monitored separately, two background events will be triggered. ***************************************************************/$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);}]);//Business class app.factory('BusinessService', ['$http', function ($ http) {var list = function (postdata) {return $ http.post ( '/employee/getallemployee', postdata);} return {list : function (postData) {return list (postData);}}); </script>위의 내용은 편집기가 AngularJS를 기반으로 한 페이징 기능을 구현하기 위해 소개하는 예제 코드입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!