AngularJS를 학습하는 과정에서, 나는 서버 데이터베이스에서 한 번에 정보를 얻고 프론트 엔드에서 페이지를 paginate하는 것이 바람직한 방법이라고 생각했습니다. 전면 및 후면의 통신 부하를 저장하고 더 많은 디스플레이 작업을 프론트 엔드에 전달하기 때문입니다.
이 내용은 두 부분으로 나뉩니다. 첫 번째 부분은 AngularJS의 내장 서비스 $ 위치 및 그 기능을 간단히 소개합니다. 두 번째 부분은 비교적 완전한 포괄적 인 예를 통해 데이터베이스 정보의 Pagination 표시의 효과를 깨닫게됩니다.
Mutilpe View & Route of AngularJS에서 작업 할 때 브라우저를 제공하는 내장 URL의 작동이 밀접하게 관련되어 있기 때문에 AngularJS의 내장 서비스 및 위치에 대해 더 깊이 이해해야한다고 생각합니다. 이 서비스가 처리되면 향후 페이지 페이지 회전율에 매우 도움이 될 것이라고 생각합니다.
아래는 저의 작은 실험과 경험 중 일부이며, 언어로 작성되어 전문적이지 않을 수도 있지만 모든 사람들이 AngularJS의 일부 개념을 이해하는 것이 도움이되기를 바랍니다.
이 및 위치는 종속성 주입에서 컨트롤러의 리턴 기능의 매개 변수로 서비스로 사용됩니다. 다음은이 서비스의 사용을 설명하는 예입니다.
섹션 1 : URL 정보 받기
& 위치는 Absurl, Path, Protocol, Host, Port와 같은 일부 getter 및 setter 메소드를 제공합니다. 구체적인 설명은 이들은 링크 주소 기능의 기능 이름이며 위치가 제공한다는 것입니다. 이러한 기능이 사용될 때 매개 변수로 전달되지 않으면 현재 URL 정보를 얻는 것을 의미합니다. 일부 매개 변수가 전달되면 현재 브라우저에서 URL 정보를 설정하는 것을 의미합니다.
예 1
<! doctype html> <html ng-app = "locationApp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body ng-controller="LocationController"><p>absUrl-----------{{absUrl}}</p><p>path---------------{{path}}</p><p>pro TOCOL ----------- {{프로토콜}} </p> <p> 호스트 ---------------- {{host}} </p> <p> 포트 ------------------------- {{port}} </p> <script src = "angular.js"> </script> <cript> var locationApp = angular.Module ( 'locationApp', []); locationApp.controller ( 'locationController', [ '$ scope', '$ location', function ($ scope, $ location) {$ scope.absurl = $ location.absurl (); $ scope.path = $ location.path (); $ scope.protocol = $ location.protocol (); $ scope = $ location.host (); $ scope (); }]); </script> </body> </html>스크린 샷에서 $ Location Service에서 제공하는 Getter 메소드가 L 브라우저의 현재 URL 정보를 쉽게 얻을 수 있음을 분명히 알 수 있습니다.
신중한 학생들 이이 길을 보았을 수도 있습니다. 왜 가치가 없습니까?
링크 주소에 경로 정보가 없기 때문입니다. Path () 메소드를 통해 경로 정보를 수동으로 설정 한 다음 브라우저를 새로 고치는 경우 (브라우저의 URL 주소는 새로 고침 할 때 수정 한 정보이며 변경되지 않을 경우) 경로 정보가 표시됩니다. 사진과 진실이 있습니다!
예 2
$ location.path ( '세부 사항');
$ scope.path = $ location.path ();
위의 작은 수정에서 코드를 수정하고 먼저 $ 위치의 내장 서비스에서 경로 속성의 값을 수정했습니다 (본질은 URL 정보에 대한 많은 속성을 포함하는 객체입니다).
그런 다음 getter 방법을 통해 새로운 값을 얻으십시오.
또한 브라우저 주소 막대를 제공하는 URL 정보는 양방향 바인딩 (AngularJS의 가장 절묘한 부분)이기 때문에 한 당사자의 URL 정보가 변경되는 한 위치 개체 또는 브라우저 주소 표시 줄의 속성에 관계없이 다른 당사자도 변경됩니다. 그래서 스크린 샷의 브라우저 주소 표시 줄에 세부 정보와 같은 경로 정보도 있음을 알았습니다. 이 정보는 이전 코드를 통해 설정되었습니다.
Pagination Display 기능의 AngularJS 구현에 대해 다음 기사에서는 귀하에게 소개됩니다. 놓치지 않기를 바랍니다.