그런 다음 첫 번째 기사 ""$ 위치에 대한 자세한 설명과 AngularJS 내장 서비스 기능 ", 학습
섹션 2 : Pagination 디스플레이 효과를 구현하십시오
그런 다음 보이지 않게하고 위치 세터 방법을 통해 현재 URL 정보를 설정하겠습니다. 이 비교적 완전한 예에서 시연을 개선하기 위해 AngularJS 멀티 라우팅 기술, 중첩 컨트롤러 간의 데이터 전송, 스코프 상속, HTTP 통신, 링크 전송 변수 등을 도입했습니다.
먼저 홈페이지 템플릿을 만듭니다
<! docType html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.js"> </script> <script src = "lib/angular-route.min.js"> type = "text/css"> .TurnPageButtonArea {배경색 : #f07a13; 너비 : 500px; 높이 : 30px; 라인 높이 : 30px; 텍스트 정렬 : 센터; 마진 : 10px 자동; 패딩 : 20px; } 버튼 {마진 오른쪽 : 20px; 너비 : 100px; 높이 : 30px; 글꼴 크기 : 15px; } .pagenum {너비 : 50px; 높이 : 23px; 텍스트 정렬 : 센터; } Body {Font-Family : Microsoft Yahei; } h1 {텍스트-정렬 : 센터; } .TotAlPages {color : #ffffff} </style> </head> <body ng-controller = "indexcontroller"> <h1> angularjs 턴 페이지 </h1> <div ng-view> </div> <div> <button ng-click = "previous </button> type = "number"ng-model = "currentpage"> <button ng-click = "gotopage ()"> go </button> <span> Total {{allpage}} pages </span> </div> </body> </html>페이지 레이아웃은 간단한 CSS 스타일로 수정됩니다.
그런 다음 홈페이지 요소에 일부 NGAPP 및 컨트롤러를 설정하십시오.
속성 ngview가있는 div 요소에서 다른 HTML에 내장 된 템플릿.
바로 아래에 3 개의 버튼을 배치했으며 처음 두 개는 이전 페이지의 페이지 회전 버튼과 다음 페이지입니다. 입력 상자를 사용하면 사용자가 점프하려는 페이지 번호를 입력 할 수 있으며 옆의 버튼은 페이지 번호의 제출 버튼 역할을합니다. 클릭 한 후 페이지가 즉시 페이지를 돌립니다.
세 버튼 모두 NGClick 속성이있어 사용자가 버튼을 클릭하면 해당 기능이 실행됨을 나타냅니다.
AngularJS의 JS 코드를 설명하기 전에 스크린 샷을 사용하여 파일의 디렉토리 구조를 확인하십시오.
위의 index.html은 이전 두 예제이므로 무시할 수 있습니다.
단순화하기 위해 모든 스크립트를 Turnpage.html 파일 아래에 넣습니다. 이 파일의 전체 코드는 다음과 같습니다.
Turnpage.html
<! docType html> <html ng-app = "turnpageapp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.js"> </script> <script src = "lib/angular-route.min.js"> type = "text/css"> .TurnPageButtonArea {배경색 : #f07a13; 너비 : 500px; 높이 : 30px; 라인 높이 : 30px; 텍스트 정렬 : 센터; 마진 : 10px 자동; 패딩 : 20px; } 버튼 {마진 오른쪽 : 20px; 너비 : 100px; 높이 : 30px; 글꼴 크기 : 15px; } .pagenum {너비 : 50px; 높이 : 23px; 텍스트 정렬 : 센터; } Body {Font-Family : Microsoft Yahei; } h1 {텍스트-정렬 : 센터; } .TotAlPages {color : #ffffff} </style> </head> <body ng-controller = "indexcontroller"> <h1> angularjs 턴 페이지 </h1> <div ng-view> </div> <div> <button ng-click = "previous </button> type = "number"ng-model = "currentpage"> <button ng-click = "gotopage ()"> go </button> <span> Total {{allpage}} pages </span> </div> <cript> // 사용자의 NGAPP 객체를 인스턴스화합니다. 라우팅 메커니즘이 여기에서 사용되므로 Ngroute 모듈은 종속성 주입 var turnpageapp = angular.module ( 'turnpageapp', [ 'ngroute'])로 작성됩니다. /* 다른 URL에 대해 다른 템플릿 및 컨트롤러를 설정합니다. 이 예에서는 하나의 템플릿 만 사용되므로 "/id" */turnpageapp.config ([ '$ lourteprovider', function ($ lourteprovider) {$ louteprovider. when ( '/: id', {// 여기에 ID는 실제로 페이지 템플릿 턴을 나타냅니다. 'StudentController'}). OTHERWISE ({REDIRECTTO : '/1'}); // URL이 일치하지 않으면 첫 번째 페이지로 직접 점프}); // 상위 컨트롤러 인덱스 콘트롤러를 등록합니다. 템플릿의 하위 컨트롤러 값을 상위 컨트롤러로 전달해야하므로 루트 도메인 $ rootscope를 돕기 위해 필요하며 루트 도메인 객체를 반환 함수에서 전달해야합니다. //이 예제는 URL 작동을 기반으로 한 페이지 턴을 구현 하므로이 내장 된 $ 위치 서비스는 TurnPageApp.controller ( 'IndexController', function ($ rootscope, $ scope, $ location)에서 전달되어야합니다. {// $ scope.previous = function () {// 브라우저 주소의 경로를 얻습니다. Turnpage.html#/1 : "/1"// 그런 다음 JavaScript Silce 함수를 통해 문자를 꺼내서 1 또는 마이너스 1은 var var gepenum (1))에 따라 어떤 버튼이 정의되어 있는지에 따라 다릅니다. PAGE '); ours {// PATH 속성에서 1 페이지를 빼면이 페이지를 앞으로 돌리십시오 $ rootscope.allpage) {이것은 마지막 페이지입니다. $ scope.currentpage; // 프로그램의 엄격함과 가용성에 대해서는 입력이 비어있는 경우 (pagenum == undefined || pagenum == "") { "페이지 번호를 입력하지 않는 경우"). $ rootscope와 그 속성이 여기에 나타납니다.이 속성은 총 페이지 번호} else (! 점프는 아래에 설명됩니다. // 이것은 홈페이지에 포함 된 템플릿 페이지의 컨트롤러입니다. // 하위 도메인과 상위 도메인 간의 통신에는 루트 도메인의 도움이 필요하기 때문에 $ rootscope 객체는 종속성으로 전달됩니다. // $ 스코프는 템플릿에서 생성 된 스코프를 상속하는 템플릿의 스코프입니다. 인스턴스의 복잡성을 제어하기 위해 JSON 파일을 직접 작성하고 가짜 데이터를 만들었습니다. // 여기 $ lourteparams는 객체 이며이 객체에는 구성 () 기능에서 본 ID (/: id) 인이 객체에 속성이 있습니다. 이 ID는 변수, 주소 표시 줄의 경로는 무엇이며 ID는 무엇입니까? ID 값은 $ loureparams 객체를 통해 얻어야합니다. TurnPageApp.controller ( 'StudentController', [ '$ rootscope', '$ scope', '$ http', '$ loureparams', function ($ rootscope, $ scope, $ http, $ lloseparams) {// 원격 파일의 get get get a Parame Artucte, The Parame of the Calleter of the a Beach Oncered. 원격 파일 에서이 데이터는 배열 또는 객체 일 수 있습니다.이 시간은 JSON 배열이며, 배열의 요소는 하나씩 객체입니다. 배열은 0에서 시작합니다. 1 $ scope.tudent = data [$ lourteparams.id]; 직접 할당되지 않으면 서브 도메인의 속성은 동일한 이름으로 상위 도메인의 속성의 값을 상속합니다. 이 요소에서는 상위 이름의 동일한 이름을 상속받습니다View/Student.html
<TABLE CELLPACING = "0"> <TR> <TD> id </td> <td> {{whiter.id}} </td> </tr> <td> <td> name </td> <td> {{wichak}}} </td> </tr> <td> 섹스 </td> <td> {{whient.sex}} </td> </td> <td> <td> age </td> <td> {{wichaN.age}} </td> </tr> <tr> <td> courses </td> <td> <ul> <li ng-repeat =}}}}}. </ul> </td> </td> </tr> </tr> </tr> </tr> </tr> <tr> <td> 코스 </td> <td> <ul> <li ng-repeat = "학생의 코스. </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> <td> 코스 </td> <td> <ul> <li ng-repeat = "학생 .courses"> {{course}} </li> </ul> type = "text/css"> table {테두리 : Solid 1PX #000000; 마진 : 0px 자동; } td {패딩 : 10px 10px 10px 20px; 여백 : 0px; 국경 : Solid 1PX #000000; } tr {마진 : 0px; 패딩 : 0px; } .Title {배경색 : #207ef0; 텍스트 정렬 : 센터; 색상 : #ffffff; } ul {목록 스타일 : 없음; 여백 : 0px; 패딩 : 0px; } li {float : 왼쪽; 여백 : 10px; } </style>데이터/학생 .JSON
[{ "id": "1,"이름 ":"Frank Li ","Sex ":"Male ","Age ":"30 ","Courses ": ["HTML ","CSS ","JavaScript ","Java ","PHP ","MySQL ","ubuntu ","Mongodb ","Poshop "," "" "" "" "," "," "," "," "angulejs" "bootstrap"]}, { "id": 2, "이름": "체리", "섹스": "여성", "나이": "27", "코스": [ "앤더슨의 동화", "자부심과 편견", "Vanity Fair", "Oliver Twist"]}, "id": "3," "," "" "" "" "" "" "" "" "" "" "" "" "29", "코스": [ "예술 소개", "스케치", "구성", "Sculpture"]}]이것이 처음의 것과 같았습니다. 주소 표시 줄의 기본 경로는 /1이므로 첫 번째 학생의 정보가 직접 표시됩니다. 총 페이지 수도 얻을 수 있습니다.
이전 버튼을 클릭 한 후 효과. 더 이상 페이지를 돌릴 수 없습니다
4 페이지에 다음 버튼을 클릭 할 때의 효과. 페이지를 뒤로 돌릴 수 없습니다.
페이지 번호 범위 내에서 페이지를 돌리는 데 문제가 없습니다!
길이가 주어지면 입력 된 페이지 번호가 범위를 벗어났다는 것을 증명하지 않습니다. 위의 스크린 샷은 올바른 페이지 번호를 입력하고 이동 버튼을 클릭하는 효과입니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.