Svängbord med AngularJS

Som vi väl vet, AngularJS ger oss ett stort antal intressanta verktyg när vi arbetar med webb- och mobilutveckling, det finns så många fördelar att det hjälper oss att skapa stor dynamik i våra webbprojekt.

Idag lär du dig att skapa en dynamisk tabell med denna ram som du kan manipulera alla typer av poster som du har i din utveckling, tillräckligt med att arbeta med separata moduler beroende på den information du hanterar, du kan arbeta allt detta från något som kodas bara en gång. Med den kommer du att kunna lista, filtrera, paginera, sortera, skapa, redigera och ta bort informationen som du har sparat i systemet. För denna första del kommer vi att arbeta med allt som rör frågor (lista, filtrera, paginera, sortera), i den andra delen kommer vi att arbeta med att skapa, redigera och eliminera poster.

På sin tid gjorde vi redan en handledning för att skapa inamiska rutter med AngularJS Ngroute. Idag går vi helt in på det på andra sätt. Det bör också förtydligas att det är lämpligt att ha AngularJS kunskapEftersom vissa detaljer i detta ramverk inte kommer att förklaras fullständigt, rekommenderas det också (inte obligatoriskt) att ha GIT, NPM installerat på vårt system eftersom vi kommer att arbeta med dem i denna handledning.

Skapar projekt

Låt oss först organisera vårt projekt med npm, git och bower. Skapa projektkatalogen som kallas table-angular, använd sedan kommandot 'git init' för att skapa förvaret och använd sedan kommandot 'npm init' för att skapa filen package.json.

Vi installerar vår webbserver med kommandot 'npm install --save-dev express'. Efter installationen skapar vi en fil som heter 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 startade på http: // localhost:' + port);}); 

Nu kör vi kommandot (Att installera bower):

 npm installera-spara-dev bower

Inne i rotkatalogen skapar vi en annan som heter public, offentligt skapar vi en index.html -fil. Sedan skapar vi en katalog inuti offentligt som heter tillgångar, inuti den här katalogen skapar vi en annan som heter js, och i den skapar vi app.js -filerna, controller.js, services.js Y filters.js. Sedan skapar vi en katalog som heter css och inom denna skapar vi en fil som heter main.css

Hittills går vårt projekt enligt följande:

Vi fortsätter med våra bibliotek att använda. Vi kommer att använda bower för det här fallet, vi kommer att använda vinkel- och grundbiblioteken för att ge vår syn lite stil. Vi kommer också att lägga till ett bibliotek som heter angular-utils-pagination, vilket ger oss funktionalitet med pagination i vårt projekt. Innan vi installerar dessa bibliotek kommer vi att skapa en fil i vår rotkatalog som heter .bowerrc som ansvarar för att berätta för bower var dessa bibliotek ska sparas.

Mer information om vart och ett av de bibliotek som vi ska använda:

.Bowerrc -kod

 {"directory": "public / assets / bower_components"}

För att installera biblioteken använder vi kommandona:

• `bower installera -spara vinkel`
• `bower installera -spara grund`
• `bower installera-spara angular-utils-pagination`

Det bör klargöras att foundation fungerar med jquery och de laddas ner när vi använder bower, men för vårt projekt kommer vi inte att använda dem, vilket vi kan utelämna dem, i mitt fall tar jag bort dem från bower_components -katalogen.

Detta är vad vi har skapat hittills:

Vi går nu igenom kodning av pivottabellen 😁, vi börjar med index.html, vi lägger till alla bibliotek vi behöver.

 Pivottabell med Angular JS 

I controller.js skapar vi en controller kallad TableController som kommer att kallas från index.html

Controller.js -kod

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

För filter.js skapar vi bara modulinstansen, för närvarande:

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

Vi gör samma sak med services.js, vi skapar bara instansen:

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

Slutligen kallar vi alla moduler från app.js.

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

Och med detta kan vi göra den första körningen av vår applikation med kommandot:

 `nod server.js`

Om vi ​​använder webbläsarutvecklarverktyget på konsolfliken kan vi verifiera att ordet Table Controller har skrivits ut för att indikera att allt vi har skapat hittills fungerar korrekt.

Lägga till tjänster

Vi börjar med att skapa våra tjänster som vi ska använda. För handledningen kommer vi inte att ansluta till någon fjärrserver, så vi väljer att spara posterna i våra javascript -filer. Vi kommer att använda tre typer av register. Spel, artiklar och användare som inte delar samma fält, var och en simulerar en oberoende tjänst som om den kom från en REST API, allt i JSON -format. Om du vill kan du lägga till andra fält till dessa tre typer eller lägga till en ny.
Services.js -kod

 .factory ('Användare', funktion () {return {get: function () {var data = [{id: 1, förnamn: 'Juan', efternamn: 'Perez'}, {id: 5, förnamn : 'Ana María', efternamn: 'Garcia'}, {id: 15, förnamn: 'Alejandro', efternamn: 'Magno'}, {id: 18, förnamn: 'Andrea', efternamn: ' L '}, {id: 19, förnamn:' Pablo ', efternamn:' Gutierrez '}, {id: 8, förnamn:' Ana ', efternamn:' H '},]; returdata;} }}) .factory ('Artiklar', funktion () {return {get: function () {var data = [{id: 20, titel: 'Min första artikel', sammanfattning: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, titel:' Min andra artikel ', sammanfattning:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, title:' Min tredje artikel ', sammanfattning:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Return data;}}}) .factory (' Games ', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', genre: 'Action'}, {id: 2, titel: 'Zelda', genre: 'Äventyr'}, {id: 3, titel: 'Golden Eye', genre: 'S hooter '}, {id: 4, title:' Fifa 2016 ', genre:' Sports '},]; returnera data; }}}) 

Vi kommer också att bifoga en annan tjänst som heter Call som kommer att ansvara för att ringa de olika uppgif.webpterna (användare, spel och artiklar).

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

Och slutligen kommer vi att skapa en tjänst som heter Persistence som kommer att ansvara för att göra SKICK av vår information. Som jag redan hade sagt i början kommer vi bara att göra frågefunktioner i den här första delen av handledningen, så bara listfunktionen kommer att användas, i den andra delen kommer vi att använda resten.

 .factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (typ);}, 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);}};} ) 

Vi måste lägga till en tjänst som hanterar alla objekt i pivottabellen.

 .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 || "objekt"! == typ av obj) {return obj;} var copy = obj.constructor (); för (var attr i 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, configable: sant, otaligt: ​​sant});},}}) 

Lägger till tjänst

Skapa Controller

 angular.module ('table.controller', []) .controller ('TableController', funktion ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{värde: 'Användare', label: 'Användare'}, {värde: 'Artiklar', etikett: 'Artiklar'}, {värde: 'Spel', etikett: 'Spel'}]; $ scope.data = []; $ scope.head = [ ]; // Datatyp $ 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 ();}; // Filtrera $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({}} , $ scope.selectFilter, '');}; // ***** av $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = function (predikat) {$ scope.orderBy.reverse =! $ scope.orderB y.revers; $ scope.orderBy.predicate = predikat; }; // Pagination $ scope.limit = {per_page: ITEM_PER_PAGE}; // Standard $ scope.type = $ scope.types [0]; $ scope.changeData (); });

Låt oss förklara koden som vi precis lagt till lite:

• ITEM_PER_PAGE: Det kommer att ansvara för att hantera gränsen för de poster som ska visas per sida, i det här fallet har vi angett att det finns 5 per sida, när det finns mer än 5 poster som en personsökare kommer att visas för att flytta oss runt, är det upp till dig för att placera hur många du vill visa samtidigt.

• $ scope. typer: Den innehåller en array med data för varje typ av data som vi kommer att manipulera i tabellen, den fungerar tillsammans med changeData.

• $ scope.data: Den kommer att ansvara för att manipulera informationen som tilldelats den vid den tidpunkten och återges i den dynamiska tabellen.

• $ scope.head: Det blir tabellens rubrik.

Funktioner:

• $ scope.changeData: Det kommer att ansvara för att ändra data som vi har för närvarande i tabellen.

• $ scope.changeFilterTo: Dess funktion kommer att vara att sätta en specifik typ av filter när informationen filtreras. Till exempel: Filtyper för användarposter skulle vara för- och efternamn.

• $ omfattning. *****: Används för att organisera data efter kolumnerna i tabellerna. Denna funktion kommer att tilldelas kolumnhuvudet.

Index.html -kod

DataFiltreraFiltrera efter {{filter [1] [$ index]}}
 {{Artikel}} 
 
 

 
 
 Redigera radera 
 
{{Artikel}}
 

 

Vi lägger till ett filter som lägger till ett nytt fält i filtertypväljaren, det här fältet är att tillämpa ett filter på alla kolumner i vår tabell, sammanfattningsvis använder det utrymmet där ID -fältet finns och den nya egenskapen tilldelas.

Filters.js -kod

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

Vi lägger till vår CSS -kod för att ge vissa stilar till tabellernas kolumner och till personsökaren. Vi måste lyfta fram något intressant i CSS, låt oss dölja id -kolumnen för posterna eftersom det inte är viktigt att visualisera det för användaren. Vi lägger till "ikoner" i kolumnerna som anger när kolumnen sorterar informationen i stigande eller fallande ordning.

Main.css -kod

 välj alternativ {text-transform: versaler; } ul.pagination {bredd: 25%; marginal: 0 auto; } tabell {bredd: 100%; } tabell tr ​​{text-transform: versaler; } tabell tr ​​th: nth-child (1) {bredd: 150px; } tabell tr ​​th: nth-child (2), tabell td: nth-child (2) {display: none; } th. ***** {markör: pekare; } i.up: före, i.down: före {content: ''; } i.up {topp: -5px; transform: rotera (90deg); display: inline-block; position: relativ; } i.down {transform: rotera (90deg); display: inline-block; topp: -5px; position: relativ; } tr> td a {margin-left: 5px; }

Vi uppdaterar vår webbläsare igen och ser nu följande:

FÖRSTORA

[color = # a9a9a9] Klicka på bilden för att förstora [/ color]

Låt oss förklara lite vad som finns i gränssnittet. Vi har en väljare som heter data. Detta kommer att beställas av changeData extrahera informationen som vi har sparat i services.js. Filterfältet ansvarar för att visa den specifika information som vi anger när vi skriver i det nämnda fältet, och "filtrera efter" ansvarar för att specificera efter vilken kolumn vi vill filtrera, som standard filtrerar den efter ALLA fält, du kan klicka också på kolumnerna för att organisera dem fallande och stigande. Gör de olika testerna från din sida. Redigera och ta bort fält är för närvarande inte funktionella.

FÖRSTORA

[color = # a9a9a9] Klicka på bilden för att förstora [/ color]

Regler att tänka på
Precis som allt måste strikta regler följas så att vår dynamiska bordsmodul kan fungera på bästa sätt. Vi måste alltid ha ett id -fält, även om detta nästan är uppenbart när vi manipulerar poster från vår databas, men det saknas inte att denna praxis ibland kan gå förbi oss. Detta fält placeras också först i varje JSON -post.

För nu väntar det hur man manipulerar data som kommer från en lista. Till exempel skulle könsfältet i Speldata faktiskt vara ett främmande id från en annan tabell (när vi använder begreppet entitetsrelation), formatera numeriska fält och datum, skapa också separata rubriker och inte bero på namnet på fältet som kommer direkt från registret. Vi kommer att se allt detta i del 2 av handledningen när vi behöver spela in och uppdatera data. Var uppmärksam på nyheterna.

Vi har avslutat vår första del av svängbordet. Du kommer att se hur mycket det kommer att tjäna dig i dina Angular -projekt och inte behöva skapa olika tabeller för att manipulera olika data, om inte att du kan centralisera allt med en enda modul.

Ladda ner schemalagd demo table-angular.zip 6,63 MB 1472 Nedladdningar