Kontingenční tabulky s AngularJS

Jak dobře víme, Při práci na webovém a mobilním vývoji nám AngularJS poskytuje velké množství zajímavých utilit„Existuje tolik výhod, že nám pomáhá vytvářet velkou dynamiku v našich webových projektech.

Dnes se s tímto frameworkem naučíte vytvářet dynamickou tabulku, se kterou můžete manipulovat s jakýmkoli typem záznamů, které máte ve svém vývoji, dostatek práce se samostatnými moduly v závislosti na informacích, se kterými nakládáte, to vše můžete zpracovat z něčeho, je kódován pouze jednou. S ním budete moci vypisovat, filtrovat, stránkovat, třídit, vytvářet, upravovat a mazat informace, které jste uložili do systému. Pro tuto první část budeme pracovat se vším, co se týká dotazů (seznam, filtr, stránkování, řazení), ve druhé části budeme pracovat s tvorbou, úpravou a odstraněním záznamů.

Ve své době jsme již udělali tutoriál k vytvoření inamic tras s AngularJS Ngroute. Dnes se tomu naplno věnujeme jinými způsoby. Mělo by být také objasněno, že je vhodné mít Znalosti AngularJSProtože některé detaily tohoto rámce nebudou zcela vysvětleny, je také doporučeno (není povinné) mít v našem systému nainstalován GIT, NPM, protože s nimi v tomto tutoriálu budeme pracovat.

Vytváření projektu

Pojďme nejprve zorganizovat náš projekt pomocí npm, git a bower. Vytvořte adresář projektu s názvem table-angular, poté v projektu použijte příkaz `git init` k vytvoření úložiště a poté pomocí příkazu` npm init` vytvořte soubor package.json.

Náš webový server nainstalujeme příkazem `npm install --save-dev express`. Po instalaci vytvoříme soubor s názvem server.js

 var express = require ('expres'); var aplikace = express (); var port = Číslo (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('Aplikace spuštěna na http: // localhost:' + port);}); 

Nyní spustíme příkaz (Chcete -li nainstalovat altánek):

 npm install --save-dev bower

Uvnitř kořenového adresáře vytvoříme další s názvem public, na veřejnosti vytvoříme soubor index.html. Poté vytvoříme adresář uvnitř public nazvaný aktiva, uvnitř tohoto adresáře vytvoříme další s názvem js a v něm vytvoříme soubory app.js, controller.js, services.js Y filtry.js. Poté vytvoříme adresář s názvem css a v rámci něj vytvoříme soubor s názvem main.css

Náš projekt zatím probíhá následovně:

Pokračujeme v používání našich knihoven. V tomto případě použijeme bower, použijeme úhlové a nadační knihovny, abychom dali našemu pohledu trochu stylu. Připojíme také knihovnu s názvem angular-utils-pagination, která nám v našem projektu poskytne funkčnost při stránkování. Před instalací těchto knihoven vytvoříme v našem kořenovém adresáři soubor s názvem .bowerrc, který má za úkol informovat Bower, kam tyto knihovny uložit.

Další informace o každé z knihoven, které budeme používat:

.Bowerrc kód

 {"adresář": "public / assets / bower_components"}

K instalaci knihoven použijeme příkazy:

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

Mělo by být objasněno, že nadace pracuje s jquery a jsou staženy, když používáme bower, ale pro náš projekt je nebudeme používat, což je můžeme vynechat, v mém případě je odstraním z adresáře bower_components.

To je to, co jsme zatím vytvořili:

Nyní předáme kódování kontingenční tabulky 😁, začneme indexem.html, připojíme všechny potřebné knihovny.

 Kontingenční tabulka s úhlovým JS 

V controller.js vytvoříme řadič s názvem TableController, který bude volán z index.html

Kód Controller.js

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

Pro filter.js zatím vytváříme pouze instanci modulu:

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

Totéž děláme s services.js, jen vytvoříme instanci:

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

Nakonec zavoláme všechny moduly z app.js.

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

A díky tomu můžeme provést první spuštění naší aplikace pomocí příkazu:

 `uzel server.js`

Pokud na kartě konzoly použijeme nástroj pro vývojáře prohlížeče, můžeme ověřit, že bylo vytištěno slovo Table Controller, což znamená, že vše, co jsme dosud vytvořili, funguje správně.

Přidání služeb

Začneme vytvořením našich služeb, které budeme používat. V tomto kurzu se nechystáme připojit k žádnému vzdálenému serveru, takže se rozhodneme uložit záznamy do našich souborů javascript. Použijeme tři typy registrů. Hry, články a uživatelé, kteří nesdílejí stejná pole, budou každá simulovat nezávislou službu, jako by pocházela z REST API, vše ve formátu JSON. Pokud chcete, můžete k těmto třem typům přidat další pole nebo přidat nové.
Kód Services.js

 .factory ('Users', function () {return {get: function () {var data = [{id: 1, first name: 'Juan', last name: 'Perez'}, {id: 5, first name : 'Ana María', příjmení: 'Garcia'}, {id: 15, křestní jméno: 'Alejandro', příjmení: 'Magno'}, {id: 18, křestní jméno: 'Andrea', příjmení: ' L '}, {id: 19, křestní jméno:' Pablo ', příjmení:' Gutierrez '}, {id: 8, křestní jméno:' Ana ', příjmení:' H '},]; vrátit data;} }}) .factory ('Články', funkce () {return {get: function () {var data = [{id: 20, title: 'Můj první článek', shrnutí: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. '}, {id: 21, title:' Můj druhý článek ', shrnutí:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}, {Id: 22, title:' My third article ', summary:' Lorem ipsum pain sit amet, consectetur adipisicing elit. '}]; Return data;}}}) .factory (' Games ', function () {return {get: function () {var data = [{id: 1, title : 'Metroid', žánr: 'Action'}, {id: 2, title: 'Zelda', žánr: 'Adventure'}, {id: 3, title: 'Golden Eye', žánr: 'S hooter '}, {id: 4, title:' Fifa 2016 ', žánr:' Sports '},]; vrátit data; }}}) 

Připojíme také další službu s názvem Call, která bude mít na starosti volání různých dat (uživatelé, hry a články).

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

A nakonec vytvoříme a služba s názvem Persistence kdo bude mít na starosti to CRUD našich informací. Jak jsem již řekl na začátku, v této první části tutoriálu budeme dělat pouze dotazovací funkce, takže bude použita pouze funkce seznamu, v druhé části použijeme zbytek.

 .factory ('Persistence', function (Call) {return {add: function (type, data) {var Obj = Call.get (type); Obj.push (data);}, list: function (type) {return Call.get (typ);}, aktualizace: funkce (typ, index, data) {var Obj = Call.get (typ); návrat Obj [index] = data;}, get: funkce (typ, index) {var Obj = Call.get (typ); návrat Obj [index];}, zničení: funkce (typ, index) {var Obj = Call.get (typ); návrat Obj.splice (index, 1);}};} ) 

Musíme přidat službu, která bude zpracovávat všechny objekty v kontingenční tabulce.

 .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, writeable: true, configurable: true, enumerable: true});},}}) 

Přidání služby

Vytvoření ovladače

 angular.module ('table.controller', []) .controller ('TableController', funkce ($ scope, $ filter, ObjectService, Persistence) {ITEM_PER_PAGE = 5; $ scope.types = [{hodnota: 'Uživatelé', label: 'Users'}, {value: 'articles', label: 'articles'}, {value: 'Games', label: 'Games'}]; $ scope.data = []; $ scope.head = [ ]; // Datový typ $ scope.changeData = funkce () {$ 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 ();}}; // Filtr $ scope.changeFilterTo = funkce () {$ scope.search = ObjectService.createParamObject ({} , $ scope.selectFilter, '');}; // ***** podle $ scope.orderBy = {pedicate: 'name', reverse: false}; $ scope. ***** = funkce (predikát) {$ scope.orderBy.reverse =! $ scope.orderB y.zpět; $ scope.orderBy.predicate = predikát; }; // Stránkování $ scope.limit = {per_page: ITEM_PER_PAGE}; // Výchozí $ scope.type = $ scope.types [0]; $ scope.changeData (); });

Vysvětlíme kód, který jsme právě přidali:

• ITEM_PER_PAGE: Bude mít na starosti správu limitu záznamů, které mají být zobrazeny na stránce, v tomto případě jsme uvedli, že jich je 5 na stránku, když existuje více než 5 záznamů, objeví se pager, který nás přesune, je nahoře na vás umístit, kolik jich chcete současně zobrazit.

• $ scope.types: Obsahuje pole s daty každého typu dat, se kterými budeme v tabulce manipulovat, funguje ve spojení s changeData.

• $ scope.data: Bude mít na starosti manipulaci s informacemi, které mu byly v té době přiřazeny, a vykreslování v dynamické tabulce.

• $ scope.head: Bude to záhlaví tabulky.

Funkce:

• $ scope.changeData: Bude mít na starosti změnu dat, která v tuto chvíli máme v tabulce.

• $ scope.changeFilterTo: Jeho funkcí bude při filtrování informací vložit konkrétní typ filtru. Například: Typy filtrů záznamů uživatelů budou jméno a příjmení.

• $ rozsah. *****: Slouží k uspořádání dat podle sloupců tabulek. Tato funkce bude přiřazena k záhlaví sloupců.

Index.html kód

DataFiltrFiltrovat podle {{filtr [1] [$ index]}}
 {{položka}} 
 
 

 
 
 Upravit Odstranit 
 
{{položka}}
 

 

Přidáme filtr, který připojí nové pole k voliči typu filtru, toto pole bude použít filtr na jakýkoli sloupec naší tabulky, v souhrnu využívá prostor, kde se nachází pole ID a je přiřazena tato nová vlastnost.

Kód Filters.js

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

Přidáme náš kód CSS, abychom přidali nějaké styly do sloupců tabulek a do pageru. Musíme zdůraznit něco zajímavého v CSS, skryjme sloupec id záznamů protože to není důležité pro jeho vizualizaci pro uživatele. Do sloupců přidáme „ikony“, které budou indikovat, kdy sloupec třídí informace vzestupně nebo sestupně.

Main.css kód

 vyberte možnost {text-transform: capitalize; } ul. stránkování {šířka: 25%; okraj: 0 auto; } tabulka {šířka: 100%; } tabulka tr {text-transformace: velká písmena; } tabulka tr th: nth-child (1) {šířka: 150px; } tabulka tr th: nth-child (2), tabulka td: nth-child (2) {display: none; } th. ***** {cursor: pointer; } i.up: before, i.down: before {content: ''; } i.up {nahoru: -5px; transform: rotate (90deg); zobrazení: inline-block; poloha: relativní; } i.down {transform: rotate (90deg); zobrazení: inline-block; nahoře: -5px; poloha: relativní; } tr> td a {margin-left: 5px; }

Znovu aktualizujeme náš prohlížeč a nyní vidíme následující:

ZVĚTŠIT

[color = # a9a9a9] Kliknutím na obrázek zvětšíte [/ color]

Pojďme si trochu vysvětlit, co je v rozhraní. Máme volič s názvem data. To bude objednáno changeData extrahujte informace, do kterých jsme uložili services.js. Pole filtru má na starosti zobrazování konkrétních informací, které indikujeme, když do něj zapisujeme, a "filtrovat podle" má na starosti upřesnění, podle kterého sloupce chceme filtrovat, ve výchozím nastavení filtruje podle VŠECH polí, můžete také klikněte na sloupce a uspořádejte je sestupně a vzestupně. Proveďte různé testy z vaší strany. Pole pro úpravy a odstranění nejsou prozatím funkční.

ZVĚTŠIT

[color = # a9a9a9] Kliknutím na obrázek zvětšíte [/ color]

Pravidla, která je třeba mít na paměti
Jako všechno je třeba dodržovat přísná pravidla, aby náš modul dynamických tabulek fungoval co nejlépe. Pole ID musíme mít vždy, i když je to téměř zřejmé, když manipulujeme se záznamy z naší databáze, ale nechybí, že nás tato praxe někdy může obejít. Toto pole je také umístěno na prvním místě v každém záznamu JSON.

Prozatím čeká na vyřízení jak manipulovat s daty, která pocházejí ze seznamu. Například pole pohlaví v datech Hry by ve skutečnosti bylo cizí ID z jiné tabulky (když použijeme koncept vztahu mezi entitami), naformátujte číselná pole a data, vytvořte také samostatná záhlaví a nezávisí na názvu pole, které pochází přímo z registru. To vše uvidíme v části 2 tutoriálu, když potřebujeme zaznamenat a aktualizovat data. Dávejte pozor na novinky.

Dokončili jsme naši první část kontingenční tabulky. Uvidíte, jak moc vám to bude sloužit ve vašich projektech Angular a nebudete muset vytvářet různé tabulky pro manipulaci s různými daty, pokud ne, můžete vše centralizovat pomocí jediného modulu.

Stáhněte si naplánovanou ukázku table-angular.zip 6,63 MB 1472 stažení