După cum știm bine, AngularJS ne oferă un număr mare de utilități interesante atunci când lucrăm la dezvoltarea web și mobilă, există atât de multe avantaje încât ne ajută să generăm un mare dinamism în proiectele noastre web.
Astăzi veți învăța să creați un tabel dinamic cu acest cadru cu care puteți manipula orice tip de înregistrări pe care le aveți în dezvoltarea dvs., suficient să lucrați cu module separate în funcție de informațiile pe care le gestionați, puteți lucra toate acestea din ceva care este codificat o singură dată. Cu acesta veți putea lista, filtra, pagina, sorta, crea, edita și șterge informațiile pe care le-ați salvat în sistem. Pentru această primă parte vom lucra cu tot ceea ce privește interogări (listă, filtrare, paginare, sortare), în a doua parte vom lucra cu crearea, editarea și eliminarea înregistrărilor.
În ziua sa, am făcut deja un tutorial pentru a crea rute inamice cu AngularJS Ngroute. Astăzi intrăm pe deplin în ea în alte moduri. De asemenea, trebuie clarificat faptul că este recomandabil să aveți Cunoștințe AngularJSDeoarece unele detalii ale acestui cadru nu vor fi explicate pe deplin, este recomandat (nu este obligatoriu) să aveți GIT, NPM instalat pe sistemul nostru, deoarece vom lucra cu acestea în acest tutorial.
Crearea proiectului
Să ne organizăm mai întâi proiectul cu npm, git și bower. Creați directorul proiectului numit table-unghiular, apoi în interiorul proiectului utilizați comanda `git init` pentru a crea depozitul și apoi utilizați comanda` npm init` pentru a crea fișierul package.json.
Instalăm serverul nostru web cu comanda `npm install --save-dev express`. După instalare creăm un fișier numit 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 ('Aplicația a început de la http: // localhost:' + port);}); Acum executăm comanda (Pentru a instala bower):
npm install --save-dev bowerÎn directorul rădăcină creăm un alt public numit, în public creăm un fișier index.html. Apoi creăm un director în public numit active, în acest director creăm altul numit js și în acesta vom crea fișierele app.js, controller.js, services.js Da filters.js. Apoi creăm un director numit css și în cadrul acestuia creăm un fișier numit main.css
Până în prezent, proiectul nostru se desfășoară după cum urmează:
Continuăm să folosim bibliotecile noastre. Vom folosi bower pentru acest caz, vom folosi bibliotecile unghiulare și de fundație pentru a oferi vederii noastre un pic de stil. De asemenea, vom adăuga o bibliotecă numită angular-utils-pagination, care ne va oferi funcționalitate cu paginarea în proiectul nostru. Înainte de a instala aceste biblioteci, vom crea un fișier în directorul nostru rădăcină numit .bowerrc, care are sarcina de a spune bower unde să salveze aceste biblioteci.
Mai multe informații despre fiecare dintre bibliotecile pe care le vom folosi:
.Codul Bowerrc
{"director": "public / assets / bower_components"}Pentru a instala bibliotecile vom folosi comenzile:
- `instalare bower - salvați unghiular`
- `bower install - salvați fundația`
- `bower install --save angular-utils-pagination`
Ar trebui clarificat faptul că fundația funcționează cu jQuery și sunt descărcate atunci când folosim bower, dar pentru proiectul nostru nu le vom folosi, pe care le putem omite, în cazul meu le voi elimina din directorul bower_components.
Iată ce am creat până acum:
Acum trecem codificarea tabelului pivot 😁, începem cu index.html, adăugăm toate bibliotecile de care avem nevoie.
Tabel pivot cu JS unghiularÎn controller.js creăm un controller numit TableController care va fi apelat din index.html
Cod Controller.js
angular.module ('table.controller', []) .controller ('TableController', function () {console.log ('Table Controller');}); Pentru filter.js creăm doar instanța modulului, deocamdată:
angular.module ('table.filters', []);Facem același lucru cu services.js, doar creăm instanța:
angular.module ('table.services', []);În cele din urmă, apelăm toate modulele din app.js.
angular.module ('tabel', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);Și cu aceasta putem realiza prima execuție a aplicației noastre folosind comanda:
`nod server.js`Dacă folosim instrumentul de dezvoltator al browserului în fila consolă, putem verifica dacă cuvântul Table Table Controller a fost tipărit pentru a indica faptul că tot ce am creat până acum funcționează corect.
Adăugarea de servicii
Vom începe prin crearea serviciilor noastre pe care le vom folosi. Pentru tutorial nu ne vom conecta la niciun server la distanță, așa că vom alege să salvăm înregistrările în fișierele noastre javascript. Vom folosi trei tipuri de registre. Jocuri, articole și utilizatori care nu împărtășesc aceleași câmpuri, fiecare va simula un serviciu independent ca și când ar proveni dintr-un API REST, toate în format JSON. Dacă doriți, puteți adăuga alte câmpuri la aceste trei tipuri sau puteți adăuga unul nou.
Codul Services.js
.factory („Users”, function () {return {get: function () {var data = [{id: 1, prenume: 'Juan', prenume: 'Perez'}, {id: 5, prenume : „Ana María”, nume: „Garcia”}, {id: 15, prenume: „Alejandro”, nume: „Magno”}, {id: 18, prenume: „Andrea”, nume: „ L '}, {id: 19, prenume:' Pablo ', nume:' Gutierrez '}, {id: 8, prenume:' Ana ', nume:' H '},]; returnează datele;} }}) .factory ('Articles', function () {return {get: function () {var data = [{id: 20, title: 'Primul meu articol', rezumat: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, title:' Al doilea articol al meu ', rezumat:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, title:' Al treilea articol al meu ', rezumat:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Return data;}}}) .factory (' Games ', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', gen: 'Acțiune'}, {id: 2, titlu: 'Zelda', gen: 'Aventura'}, {id: 3, titlu: 'Ochi de aur', gen: 'S hooter '}, {id: 4, title:' FIFA 2016 ', gen:' Sports '},]; returnează date; }}}) Vom atașa, de asemenea, un alt serviciu numit Apel, care va fi însărcinat cu apelarea diferitelor date (utilizatori, jocuri și articole).
.factory („Apel”, funcție ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) Și în cele din urmă vom crea un serviciu numit Persistență cine va fi însărcinat cu realizarea CRUD a informațiilor noastre. Așa cum am spus deja la început, vom face funcții de interogare numai în această primă parte a tutorialului, deci va fi utilizată doar funcția listă, în a doua parte vom folosi restul.
.factory („Persistență”, funcție (Apel) {return {add: funcție (tip, date) {var Obj = Call.get (tip); Obj.push (date);}, listă: funcție (tip) {return Call.get (type);}, update: 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];}, destroy: function (type, index) {var Obj = Call.get (type); return Obj.splice (index, 1);}};} ) Trebuie să adăugăm un serviciu care să gestioneze toate obiectele din tabelul pivot.
.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, parametru, valoare) {return Object.defineProperty (obj, parametru, {value: value, writable: true, configurable: adevărat, enumerabil: adevărat});},}}) Adăugarea serviciului
Crearea controlerului
angular.module ('table.controller', []) .controller ('TableController', funcție ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{value: 'Users', etichetă: „Utilizatori”}, {valoare: „Articole”, etichetă: „Articole”}, {valoare: „Jocuri”, etichetă: „Jocuri”}]; $ scope.data = []; $ scope.head = [ ]; // Tip de date $ scope.changeData = funcție () {$ 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 ();}; // Filter $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** de $ scope.orderBy = {pedicate: 'nume', invers: fals}; $ scope. ***** = funcție (predicat) {$ scope.orderBy.reverse =! $ scope.orderB y. invers; $ scope.orderBy.predicate = predicat; }; // Paginare $ scope.limit = {per_page: ITEM_PER_PAGE}; // Implicit $ scope.type = $ scope.types [0]; $ scope.changeData (); });Să explicăm puțin codul pe care tocmai l-am adăugat:- ITEM_PER_PAGE: Acesta va fi însărcinat cu gestionarea limitei de înregistrări care trebuie afișate pe pagină, în acest caz am indicat că sunt 5 pe pagină, când există mai mult de 5 înregistrări va apărea un pager care să ne mute, este sus pentru a plasa câte vrei să vezi în același timp.
- $ scope.types: Conține o matrice cu datele fiecărui tip de date pe care le vom manipula în tabel, funcționează împreună cu changeData.
- $ scope.data: Acesta se va ocupa de manipularea informațiilor care i-au fost atribuite în acel moment și de redare în tabelul dinamic.
- $ scope.head: Va fi antetul tabelului.
Funcții:
- $ scope.changeData: Se va ocupa de schimbarea datelor pe care le avem în acest moment în tabel.
- $ scope.changeFilterTo: Funcționalitatea acestuia va fi aceea de a pune un anumit tip de filtru la filtrarea informațiilor. De exemplu: tipurile de filtre de înregistrări ale utilizatorilor ar fi numele și prenumele.
- $ scope. *****: Folosit pentru a organiza datele după coloanele tabelelor. Această funcție va fi atribuită capului coloanelor.
Cod Index.html
DateFiltruFiltrați după {{filtru [1] [$ index]}}
| Editați Ștergeți | {{articol}} |
Codul Filters.js
.filter ('fieldsSelectFilter', function () {return function (data) {data [0] [0] = '$'; data [1] [0] = 'All'; return data;};}) Adăugăm codul nostru CSS pentru a da câteva stiluri coloanelor tabelelor și pagerului. Trebuie să evidențiem ceva interesant în CSS, să ascundem coloana id a înregistrărilor deoarece acest lucru nu este important pentru a-l vizualiza utilizatorului. Vom adăuga „pictograme” la coloane care vor indica când coloana sortează informațiile în ordine crescătoare sau descendentă.
Cod Main.css
selectați opțiunea {text-transform: majuscule; } ul.paginație {lățime: 25%; marja: 0 auto; } tabel {lățime: 100%; } table tr th {text-transform: capitalize; } table tr th: nth-child (1) {width: 150px; } table tr th: nth-child (2), table td: nth-child (2) {display: none; } th. ***** {cursor: pointer; } i.up: înainte, i.down: înainte {content: ''; } i.up {top: -5px; transformare: rotire (90deg); afișaj: bloc în linie; poziție: relativă; } i.down {transform: rotate (90deg); afișaj: bloc în linie; sus: -5px; poziție: relativă; } tr> td a {margin-left: 5px; }Ne reîmprospătăm browserul din nou și acum vedem următoarele:
MARI
[color = # a9a9a9] Faceți clic pe imagine pentru a mări [/ color]
Să explicăm puțin ce este în interfață. Avem un selector numit date. Acest lucru va fi comandat de changeData extrageți informațiile pe care le-am salvat services.js. Câmpul de filtrare este responsabil de afișarea informațiilor specifice pe care le indicăm atunci când scriem în câmpul menționat, iar „filtrare după” este responsabil de detalierea în ce coloană dorim să filtrăm, în mod implicit filtrează după TOATE câmpurile, puteți de asemenea, faceți clic pe coloane pentru a le organiza descendent și ascendent. Faceți diferite teste din partea dvs. Câmpurile de editare și ștergere nu sunt funcționale pentru moment.
MARI
[color = # a9a9a9] Faceți clic pe imagine pentru a mări [/ color]
Reguli de reținut
Ca orice, trebuie respectate reguli stricte, astfel încât modulul nostru de masă dinamică să poată funcționa în cel mai bun mod. Trebuie să avem întotdeauna un câmp de identificare, deși acest lucru este aproape evident atunci când manipulăm înregistrări din baza noastră de date, dar nu lipsește faptul că această practică ne poate trece uneori. De asemenea, acest câmp este plasat primul în fiecare înregistrare JSON.
Deocamdată este în așteptare cum se manipulează datele care provin dintr-o listă. De exemplu, câmpul de gen din datele Jocurilor ar fi de fapt un ID străin dintr-un alt tabel (atunci când folosim conceptul entitate-relație), formatăm câmpurile numerice și datele, creăm, de asemenea, anteturi separate și nu depind de numele câmpului care vine direct din registru. Vom vedea toate acestea în partea 2 a tutorialului atunci când trebuie să înregistrăm și să actualizăm datele. Fiți atent la știri.
Am terminat prima noastră parte a tabelului pivot. Veți vedea cât de mult vă va servi în proiectele dvs. Angular și nu va trebui să creați tabele diferite pentru a manipula date diferite, dacă nu că puteți centraliza totul cu un singur modul.
Descărcați demonstrația programată
table-angular.zip 6.63MB 1472 Descărcări
