¿Cómo implementar la paginación en Angular JS? [Con ejemplo práctico]
Publicado: 2020-04-20Antes de pasar a comprender cómo funciona la paginación en Angular JS y cómo se implementa en ese marco, vayamos paso a paso y comencemos hablando de Angular JS y la paginación en general.
Tabla de contenido
¿Qué es Angular JS?
Angular JS se encuentra entre los marcos estructurales preferidos para crear aplicaciones web dinámicas. Permite a los desarrolladores usar HTML como lenguaje de plantillas e incluso permite la extensión de la sintaxis HTML para permitir una expresión clara y concisa de los diversos componentes de una aplicación web.
Viene con capacidades de inyección de dependencia y enlace de datos para eliminar una mayor parte del código que deben escribir los desarrolladores. Todo esto ocurre dentro del navegador, lo que convierte a Angular JS en un marco que se puede usar convenientemente con casi cualquier tecnología de servidor.
Angular JS es un marco de código abierto que comparte varias similitudes con JavaScript. Los desarrolladores lo utilizan principalmente para desarrollar aplicaciones que necesitan mostrar todo su contenido, texto y gráficos en una sola página. Sin embargo, esto no significa, de ninguna manera, que no se pueda usar para crear aplicaciones de varias páginas.
Explicaremos en esta publicación cómo la paginación ayuda a dividir el contenido en más de una página sin afectar el flujo y la navegación, entre otros factores. Es un marco de controlador de vista de modelo tan popular en todo el mundo debido a dos razones muy importantes: está basado en Google y siempre se mantiene actualizado con las últimas tendencias de desarrollo. Pasemos ahora a centrarnos en la paginación.
Leer: Preguntas y respuestas de la entrevista de AngularJS

¿Qué es la paginación?
Como mencionamos un poco antes en el artículo, todos los sitios web no pueden mostrar toda su información en una sola página. Si bien una sola página es de hecho la opción preferida, el uso de varias páginas en situaciones en las que un sitio web de una sola página no es una opción puede brindar varios beneficios, incluida la navegación fácil del sitio, una experiencia de usuario mejorada y otros.
Todos los sitios web, especialmente los sitios web de comercio electrónico como Flipkart, no pueden enumerar todos sus productos y mostrar toda la información necesaria en una sola página. Aquí es donde la paginación entra en escena. Permite que el contenido, en forma de texto, imágenes y más, se divida en varias páginas si es necesario. Obtenga más información sobre el uso de AngularJS para el desarrollo web.
Hay varios escenarios en los que la paginación resulta realmente útil. Si su sitio web presenta grandes cantidades de información, incluidos blogs, gráficos o cuadros relacionados con una categoría o conjunto de datos similares, puede dividir esta información mediante la paginación y mejorar la navegación y la legibilidad.
Paginación en Angular JS
Hay varias formas de mostrar datos en un sitio web o cualquier aplicación web. Las listas y tablas son los elementos más comunes que la mayoría de las personas utilizan para mostrar información que es fácil de leer y comprender. En las aplicaciones Angular, la función ng-repeat se usa para mostrar información en listas o tablas. Sin embargo, esto solo funciona cuando los datos que se muestran no son demasiado grandes. Para conjuntos de datos más grandes, funciones como ordenar, buscar y paginar hacen que las tablas y listas sean más manejables y las aplicaciones más fáciles de usar.
La paginación angular JS puede parecer más difícil que la paginación en Laravel, Code PHP y otros marcos para las personas que no conocen muy bien el enfoque de implementación que se debe seguir. Puede usar la paginación junto con las funciones de búsqueda y clasificación para enumerar registros en un formato fácil de navegar y leer.
Puede usar bibliotecas angulares de terceros para cubrir listas simples en varias páginas con funciones de clasificación y búsqueda. La biblioteca de terceros más preferida para este propósito es dirPagination. Esta biblioteca es fácilmente accesible y muy fácil de usar. Se puede usar para versiones angulares inferiores a angular 2. Si usa angular 2, separará los componentes disponibles dentro de la biblioteca interna para agregar clasificación, búsqueda y paginación.
Si desea mostrar más de 200 registros y está utilizando, por ejemplo, angular 1.4, encontrará que la biblioteca dirPagination es más rápida que otras bibliotecas similares y también tiene un alto rendimiento. Es una biblioteca plug-n-play que no necesita el controlador Angular JS para ejecutar ninguna lógica o comando de configuración. Además, también funciona bien con Bootstrap.
Paginación en Angular JS con ejemplo
Aquí hay un código para mostrar la paginación en Angular JS.
Fuente : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang=”es” ng-app=”miAplicación”>
<cabeza>
<juego de caracteres meta=”utf-8″>
<title>Paginación dinámica con filtrado</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta nombre=”descripción” contenido=””>
<meta nombre=”autor” contenido=”Kim Maida”>
<!– Bibliotecas 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>
<!– Guiones angulares –>
<script src=”script.js” type=”text/javascript”></script>
<!– Arranque –>
<enlace rel=”hoja de estilo” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />
</cabeza>
<cuerpo>
<div ng-controller=”PageCtrl”>
<div ng-controller=”PageCtrl”>
<label>Buscar:</label> <input type=”text” ng-model=”search.name” placeholder=”Buscar” />
<br />
<label>Filtrar por categoría:</label>
<ul>
<li><a href=”” ng-click=”search.category='engineering'”>Ingeniería</a></li>
<li><a href=”” ng-click=”search.category='management'”>Administración</a></li>
<li><a href=”” ng-click=”search.category='business'”>Negocio</a></li>
</ul>
<label>Filtrar por sucursal:</label>
<ul>
<li><a href=”” ng-click=”search.branch='Oeste'”>Oeste</a></li>
<li><a href=”” ng-click=”search.branch='Este'”>Este</a></li>
</ul>
<p><strong><a href=”” ng-click=”resetFilters()”>Mostrar todo</a></strong></p>
<h1>Objetos</h1>
<ul>
<li ng-repeat=”elemento en filtrado = elementos | filtro:buscar | inicioDesde:(páginaActual-1)*límiteEntrada | limitTo:entryLimit”>{{item.name}}</li>
</ul>

<página de paginación=”páginaactual” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>
</div>
</cuerpo>
</html>
app.js (Fuente: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('comenzarDesde', función () {
función de retorno (entrada, inicio) {
si (entrada) {
comienzo = + comienzo;
return input.slice(inicio);
}
regreso [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$alcance.elementos = [{
“nombre”: “nombre 1”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 2”,
“categoría”: [{
“categoría”: “ingeniería”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 3”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “ingeniería”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 4”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 5”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 6”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 7”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 8”,
“categoría”: [{
“categoría”: “negocio”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 9”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 10”,
“categoría”: [{
"gestión por categorías"
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 11”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 12”,
“categoría”: [{
“categoría”: “ingeniería”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 13”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 14”,
“categoría”: [{
“categoría”: “ingeniería”
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 15”,
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “ingeniería”
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 16”,
“categoría”: [{
"gestión por categorías"
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 17”,
“categoría”: [{
"gestión por categorías"
}],
“sucursal”: “Este”
}, {
“nombre”: “nombre 18”,
“categoría”: [{
“categoría”: “negocio”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 19”,
“categoría”: [{
“categoría”: “negocio”
}],
“sucursal”: “Oeste”
}, {
“nombre”: “nombre 20”,
“categoría”: [{
“categoría”: “ingeniería”
}],
“sucursal”: “Este”
}, {
“nombre”: “Pedro”,
“categoría”: [{
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
“nombre”: “Francisco”,
“categoría”: [{
"gestión por categorías"
}],
“sucursal”: “Este”
}, {
“nombre”: “José”,
“categoría”: [{
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
"nombre": "Ralph",
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
“nombre”: “Gina”,
“categoría”: [{
“categoría”: “negocio”
}],
“sucursal”: “Este”
}, {
"nombre": "Sam",
“categoría”: [{
"gestión por categorías"
}, {
“categoría”: “ingeniería”
}],
“sucursal”: “Este”
}, {
"nombre": "Britney",
“categoría”: [{
“categoría”: “negocio”
}],

“sucursal”: “Oeste”
}];
Explicación
El código utilizado anteriormente mostrará los nombres de los estudiantes en su respectiva categoría o tema de educación junto con su geografía. La función de paginación de Angular JS permitirá que estos detalles se mencionen en un formato tabular, en varias páginas. Así es como ordena la información y la hace más presentable para el usuario. Podría decirse que esta es la forma más fácil de mejorar la experiencia del usuario para sus aplicaciones web.
Entonces, si usted es un desarrollador web, no debe retrasar su aprendizaje de la manera más eficiente posible. Y con los argumentos anteriores sobre por qué AngularJS es una herramienta ideal en el mundo tecnológico actual, ¡tiene todas las explicaciones para seguir adelante!
Si está interesado en obtener más información sobre AngularJS, desarrollo de pila completa, consulte el Diploma PG de upGrad & IIIT-B en desarrollo de software de pila completa, que está diseñado para profesionales que trabajan y ofrece más de 500 horas de capacitación rigurosa, más de 9 proyectos y asignaciones, estado de ex alumnos de IIIT-B, proyectos finales prácticos y asistencia laboral con las mejores empresas.