Como implementar paginação em Angular JS? [Com Exemplo Prático]
Publicados: 2020-04-20Antes de passarmos a entender como a paginação funciona no Angular JS e como ela é implementada nesse framework, vamos dar um passo a passo e começar discutindo o Angular JS e a paginação em geral.
Índice
O que é Angular JS?
O Angular JS está entre os frameworks estruturais mais preferidos para criar aplicativos web dinâmicos. Ele permite que os desenvolvedores usem HTML como linguagem de modelo, e ainda permite a extensão da sintaxe HTML para permitir a expressão clara e concisa dos vários componentes de uma aplicação web.
Ele vem com recursos de injeção de dependência e vinculação de dados para eliminar a maior parte do código que precisa ser escrito pelos desenvolvedores. Tudo isso ocorre dentro do navegador, tornando o Angular JS um framework que pode ser convenientemente usado com quase qualquer tecnologia de servidor.
Angular JS é uma estrutura de código aberto que compartilha várias semelhanças com JavaScript. É usado principalmente por desenvolvedores para desenvolver aplicativos que precisam exibir todo o seu conteúdo, texto e gráficos em uma única página. No entanto, isso não significa, de forma alguma, que ele não possa ser usado para criar aplicativos de várias páginas.
Explicaremos neste post como a paginação ajuda a dividir o conteúdo em mais de uma página sem afetar o fluxo e a navegação entre outros fatores. É uma estrutura de controlador de visualização de modelo tão popular em todo o mundo devido a duas razões muito importantes - é baseada no Google e sempre é mantida atualizada com as últimas tendências de desenvolvimento. Vamos agora mudar nosso foco para paginação.
Leia: Perguntas e respostas da entrevista AngularJS
O que é paginação?
Como mencionamos um pouco antes, nem todos os sites podem exibir todas as informações em uma única página. Embora uma única página seja realmente a escolha preferida, o uso de várias páginas em situações em que um site de página única não é uma opção pode oferecer vários benefícios, incluindo navegação fácil no site, experiência aprimorada do usuário e outros.
Todos os sites, especialmente sites de comércio eletrônico como o Flipkart, não podem listar todos os seus produtos e exibir todas as informações necessárias em uma única página. É aqui que a paginação entra em cena. Ele permite que o conteúdo, na forma de texto, imagens e muito mais, seja dividido em várias páginas, se necessário. Saiba mais sobre como usar o AngularJS para desenvolvimento web.
Existem vários cenários em que a paginação é realmente útil. Se o seu site apresentar grandes blocos de informações, incluindo blogs, gráficos ou tabelas relacionados a uma categoria ou conjunto de dados semelhante, você poderá dividir essas informações usando a paginação e melhorar a navegação e a legibilidade.
Paginação em Angular JS
Existem várias maneiras de exibir dados em um site ou em qualquer aplicativo da web. Listas e tabelas são os elementos mais comuns que a maioria das pessoas usa para exibir informações fáceis de ler e entender. Em aplicativos Angular, o recurso ng-repeat é usado para exibir informações em listas ou tabelas. No entanto, isso só funciona quando os dados exibidos não são muito grandes. Para conjuntos de dados maiores, recursos como classificação, pesquisa e paginação tornam as tabelas e listas mais gerenciáveis e os aplicativos mais fáceis de usar.
A paginação Angular JS pode parecer mais difícil do que a paginação em Laravel, Code PHP e outras estruturas para pessoas que não estão muito cientes da abordagem de implementação que precisa ser seguida. Você pode usar a paginação junto com os recursos de pesquisa e classificação para listar registros em um formato de fácil navegação e leitura.
Você pode usar bibliotecas angulares de terceiros para cobrir listas simples em várias páginas com recursos de classificação e pesquisa. A biblioteca de terceiros mais preferida para essa finalidade é dirPagination. Esta biblioteca é facilmente acessível e muito fácil de usar. Ele pode ser usado para versões angulares inferiores a angular 2. Se você estiver usando angular 2, você separará os componentes disponíveis na biblioteca interna para adicionar classificação, pesquisa e paginação.
Se você quiser exibir mais de 200 registros e estiver usando, por exemplo, o angular 1.4, verá que a biblioteca dirPagination é mais rápida do que outras bibliotecas desse tipo e também com alto desempenho. É uma biblioteca plug-n-play que não precisa do Angular JS Controller para executar qualquer lógica ou comando de configuração. Além disso, também funciona bem com o Bootstrap.
Paginação em Angular JS com Exemplo
Aqui está um código para mostrar a paginação em Angular JS.
Fonte : ( https://gist.github.com/kmaida/06d01f6b878777e2ea34 )
<!DOCTYPE HTML>
<html lang=”pt” ng-app=”myApp”>
<cabeça>
<meta charset=”utf-8″>
<title>Paginação Dinâmica com Filtragem</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”descrição” conteúdo=””>
<meta name=”autor” content=”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>
<!– Scripts Angulares –>
<script src=”script.js” type=”text/javascript”></script>
<!– Bootstrap –>
<link rel=”stylesheet” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />
</head>
<corpo>
<div ng-controller=”PageCtrl”>
<div ng-controller=”PageCtrl”>
<label>Pesquisar:</label> <input type=”text” ng-model=”search.name” placeholder=”Pesquisar” />
<br />
<label>Filtrar por categoria:</label>
<ul>
<li><a href=”” ng-click=”search.category='engineering'”>Engenharia</a></li>
<li><a href=”” ng-click=”search.category='management'”>Gerenciamento</a></li>
<li><a href=”” ng-click=”search.category='business'”>Negócios</a></li>
</ul>
<label>Filtrar por Filial:</label>
<ul>
<li><a href=”” ng-click=”search.branch='Oeste'”>Oeste</a></li>
<li><a href=”” ng-click=”search.branch='Leste'”>Leste</a></li>
</ul>
<p><strong><a href=”” ng-click=”resetFilters()”>Mostrar tudo</a></strong></p>
<h1>Itens</h1>
<ul>
<li ng-repeat=”item em filtrado = itens | filtro:pesquisar | 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>
</body>
</html>
app.js (Fonte: https://gist.github.com/kmaida/06d01f6b878777e2ea34)
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function() {
função de retorno (entrada, início) {
if (entrada) {
inicio = + inicio;
return input.slice(start);
}
Retorna [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
“nome”: “nome 1”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 2”,
"categoria": [{
“categoria”: “engenharia”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 3”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “engenharia”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 4”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 5”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “nome 6”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “nome 7”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “nome 8”,
"categoria": [{
“categoria”: “negócios”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 9”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “nome 10”,
"categoria": [{
"Gerenciamento de categoria"
}],
“ramo”: “Leste”
}, {
“nome”: “nome 11”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “nome 12”,
"categoria": [{
“categoria”: “engenharia”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 13”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 14”,
"categoria": [{
“categoria”: “engenharia”
}],
“ramo”: “Leste”
}, {
“nome”: “nome 15”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “engenharia”
}],
“ramo”: “Leste”
}, {
“nome”: “nome 16”,
"categoria": [{
"Gerenciamento de categoria"
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 17”,
"categoria": [{
"Gerenciamento de categoria"
}],
“ramo”: “Leste”
}, {
“nome”: “nome 18”,
"categoria": [{
“categoria”: “negócios”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 19”,
"categoria": [{
“categoria”: “negócios”
}],
“ramo”: “Oeste”
}, {
“nome”: “nome 20”,
"categoria": [{
“categoria”: “engenharia”
}],
“ramo”: “Leste”
}, {
“nome”: “Pedro”,
"categoria": [{
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “Frank”,
"categoria": [{
"Gerenciamento de categoria"
}],
“ramo”: “Leste”
}, {
“nome”: “João”,
"categoria": [{
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “Ralf”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “Gina”,
"categoria": [{
“categoria”: “negócios”
}],
“ramo”: “Leste”
}, {
“nome”: “Sam”,
"categoria": [{
"Gerenciamento de categoria"
}, {
“categoria”: “engenharia”
}],
“ramo”: “Leste”
}, {
“nome”: “Britney”,
"categoria": [{
“categoria”: “negócios”
}],
“ramo”: “Oeste”
}];
Explicação
O código usado acima exibirá os nomes dos alunos em suas respectivas categorias ou disciplinas de ensino, juntamente com sua geografia. O recurso de paginação Angular JS permitirá que esses detalhes sejam mencionados em um formato tabular, em várias páginas. É assim que você classifica as informações e as torna mais apresentáveis para o usuário. Esta é sem dúvida a maneira mais fácil de melhorar a experiência do usuário para seus aplicativos da web.
Portanto, se você é um desenvolvedor da Web, não deve atrasar o aprendizado da maneira mais eficiente possível. E com os argumentos acima sobre por que o AngularJS é uma ferramenta ideal no mundo da tecnologia atual, você tem todas as explicações para seguir em frente!
Se você estiver interessado em saber mais sobre AngularJS, desenvolvimento Full-stack, confira o Diploma PG do upGrad & IIIT-B em Desenvolvimento de Software Full-stack, projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso, mais de 9 projetos e atribuições, status de ex-alunos do IIIT-B, projetos práticos práticos e assistência de trabalho com as principais empresas.