Angular JS에서 페이지 매김을 구현하는 방법은 무엇입니까? [실제 예와 함께]
게시 됨: 2020-04-20Angular JS에서 페이지 매김이 작동하는 방식과 해당 프레임워크에서 구현되는 방식을 이해하기 전에 단계별로 살펴보고 Angular JS와 일반적인 페이지 매김에 대해 논의하는 것으로 시작하겠습니다.
목차
Angular JS란 무엇입니까?
Angular JS는 동적 웹 애플리케이션을 만들기 위해 가장 선호되는 구조적 프레임워크 중 하나입니다. 개발자는 HTML을 템플릿 언어로 사용할 수 있으며 웹 응용 프로그램의 다양한 구성 요소를 명확하고 간결하게 표현할 수 있도록 HTML 구문을 확장할 수도 있습니다.
개발자가 작성해야 하는 코드의 더 많은 부분을 제거하기 위해 종속성 주입 및 데이터 바인딩 기능이 제공됩니다. 이 모든 것이 브라우저 내에서 이루어지므로 Angular JS는 거의 모든 서버 기술에서 편리하게 사용할 수 있는 프레임워크입니다.
Angular JS는 JavaScript와 몇 가지 유사점을 공유하는 오픈 소스 프레임워크입니다. 단일 페이지에 모든 콘텐츠, 텍스트 및 그래픽을 표시해야 하는 응용 프로그램을 개발하기 위해 개발자가 주로 사용합니다. 그러나 이것이 다중 페이지 응용 프로그램을 만드는 데 사용할 수 없다는 의미는 아닙니다.
이 게시물에서 페이지 매김이 다른 요소 간의 흐름 및 탐색에 영향을 주지 않고 콘텐츠를 둘 이상의 페이지로 분할하는 데 어떻게 도움이 되는지 설명합니다. 두 가지 매우 중요한 이유 때문에 전 세계적으로 인기 있는 모델 보기 컨트롤러 프레임워크입니다. Google 기반이며 항상 최신 개발 동향을 유지합니다. 이제 초점을 페이지 매김으로 전환해 보겠습니다.
읽기: AngularJS 인터뷰 질문 및 답변
페이지 매김이란 무엇입니까?
이 작품의 앞부분에서 언급했듯이 모든 웹사이트는 단일 페이지에 모든 정보를 표시할 수 없습니다. 단일 페이지가 실제로 선호되는 선택이지만 단일 페이지 웹 사이트가 옵션이 아닌 상황에서 여러 페이지를 사용하면 손쉬운 사이트 탐색, 향상된 사용자 경험 등 여러 이점을 제공할 수 있습니다.
모든 웹사이트, 특히 Flipkart와 같은 전자상거래 웹사이트는 모든 제품을 나열하고 필요한 모든 정보를 단일 페이지에 표시할 수 없습니다. 여기에서 페이지 매김이 그림에 나타납니다. 필요한 경우 텍스트, 이미지 등의 형태로 콘텐츠를 여러 페이지로 분할할 수 있습니다. 웹 개발을 위한 AngularJS 사용에 대해 자세히 알아보세요.
페이지 매김이 실제로 유용한 몇 가지 시나리오가 있습니다. 웹 사이트에 유사한 카테고리 또는 데이터 세트와 관련된 블로그, 그래프 또는 차트를 포함하여 엄청난 양의 정보가 있는 경우 페이지 매김을 사용하여 이 정보를 분할하고 탐색 및 가독성을 개선할 수 있습니다.
Angular JS의 페이지 매김
웹 사이트 또는 웹 응용 프로그램에 데이터를 표시하는 방법에는 여러 가지가 있습니다. 목록과 표는 대부분의 사람들이 읽고 이해하기 쉬운 정보를 표시하는 데 사용하는 가장 일반적인 요소입니다. Angular 응용 프로그램에서 ng-repeat 기능은 목록이나 테이블에 정보를 표시하는 데 사용됩니다. 그러나 이것은 표시되는 데이터가 너무 크지 않은 경우에만 작동합니다. 더 큰 데이터 세트의 경우 정렬, 검색 및 페이지 매김과 같은 기능을 통해 테이블과 목록을 보다 쉽게 관리할 수 있고 애플리케이션을 보다 사용자 친화적으로 만들 수 있습니다.
Angular JS 페이지 매김은 Laravel, Code PHP 및 기타 프레임워크의 페이지 매김보다 따라야 하는 구현 방식을 잘 모르는 사람들에게 더 어려워 보일 수 있습니다. 탐색 및 읽기 쉬운 형식으로 레코드를 나열하기 위해 검색 및 정렬 기능과 함께 페이지 매김을 사용할 수 있습니다.
타사 Angular 라이브러리를 사용하여 정렬 및 검색 기능을 사용하여 간단한 목록을 여러 페이지에 포함할 수 있습니다. 이 목적을 위해 가장 선호되는 타사 라이브러리는 dirPagination입니다. 이 라이브러리는 쉽게 접근할 수 있고 사용하기 쉽습니다. Angular 2보다 낮은 Angular 버전에 사용할 수 있습니다. Angular 2를 사용하는 경우 내부 라이브러리 내에서 사용 가능한 구성 요소를 분리하여 정렬, 검색 및 페이지 매김을 추가합니다.
예를 들어 200개 이상의 레코드를 표시하고 Angular 1.4를 사용하는 경우 dirPagination 라이브러리가 다른 라이브러리보다 빠르고 성능도 높다는 것을 알게 될 것입니다. 로직을 실행하거나 명령을 설정하기 위해 Angular JS 컨트롤러가 필요하지 않은 플러그 앤 플레이 라이브러리입니다. 또한 Bootstrap과도 잘 작동합니다.
예제를 사용한 Angular JS의 페이지 매김
다음은 Angular JS에서 페이지 매김을 표시하는 코드입니다.
출처 : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang="en" ng-app="myApp">
<머리>
<메타 문자 집합=”utf-8″>
<title>필터링이 포함된 동적 페이지 매김</title>
<메타 이름=”뷰포트” 콘텐츠=”너비=장치 너비, 초기 크기=1.0″>
<메타 이름=”설명” 내용=””>
<메타명=”저자” 내용=”김마이다”>
<!– JS 라이브러리 –>
<스크립트 src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js” type=”텍스트/자바스크립트”></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<!– 각도 스크립트 –>
<스크립트 src="스크립트.js" 유형="텍스트/자바스크립트"></script>
<!– 부트스트랩 –>
<링크 rel=”스타일시트” 유형=”텍스트/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />
</head>
<본체>
<div ng-controller="페이지 Ctrl">
<div ng-controller="페이지 Ctrl">
<label>검색:</label> <input type="text" ng-model="search.name" placeholder="검색" />
<br />
<label>카테고리별 필터링:</label>
<울>
<li><a href=”” ng-click=”search.category='engineering'”>엔지니어링</a></li>
<li><a href=”” ng-click=”search.category='management'”>관리</a></li>
<li><a href=”” ng-click=”search.category='business'”>비즈니스</a></li>
</ul>
<label>분기별 필터링:</label>
<울>
<li><a href=”” ng-click=”search.branch='West'”>서쪽</a></li>
<li><a href=”” ng-click=”search.branch='East'”>동쪽</a></li>
</ul>
<p><strong><a href="" ng-click="resetFilters()">모두 표시</a></strong></p>
<h1>항목</h1>
<울>
<li ng-repeat="필터링된 항목 = 항목 | 필터:검색 | 시작 시작:(현재 페이지-1)*entryLimit | limitTo:entryLimit”>{{item.name}}</li>
</ul>
<pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit"></pagination>
</div>
</바디>
</html>
app.js (출처: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var 앱 = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', 함수() {
반환 함수(입력, 시작) {
if (입력) {
시작 = +시작;
return input.slice(시작);
}
반품 [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', 함수($scope, filterFilter) {
$scope.items = [{
"이름": "이름 1",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "서쪽"
}, {
"이름": "이름 2",
"범주": [{
"카테고리": "엔지니어링"
}],
"지점": "서쪽"
}, {
"이름": "이름 3",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "엔지니어링"
}],
"지점": "서쪽"
}, {
"이름": "이름 4",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "서쪽"
}, {
"이름": "이름 5",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "이름 6",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "이름 7",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "이름 8",
"범주": [{
"카테고리": "사업"
}],
"지점": "서쪽"
}, {
"이름": "이름 9",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "이름 10",
"범주": [{
"카테고리 관리"
}],
"지점": "동쪽"
}, {
"이름": "이름 11",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "이름 12",
"범주": [{
"카테고리": "엔지니어링"
}],
"지점": "서쪽"
}, {
"이름": "이름 13",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "서쪽"
}, {
"이름": "이름 14",
"범주": [{
"카테고리": "엔지니어링"
}],
"지점": "동쪽"
}, {
"이름": "이름 15",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "엔지니어링"
}],
"지점": "동쪽"
}, {
"이름": "이름 16",
"범주": [{
"카테고리 관리"
}],
"지점": "서쪽"
}, {
"이름": "이름 17",
"범주": [{
"카테고리 관리"
}],
"지점": "동쪽"
}, {
"이름": "이름 18",
"범주": [{
"카테고리": "사업"
}],
"지점": "서쪽"
}, {
"이름": "이름 19",
"범주": [{
"카테고리": "사업"
}],
"지점": "서쪽"
}, {
"이름": "이름 20",
"범주": [{
"카테고리": "엔지니어링"
}],
"지점": "동쪽"
}, {
"이름": "피터",
"범주": [{
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "프랭크",
"범주": [{
"카테고리 관리"
}],
"지점": "동쪽"
}, {
"이름": "조",
"범주": [{
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "랄프",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "지나",
"범주": [{
"카테고리": "사업"
}],
"지점": "동쪽"
}, {
"이름": "샘",
"범주": [{
"카테고리 관리"
}, {
"카테고리": "엔지니어링"
}],
"지점": "동쪽"
}, {
"이름": "브리트니",
"범주": [{
"카테고리": "사업"
}],
"지점": "서쪽"
}];
설명
위에 사용된 코드는 지역과 함께 교육의 해당 범주 또는 과목에 대한 학생의 이름을 표시합니다. Angular JS 페이지 매김 기능을 사용하면 이러한 세부 정보를 여러 페이지에서 표 형식으로 언급할 수 있습니다. 이것이 정보를 정렬하고 사용자가 보기 쉽게 만드는 방법입니다. 이것은 틀림없이 웹 애플리케이션의 사용자 경험을 개선하는 가장 쉬운 방법입니다.
따라서 웹 개발자라면 가능한 한 효율적으로 학습을 미루어서는 안 됩니다. 그리고 AngularJS가 오늘날의 기술 세계에서 이상적인 도구인 이유에 대한 위의 주장과 함께 계속 진행해야 할 모든 설명이 있습니다!
AngularJS, 전체 스택 개발에 대해 더 알고 싶으시면 작업 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제, IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.