Zoals we goed weten, AngularJS biedt ons een groot aantal interessante hulpprogramma's bij het werken aan web- en mobiele ontwikkeling, er zijn zoveel voordelen dat het ons helpt om een grote dynamiek in onze webprojecten te genereren.
Vandaag leer je om met dit raamwerk een dynamische tabel te maken waarmee je elk type records kunt manipuleren dat je in je ontwikkeling hebt, genoeg om met afzonderlijke modules te werken, afhankelijk van de informatie die je verwerkt, je kunt dit allemaal werken vanuit iets dat wordt slechts één keer gecodeerd. Hiermee kunt u de informatie die u in het systeem hebt opgeslagen weergeven, filteren, pagineren, sorteren, maken, bewerken en verwijderen. Voor dit eerste deel zullen we werken met alles wat met queries te maken heeft (lijst, filter, pagineren, sorteren), in het tweede deel zullen we werken met het aanmaken, bewerken en verwijderen van records.
In die tijd hebben we al een tutorial gedaan om inamic routes te maken met AngularJS Ngroute. Vandaag gaan we er op andere manieren volledig op in. Er moet ook worden verduidelijkt dat het raadzaam is om AngularJS kennisAangezien sommige details van dit raamwerk niet volledig zullen worden uitgelegd, wordt het ook aanbevolen (niet verplicht) om GIT, NPM op ons systeem te installeren, aangezien we ermee zullen werken in deze tutorial.
Project maken
Laten we eerst ons project organiseren met npm, git en prieel. Maak de projectdirectory met de naam table-angular, gebruik vervolgens binnen het project de opdracht `git init` om de repository te maken en gebruik vervolgens de opdracht `npm init` om het bestand package.json te maken.
We installeren onze webserver met het commando `npm install --save-dev express`. Na de installatie maken we een bestand aan met de naam server.js
var express = vereisen ('express'); var app = express (); var port = nummer (process.env.PORT || 3000); app.use (express.static (__ dirname + '/public')); app.listen (poort, functie () {console.log ('App gestart op http: // localhost:' + poort);}); Nu voeren we het commando uit (Om bower te installeren):
npm install --save-dev prieelIn de hoofdmap maken we een andere aan met de naam public, in het openbaar maken we een index.html-bestand. Vervolgens maken we een map in de openbare map met de naam activa, in deze map maken we een andere map met de naam js, en daarin zullen we de app.js-bestanden maken, controller.js, services.js Y filters.js. Vervolgens maken we een map met de naam css en hierin maken we een bestand aan met de naam hoofd.css
Tot nu toe gaat ons project als volgt:
We blijven onze bibliotheken gebruiken. We zullen prieel gebruiken voor dit geval, we zullen de hoek- en funderingsbibliotheken gebruiken om onze weergave een beetje stijl te geven. We zullen ook een bibliotheek toevoegen met de naam angular-utils-pagination, die ons functionaliteit geeft met paginering in ons project. Voordat we deze bibliotheken installeren, maken we een bestand in onze hoofdmap met de naam .bowerrc, dat verantwoordelijk is voor het vertellen van prieel waar deze bibliotheken moeten worden opgeslagen.
Meer informatie over elk van de bibliotheken die we gaan gebruiken:
.Bowerrc-code
{"directory": "public / assets / bower_components"}Om de bibliotheken te installeren, gebruiken we de opdrachten:
- `bower install --save angular`
- `bower install --save foundation`
- `bower install --save angular-utils-pagination`
Er moet worden verduidelijkt dat foundation met jQuery werkt en dat ze worden gedownload wanneer we bower gebruiken, maar voor ons project zullen we ze niet gebruiken, wat we kunnen weglaten, in mijn geval zal ik ze verwijderen uit de directory bower_components.
Dit is wat we tot nu toe hebben gemaakt:
We gaan nu door met het coderen van de draaitabel 😁, we beginnen met index.html, we voegen alle bibliotheken toe die we nodig hebben.
Draaitafel met Angular JSIn controller.js maken we een controller genaamd TableController die wordt aangeroepen vanuit index.html
Controller.js-code
angular.module ('table.controller', []) .controller ('TableController', functie () {console.log ('Table Controller');}); Voor filter.js maken we voorlopig alleen de module-instantie:
hoekige.module ('tabel.filters', []);We doen hetzelfde met services.js, we maken gewoon de instantie:
hoekige.module ('table.services', []);Als laatste noemen we alle modules van app.js.
angular.module ('table', ['angularUtils.directives.dirPagination', 'table.controller', 'table.services', 'table.filters']);En hiermee kunnen we de eerste uitvoering van onze applicatie maken met behulp van de opdracht:
`node-server.js`Als we de browserontwikkelaarstool op het consoletabblad gebruiken, kunnen we controleren of het woord Table Controller is afgedrukt om aan te geven dat alles wat we tot nu toe hebben gemaakt correct werkt.
Diensten toevoegen
We beginnen met het maken van onze services die we gaan gebruiken. Voor de tutorial gaan we geen verbinding maken met een externe server, dus we zullen ervoor kiezen om de records op te slaan in onze javascript-bestanden. We zullen drie soorten registers gebruiken. Games, artikelen en gebruikers die niet dezelfde velden delen, simuleren elk een onafhankelijke service alsof deze afkomstig is van een REST-API, allemaal in JSON-indeling. Als u wilt, kunt u andere velden aan deze drie typen toevoegen of een nieuwe toevoegen.
Services.js-code
.factory ('Users', function () {return {get: function () {var data = [{id: 1, voornaam:' Juan ', achternaam:' Perez '}, {id: 5, voornaam :' Ana María ', achternaam:' Garcia '}, {id: 15, voornaam:' Alejandro ', achternaam:' Magno '}, {id: 18, voornaam:' Andrea ', achternaam:' L '}, {id: 19 , voornaam: 'Pablo', achternaam: 'Gutierrez'}, {id: 8, voornaam: 'Ana', achternaam: 'H'},]; retourgegevens;} }}) .factory ('Artikelen', function ( ) {return {get: function () {var data = [{id: 20, titel: 'Mijn eerste artikel', samenvatting: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'}, {id: 21, titel: 'Mijn tweede artikel', samenvatting: 'Lorem ipsum pain sit amet, consectetur adipisicing elit.'}, {Id: 22, titel: 'Mijn derde artikel', samenvatting: ' Lorem ipsum pain sit amet, consectetur adipisicing elit.'} ]; retourgegevens;}}}) .factory ('Games', function () {return {get: function () {var data = [{id: 1, titel : 'Metroid', genre: 'Action'}, {id: 2, titel: 'Zelda', genre: 'Adventure'}, {id: 3, titel: 'Golden Eye', genre: 'S hooter '}, {id: 4, titel:' Fifa 2016 ', genre:' Sport'},]; gegevens retourneren; }}}) We zullen ook een andere service toevoegen, Call genaamd, die verantwoordelijk is voor het bellen van de verschillende gegevens (Gebruikers, Games en Artikelen).
.factory ('Call', function ($ injector) {return {get: function (type) {var service = $ injector.get (type); return service.get ();}};}) En tot slot zullen we een . maken dienst genaamd Persistentie wie zal verantwoordelijk zijn voor het doen van de CRUD van onze informatie. Zoals ik in het begin al had gezegd, zullen we alleen zoekfuncties uitvoeren in dit eerste deel van de tutorial, dus alleen de lijstfunctie zal worden gebruikt, in het tweede deel zullen we de rest gebruiken.
.factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {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);}};} ) We moeten een service toevoegen die alle objecten in de draaitabel afhandelt.
.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"! == type 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, beschrijfbaar: true, configureerbaar: waar, opsombaar: waar});},}}) Dienst toevoegen
Controller maken
angular.module ('table.controller', []) .controller ('TableController', functie ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{value: 'Users', label: 'Gebruikers'}, {waarde: 'Artikelen', label: 'Artikelen'}, {waarde: 'Games', label: 'Games'}]; $ scope.data = []; $ scope.head = [ ]; // Gegevenstype $ 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 ();}; // Filter $ scope.changeFilterTo = function () {$ scope.search = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** door $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = functie (predikaat) {$ scope.orderBy.reverse =! $ scope.orderB y.omgekeerd; $ scope.orderBy.predicaat = predikaat; }; // Paginering $ scope.limit = {per_page: ITEM_PER_PAGE}; // Standaard $ scope.type = $ scope.types [0]; $ bereik.changeData (); });Laten we de code die we zojuist hebben toegevoegd, uitleggen:- ITEM_PER_PAGE: Het zal verantwoordelijk zijn voor het beheren van de limiet van de records die per pagina moeten worden weergegeven, in dit geval hebben we aangegeven dat er 5 per pagina zijn, wanneer er meer dan 5 records zijn, zal een pager verschijnen om ons te verplaatsen, het is omhoog aan u om te plaatsen hoeveel u er tegelijkertijd wilt bekijken.
- $ bereik.types: Het bevat een array met de gegevens van elk type gegevens dat we in de tabel zullen manipuleren, het werkt in combinatie met changeData.
- $ bereik.gegevens: Het zal verantwoordelijk zijn voor het manipuleren van de informatie die er destijds aan is toegewezen en wordt weergegeven in de dynamische tabel.
- $ bereik.head: Het wordt de kop van de tabel.
Functies:
- $ scope.changeData: Het zal verantwoordelijk zijn voor het wijzigen van de gegevens die we op dit moment in de tabel hebben.
- $ scope.changeFilterTo: De functionaliteit zal zijn om een specifiek type filter te plaatsen bij het filteren van de informatie. Bijvoorbeeld: filtertypes voor gebruikersrecords zijn voor- en achternaam.
- $ bereik. *****: Wordt gebruikt om de gegevens te ordenen op de kolommen van de tabellen. Deze functie wordt toegewezen aan de kop van de kolommen.
Index.html-code
GegevensFilterFilteren op {{filter [1] [$ index]}}
| Bewerken verwijderen | {{item}} |
Filters.js-code
.filter ('fieldsSelectFilter', function () {retourfunctie (data) {data [0] [0] = '$'; data [1] [0] = 'Alle'; retourgegevens;};}) We voegen onze CSS-code toe om enkele stijlen aan de kolommen van de tabellen en aan de pager te geven. We moeten iets interessants in de CSS benadrukken, laten we de id-kolom van de records verbergen aangezien dit niet belangrijk is om het voor de gebruiker te visualiseren. We zullen "pictogrammen" aan de kolommen toevoegen die aangeven wanneer de kolom de informatie in oplopende of aflopende volgorde sorteert.
Hoofd.css-code
selecteer optie {text-transform: hoofdletter; } ul.pagination {breedte: 25%; marge: 0 automatisch; } tabel {breedte: 100%; } table tr th {text-transform: hoofdletter; } tabel tr th: nth-child (1) {breedte: 150px; } tabel tr th: n-de kind (2), tabel td: n-kind (2) {display: geen; } de ***** {cursor: aanwijzer; } i.up: voor, i.down: voor {content: ''; } i.up {top: -5px; transformeren: roteren (90deg); weergave: inline-blok; positie: relatief; } i.down {transformeren: roteren (90deg); weergave: inline-blok; boven: -5px; positie: relatief; } tr> td a {marge-links: 5px; }We verversen onze browser opnieuw en zien nu het volgende:
VERGROTEN
[kleur = # a9a9a9] Klik op afbeelding om te vergroten [/ kleur]
Laten we een beetje uitleggen wat er in de interface staat. We hebben een selector genaamd data. Dit wordt besteld door changeData extraheer de informatie die we hebben opgeslagen in services.js. Het filterveld is verantwoordelijk voor het weergeven van de specifieke informatie die we aangeven wanneer we in dat veld schrijven, en "filteren op" is verantwoordelijk voor het detailleren op welke kolom we willen filteren, standaard filtert het op ALLE velden, u kunt klik ook op de kolommen om ze aflopend en oplopend te ordenen. Doe de verschillende tests van uw kant. De edit- en delete-velden zijn voorlopig niet functioneel.
VERGROTEN
[kleur = # a9a9a9] Klik op afbeelding om te vergroten [/ kleur]
Regels om in gedachten te houden
Zoals alles, moeten strikte regels worden gevolgd, zodat onze dynamische tabelmodule op de beste manier kan werken. We moeten altijd een id-veld hebben, hoewel dit bijna duidelijk is wanneer we records uit onze database manipuleren, maar het ontbreekt niet dat deze praktijk ons soms kan passeren. Dit veld wordt ook als eerste geplaatst in elk JSON-record.
Voor nu is het in afwachting hoe de gegevens te manipuleren die uit een lijst komen. Het geslachtsveld in de Spelgegevens zou bijvoorbeeld in feite een buitenlandse id uit een andere tabel zijn (wanneer we het concept entiteit-relatie gebruiken), de numerieke velden en datums opmaken, ook afzonderlijke koppen maken en niet afhankelijk zijn van de naam van het veld dat komt rechtstreeks uit het register. We zullen dit allemaal zien in deel 2 van de tutorial wanneer we gegevens moeten vastleggen en bijwerken. Wees alert op het nieuws.
We zijn klaar met ons eerste deel van de draaitabel. U zult zien hoeveel het u van dienst zal zijn in uw Angular-projecten en dat u geen verschillende tabellen hoeft te maken om verschillende gegevens te manipuleren, zo niet dat u alles kunt centraliseren met een enkele module.
Geplande demo downloaden
table-angular.zip 6.63MB 1472 downloads
