✅ Tabelas dinâmicas com AngularJS

Índice

Criando Projeto
Adicionando serviços
Criando controlador

Como bem sabemos, O AngularJS nos fornece um grande número de utilitários interessantes quando trabalhamos com desenvolvimento web e móvel, são tantas as vantagens que nos ajuda a gerar um grande dinamismo em nossos projetos web.

Hoy aprenderás a crear una tabla dinámica con este framework con la que podrás manipular cualquier tipo de registros que tengas en tu desarrollo, ya basta de trabajar módulos por separados dependiendo de la información que estes manejando, todo esto lo puedes trabajar desde algo que se codifique uma só vez. Com ele você poderá listar, filtrar, paginar, classificar, criar, editar e deletar as informações que você salvou no sistema. Para esta primeira parte trabalharemos com tudo o que diz respeito às consultas (listar, filtrar, paginar, ordenar), na segunda parte trabalharemos com a criação, edição e eliminação de registros.

Na sua época já fizemos um tutorial para criar rotas inâmicas com AngularJS Ngroute. Hoje nos aprofundamos nisso de outras maneiras. Também deve ser esclarecido que é aconselhável ter Conhecimento AngularJSComo alguns detalhes deste framework não serão totalmente explicados, também é recomendado (não obrigatório) ter GIT, NPM instalado em nosso sistema, uma vez que trabalharemos com eles neste tutorial.

Criando Projeto

Vamos primeiro organizar nosso projeto com npm, git e bower. Crie o diretório do projeto chamado table-angular, então dentro do projeto use o comando `git init` para criar o repositório e então use o comando` npm init` para criar o arquivo package.json.

Instalamos nosso servidor web com o comando `npm install --save-dev express`. Após a instalação, criamos um arquivo chamado server.js

 var express = require ('express'); var app = express (); var port = Number (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('App started at http: // localhost:' + port);});

Agora executamos o comando (para instalar o bower):

 npm install --save-dev bower

Dentro do diretório raiz criamos outro chamado public, em public criamos um arquivo index.html. Em seguida, criamos um diretório dentro de público chamado assets, dentro desse diretório criamos outro chamado js, e nele vamos criar os arquivos app.js, controller.js, services.js Y filtros.js. Em seguida, criamos um diretório chamado css e dentro dele criamos um arquivo chamado main.css

Até agora, nosso projeto é o seguinte:

Continuamos com nossas bibliotecas para uso. Usaremos o bower para este caso, usaremos as bibliotecas angular e Foundation para dar um pouco de estilo à nossa visão. Também adicionaremos uma biblioteca chamada angular-utils-pagination, que nos dará funcionalidade com paginação em nosso projeto. Antes de instalar essas bibliotecas, vamos criar um arquivo em nosso diretório raiz chamado .bowerrc que é responsável por dizer ao bower onde salvar essas bibliotecas.

Mais informações sobre cada uma das bibliotecas que vamos usar:

.Bowerrc code

 {"diretório": "public / assets / bower_components"}

Para instalar as bibliotecas, usaremos os comandos:

`bower install --save angular`
`bower install --save Foundation`
`bower install --save angular-utils-pagination`

Deve ser esclarecido que o Foundation funciona com o jquery e eles são baixados quando usamos o bower, mas para o nosso projeto não vamos usá-los, podemos omiti-los, no meu caso irei removê-los do diretório bower_components.

Isso é o que criamos até agora:

Agora passamos a codificação da tabela dinâmica 😁, começamos com index.html, acrescentamos todas as bibliotecas de que precisamos.

 Tabela Dinâmica com Angular JS

Em controller.js, criamos um controlador chamado TableController que será chamado de index.html

Código Controller.js

 angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');});

Para filter.js, criamos apenas a instância do módulo, por enquanto:

 angular.module ('table.filters', []);

Fazemos o mesmo com services.js, apenas criamos a instância:

 angular.module ('table.services', []);

Por fim, chamamos todos os módulos de app.js.

 angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);

E com isso podemos fazer a primeira execução de nossa aplicação utilizando o comando:

 `node server.js`

Se usarmos a ferramenta de desenvolvedor do navegador na guia do console, podemos verificar se a palavra Table Controller foi impressa para indicar que tudo o que criamos até agora está funcionando corretamente.

Adicionando serviços

Começaremos criando nossos serviços que iremos utilizar. Para o tutorial não iremos nos conectar a nenhum servidor remoto, então escolheremos salvar os registros em nossos arquivos javascript. Usaremos três tipos de registradores. Jogos, Artigos e Usuários que não compartilham os mesmos campos, cada um simulará um serviço independente como se viesse de um API REST, tudo em formato JSON. Se você quiser, pode adicionar outros campos a esses três tipos ou adicionar um novo.
Código Services.js

 .factory ('Usuários', função () {return {get: function () {var data = [{id: 1, nome: 'Juan', sobrenome: 'Perez'}, {id: 5, nome : 'Ana María', sobrenome: 'Garcia'}, {id: 15, nome: 'Alejandro', sobrenome: 'Magno'}, {id: 18, nome: 'Andrea', sobrenome: ' L '}, {id: 19, nome:' Pablo ', sobrenome:' Gutierrez '}, {id: 8, nome:' Ana ', sobrenome:' H '},]; dados de retorno;} }}) .factory ('Artigos', function () {return {get: function () {var data = [{id: 20, title: 'My first article', summary: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, título:' Meu segundo artigo ', resumo:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, título:' Meu terceiro artigo ', resumo:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Retornar dados;}}}) .factory (' Games ', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', gênero: 'Ação'}, {id: 2, título: 'Zelda', gênero: 'Aventura'}, {id: 3, título: 'Golden Eye', gênero: 'S hooter '}, {id: 4, título:' Fifa 2016 ', gênero:' Esportes '},]; dados de retorno; }}})

Anexaremos também outro serviço denominado Call que se encarregará de chamar os diversos dados (Usuários, Jogos e Artigos).

 .factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};})

E, finalmente, criaremos um serviço chamado Persistência quem estará encarregado de fazer o CRUD de nossas informações. Como já havia falado no início, só faremos as funções de consulta nesta primeira parte do tutorial, então apenas a função list será usada, na segunda parte usaremos o restante.

 .factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (type);}, atualizar: function (type, index, data) {var Obj = Call.get (type); return Obj [index] = data;}, get: function (type, index) {var Obj = Call.get (type); return Obj [index];}, destruir: function (type, index) {var Obj = Call.get (type); return Obj.splice (index, 1);}};} )

Precisamos adicionar um serviço que manipulará todos os objetos na tabela dinâmica.

 .factory ('ObjectService', function () {return {getPropertiesObject: function (object) {var properties = []; for (var property in object) {properties.push (property);} return properties;}, cloneObject: function (obj) {if (null === obj || "object"! == typeof obj) {return obj;} var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty ( attr)) copy [attr] = obj [attr];} return copy;}, createParamObject: function (obj, parameter, value) {return Object.defineProperty (obj, parameter, {value: value, writable: true, configurable: verdadeiro, enumerável: verdadeiro});},}})

Adicionando serviço

Criando controlador

 angular.module ('table.controller', []) .controller ('TableController', function ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{value: 'Users', rótulo: 'Usuários'}, {valor: 'Artigos', rótulo: 'Artigos'}, {valor: 'Jogos', rótulo: 'Jogos'}]; $ scope.data = []; $ scope.head = [ ]; // Tipo de dados $ scope.changeData = function () {$ scope.uri = $ scope.type.value; $ scope.data = Persistence.list ($ scope.type.value); $ scope.head = ObjectService .getPropertiesObject ($ scope.data [0]); $ scope.propertiesHead = $ scope.head; $ scope.filter = $ filter ('fieldsSelectFilter') ([ObjectService.cloneObject ($ scope.propertiesHead), ObjectService.cloneObject ( $ scope.head)]);; $ scope.selectFilter = '$'; $ scope.changeFilterTo ();}; // Filtro $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** por $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = function (predicate) {$ scope.orderBy.reverse =! $ scope.orderB y.reverse; $ scope.orderBy.predicate = predicate; }; // Paginação $ scope.limit = {per_page: ITEM_PER_PAGE}; // Padrão $ scope.type = $ scope.types [0]; $ scope.changeData (); });

Vamos explicar o código que acabamos de adicionar:

ITEM_PER_PAGE: Caberá a ele gerenciar o limite de registros a serem exibidos por página, neste caso indicamos que são 5 por página, quando houver mais de 5 registros aparecerá um pager para nos movimentar, está ativo para você colocar quantos deseja ver ao mesmo tempo.

$ scope.types: Contém um array com os dados de cada tipo de dado que vamos manipular na tabela, funciona em conjunto com changeData.

$ scope.data: Ele se encarregará de manipular as informações que lhe são atribuídas no momento e de serem processadas na tabela dinâmica.

$ scope.head: Será o cabeçalho da tabela.

Funções:

$ scope.changeData: Se encarregará de alterar os dados que temos no momento na tabela.

$ scope.changeFilterTo: Sua funcionalidade será colocar um tipo específico de filtro na hora de filtrar a informação. Por exemplo: Os tipos de filtro de registros do usuário seriam nome e sobrenome.

$ scope. *****: Usado para organizar os dados pelas colunas das tabelas. Esta função será atribuída ao cabeçalho das colunas.

Index.html code

DadosFiltroFiltrar por {{filter [1] [$ index]}}
 {{item}}  
 

 
  Editar apagar  {{item}}

Adicionamos um filtro que irá anexar um novo campo ao seletor de tipo de filtro, este campo será para aplicar um filtro a qualquer coluna de nossa tabela, em resumo ele usa o espaço onde o campo ID está localizado e esta nova propriedade é atribuída.

Código Filters.js

 .filter ('fieldsSelectFilter', function () {return function (data) {data [0] [0] = '$'; data [1] [0] = 'All'; return data;};})

Adicionamos nosso código CSS para dar alguns estilos às colunas das tabelas e ao paginador. Devemos destacar algo interessante no CSS, vamos esconder a coluna id dos registros já que não é importante visualizá-lo para o usuário. Adicionaremos "ícones" às colunas que indicarão quando a coluna está classificando as informações em ordem crescente ou decrescente.

Código Main.css

 selecione a opção {text-transform: capitalize; } ul.paginação {largura: 25%; margem: 0 automático; } tabela {largura: 100%; } table tr th {text-transform: capitalize; } tabela tr th: enésimo filho (1) {largura: 150px; } tabela tr th: enésimo filho (2), tabela td: enésimo filho (2) {display: nenhum; } th. ***** {cursor: ponteiro; } i.up: before, i.down: before {content: ''; } i.up {top: -5px; transformar: girar (90deg); display: bloco embutido; posição: relativa; } i.down {transform: rotate (90deg); display: bloco embutido; topo: -5px; posição: relativa; } tr> td a {margin-left: 5px; }

Atualizamos nosso navegador novamente e agora vemos o seguinte:

PROLONGAR

[color = # a9a9a9] Clique na imagem para ampliar [/ color]

Vamos explicar um pouco o que há na interface. Temos um seletor chamado dados. Isso será ordenado por changeData extrair as informações que salvamos em services.js. O campo de filtro se encarrega de mostrar as informações específicas que indicamos quando escrevemos nesse campo, e "filtrar por" se encarrega de detalhar por qual coluna se deseja filtrar, por padrão filtra por TODOS os campos, você pode também clique nas colunas para organizá-las em ordem decrescente e crescente. Faça os vários testes de sua parte. Os campos de edição e exclusão não estão funcionais por enquanto.

PROLONGAR

[color = # a9a9a9] Clique na imagem para ampliar [/ color]

Regras para manter em mente
Como tudo, regras estritas devem ser seguidas para que nosso módulo de tabela dinâmica funcione da melhor maneira. Devemos sempre ter um campo de id, embora isso seja quase óbvio quando manipulamos registros de nosso banco de dados, mas não falta que essa prática às vezes pode passar por nós. Além disso, este campo é colocado primeiro em cada registro JSON.

Por enquanto está pendente como manipular os dados que vêm de uma lista. Por exemplo, o campo de gênero nos dados dos Jogos seria, na verdade, um id estrangeiro de outra tabela (quando usamos o conceito de relacionamento de entidade), formata os campos numéricos e as datas, cria também cabeçalhos separados e não depende do nome do campo que vem diretamente do registro. Veremos tudo isso na parte 2 do tutorial, quando precisarmos registrar e atualizar os dados. Esteja atento às novidades.

Terminamos nossa primeira parte da tabela dinâmica. Você verá o quanto isso lhe servirá em seus projetos Angular e não terá que criar tabelas diferentes para manipular dados diferentes, senão que você pode centralizar tudo em um único módulo.

Baixar demonstração agendada table-angular.zip 6,63 MB 1472 downloads