Как реализовать пагинацию в Angular JS? [С практическим примером]
Опубликовано: 2020-04-20Прежде чем мы перейдем к пониманию того, как работает пагинация в Angular JS и как она реализована в этой среде, давайте рассмотрим ее шаг за шагом и начнем с обсуждения Angular JS и нумерации страниц в целом.
Оглавление
Что такое Ангуляр 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 ниже angular 2. Если вы используете angular 2, вы разделите компоненты, доступные вам во внутренней библиотеке, чтобы добавить сортировку, поиск и разбиение на страницы.
Если вы хотите отобразить более 200 записей и используете, например, angular 1.4, вы обнаружите, что библиотека dirPagination работает быстрее других подобных библиотек и обладает высокой производительностью. Это библиотека plug-n-play, которой не нужен контроллер Angular JS для запуска какой-либо логики или команды настройки. Кроме того, он также хорошо работает с Bootstrap.
Разбиение на страницы в Angular JS с примером
Вот код для отображения разбивки на страницы в Angular JS.
Источник : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang="ru" ng-app="myApp">
<голова>
<метакодировка="utf-8">
<title>Динамическая нумерация страниц с фильтрацией</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<мета-имя=”описание” содержание=””>
<meta name="автор" content="Ким Майда">
<!– JS-библиотеки –>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" type="text/javascript"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<!– Угловые скрипты –>
<script src="script.js" type="text/javascript"></script>
<!– Начальная загрузка –>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</голова>
<тело>
<div ng-controller="PageCtrl">
<div ng-controller="PageCtrl">
<label>Поиск:</label> <input type="text" ng-model="search.name" placeholder="Search" />
<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 = ”элемент в отфильтрованном = элементы | фильтр:поиск | startFrom:(currentPage-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 app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', функция () {
функция возврата (ввод, запуск) {
если (ввод) {
старт = +старт;
вернуть input.slice(начало);
}
вернуть [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($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, разработке полного стека, ознакомьтесь с дипломом PG upGrad & IIIT-B по разработке программного обеспечения с полным стеком, который предназначен для работающих профессионалов и предлагает более 500 часов интенсивного обучения, более 9 проектов и задания, статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.