Vytvorte aplikáciu Material Design s Angular 2

Obrazovky notebookov a telefónov s logom Angular

Angular Material je rámec komponentov používateľského rozhrania, ktorý implementuje špecifikáciu Material Design spoločnosti Google pre Angular 2 - novú a rýchlejšiu implementáciu Angular napísanú v stroji TypeScript. Aj keď je stále v alfa verzii, Angular Material už poskytuje sadu opakovane použiteľných a prístupných komponentov používateľského rozhrania na základe Material Designu.

Samotná Angular 2 je navrhnutá na použitie na všetkých platformách (webová, mobilná aj desktopová) a má s ňou spojených veľa nových technológií. Na úrovni JavaScriptu máme dodatočnú syntax ECMAScript 2015 (ES6), podporu pre písanie a rozhranie z TypeScript, spolu s dekorátormi z Metadata Reflection API. Na správu sekvencií udalostí funkčným programovacím spôsobom využíva pozorovateľné súbory z knižnice Reactive Extensions. Používa zóny na zapuzdrenie a zachytenie asynchrónnej aktivity, aby poskytla formu lokálneho úložiska vlákien, čo umožňuje spoločnosti Angular automaticky reagovať na zmeny údajov v asynchrónnych udalostiach a udržiavať väzby údajov. Načítanie modulu nakoniec vybaví SystemJS.

V tomto tutoriáli použijeme Angular 2 na vytvorenie jednoduchej úlohy s niektorými podpisovými prvkami Material Designu. Zdrojové súbory získate tu .



Pripravte sa

Nastavenie počiatočného prostredia môže byť ťažké. Existuje uhlové2-semeno k dispozícii, ako aj uhlový2-štartér . Existuje však ešte niečo lepšie: s uhlové-cli svoj projekt Angular 2 môžete nakonfigurovať jediným príkazom.

Nielenže sa postará o nastavenie všetkých technológií, ktoré som spomenul v poslednej časti (cez Node a npm), ale tiež pridá do lešenia pre testovanie jednotiek Jasmine, end-to-end testovanie Protractora plus testovanie TSLint a codelyzer analýza statického kódu Angular 2 TypeScript. Aj keď nemusíte používať všetky tieto možnosti, mali by ste určite. Používanie je také jednoduché, budete sa diviť, ako ste sa bez neho zaobišli.

Uhlové CLI je k dispozícii ako balík npm, takže budete musieť Node a npm globálne nainštalovať na svoj počítač pomocou npm install -g angular-cli . Teraz vytvorte novú aplikáciu Angular 2 s nového materiálu2-do . Budete si musieť trochu počkať, pretože potom, čo vygeneruje potrebné súbory, inicializuje Git repo a urobí npm nainštalovať na stiahnutie všetkých potrebných modulov do node_modules / . Pozrite sa na balíček.json a oboznámte sa s tam uvedenými modulmi a skriptmi.

Teraz ste vytvorili novú aplikáciu Angular 2, ktorá dodržiava oficiálne osvedčené postupy.

Pridajte materiálový dizajn

Predvolená aplikácia nevie nič o materiálovom dizajne (som si istá, že som si to prehliadla), takže si ju musíme pridať sami.

V zozname je zoznam publikovaných balíkov Angular 2 Material Design @ angular2-material knižnica. V tomto príklade použijeme jadro (požadované pre všetky aplikácie Angular Material 2), ako aj tlačidlo , karta , začiarkavacie políčko , ikona , vstup , zoznam a panel nástrojov :

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

Aby balíček dodávateľov fungoval, musíme pridať @ angular2-material / ** / * do poľa vendorNpmFiles v angular-cli-build.js . Musíme tiež pridať cestu k @ angular2-material do mapy objekt:

const map: any = { '@angular2-material': 'vendor/@angular2-material' };

Dajte SystemJS vedieť, ako spracovať nové moduly, a to nasmerovaním na hlavné súbory každého z balíkov:

const packages:any = {}; // put the names of any of your Material components here const materialPkgs:string[] = ['core','button','card','checkbox', 'icon','input','list','toolbar']; materialPkgs.forEach((pkg) => { packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`}; });

Teraz je čas načítať písmo ikony Material Design do z src / index.html . Fungovať bude akékoľvek písmo, ale používame štandardné ikony Material Design:

povrch pre 3 vs 4

Vytvorte dialógové okno MD

Teraz môžeme v našej aplikácii úloh pracovať s materiálovým dizajnom. Jednou z komponentov, ktorá momentálne v Angular 2 Material Design chýba, je výzva alebo dialógové okno, takže pre našu prvú úlohu si jednu vyrobíme!

Vytvorme nový komponent pomocou karty Material Design, panela s nástrojmi, vstupu a niekoľkých tlačidiel. V src / app priečinok vášho repo, napíšte ng generovať dialógové okno súčasti . Týmto sa generuje nový DialogComponent v src / app / dialog , a pridáva hlaveň k system-config.ts takže SystemJS vie, ako ho načítať.

Ak sa pozriete na vygenerované dialog.component.ts súboru, uvidíte, že prvý riadok je: importovať {komponent, OnInit} od „@ hranatý / jadro“; . Komponent je jedným z hlavných stavebných kameňov Angular, a OnInit je jedno z rozhraní, ktoré implementuje. Aby sme však mali prístup ku komunikácii medzi vnorenými komponentmi, ako aj vyššie uvedenými komponentmi Material Design, musíme importovať Input, Výkon a Vysielač udalostí od @ hranatý / jadro; a MdCard , MdInput , MdToolbar a MdButton z ich príslušných modulov v @ angular2- materiál knižnica.

Na vykreslenie týchto materiálových komponentov musíme vložiť naše smernice DialogComponent vyžaduje. Do smernice pridáme nasledujúce smernice @ Komponenty metadáta:

templateUrl: 'dialog.component.html', directives: [MdCard, MdToolbar, MdInput, MdButton], styleUrls: ['dialog.component.css']

Potom deklarujeme počet @Input premenné ( okText , cancelText a tak ďalej), ktoré nám umožňujú definovať obsah dialógového okna. Musíme tiež jednu pridať @Výkon emitor, ktorý nám umožňuje spustiť funkciu s hodnotou v nadradenej súčasti, keď je dialóg zatvorený.

Teraz môžeme nahradiť vygenerovaný konštruktor v dialog.component.ts s nasledujúcim kódom:

constructor() { this.okText = 'OK'; this.cancelText = 'Cancel'; } emitValue(value) { this.valueEmitted.emit(value); }

Rovnako ako použitie @Input premenné v našom DialogComponent v rámci dialog.component.html šablóna, md-vstup umožňuje nám prijímať vstupy od používateľov:

The md-tlačidlá umožnite používateľovi kliknúť na „OK“, „Zrušiť“ alebo na čokoľvek, čo sa rozhodnete označiť týmito tlačidlami:

{{cancelText}} {{okText}}

Všimnite si keyup obsluhy udalostí, ktorí sa starajú o veci po stlačení klávesu Enter alebo Escape. Tieto manipulátory sú identické s kliknite obsluhy udalostí pre cancelText a okText . Útek robí to isté ako zrušenie (emitValue (null)) a stlačenie klávesu Enter bude mať rovnaký výsledok ako kliknutie na tlačidlo OK (emitValue (hodnota)) . To nám umožňuje vyzvať používateľa na a hodnotu cez md-vstup a prijímať emitovaný výstup.

Môžeme vidieť príklady množstva komponentov Material Design: karta md , tlačidlo md , a tak ďalej. Musíme tiež pridať niekoľko CSS dialog.component.css aby sme dosiahli požadované rozloženie - celý kód si môžete pozrieť v sprievodnom repozitári GitHub.

Teraz pridajme toto DialogComponent do material2-do.component.html ako to vyzerá:

Všimnite si, že máme doslova reťazce pre všetky súbory @Vstupy . Vyžadujú si od nás použitie jednoduchých aj dvojitých úvodzoviek, inak by Angular interpretoval obsah ako názov premennej v Komponent rozsah.

Máme aj ten emitovaný @Výkon . Vďaka tomu je dialóg jednoduchý a mimoriadne konfigurovateľný. Väčšina vstupov by v prípade vynechania predvolene obsahovala prázdne reťazce.

Poďme to upraviť Material2DoComponent . Musíme importovať DialogComponent a deklarovať to ako smernicu, inak Material2DoComponent nebude môcť vykresliť. Pridáme aj funkciu log:

log(text) { console.log(text); }

Poďme sa pozrieť na našu ručnú prácu. Aplikáciu (štandardný port je 4200) môžete obsluhovať spustením npm spustenie spusteného skriptu , ktorý zase beží servera . Ak otvoríte konzolu, uvidíte, čo sa zaznamenáva: obsah vstupu sa vydá po kliknutí na „Áno“ a nulový sa vydá, keď kliknete na „Nie“.

Teraz sme pripravení použiť túto novú DialogComponent aby sme vytvorili našu aplikáciu úloh.

Vytvorte hlavnú aplikáciu

Pre hlavnú aplikáciu použijeme nasledujúce komponenty MD: panel nástrojov , zoznam , položka zoznamu , začiarkavacie políčko , tlačidlo , ikona , ikona-register a jeho závislé, HTTP_PROVIDER , z knižnice Angular HTTP. Tieto je teda potrebné pridať do sekcie importu z Material2DoComponent .

Aby sme tieto komponenty mohli vykresliť, musíme ich znova zahrnúť do súboru @ Komponenty metadáta smernice pole spolu s DialogComponent , ktoré sme práve pridali:

directives: [MdCard, MdToolbar, MdList, MdListItem, MdCheckbox, MdButton, MdIcon, DialogComponent],

Ak chcete získať prístup k MdIconRegistry , musíme si ho podať spolu s HTTP_PROVIDERS prostredníctvom @ Komponenty metadáta poskytovatelia pole:

providers: [MdIconRegistry, HTTP_PROVIDERS],

Teraz využívame naše DialogComponent , čo dodáva dostatok logiky pre jednoduchú aplikáciu. The todoDialog je vyvolaný na otvorenie nášho dialógu, buď s úlohou upraviť ( všetko ) alebo nulový ak vytvárame nový.

Nastavili sme predvolené premenné pre novú úlohu, alebo ak namiesto toho upravujeme úlohu, zodpovedajúcim spôsobom ich zmeníme. Potom ukážeme DialogComponent nastavením showDialog premenná na pravda :

todoDialog(todo = null) { this.okButtonText = 'Create task'; this.fieldValue = ''; this.editingTodo = todo; if (todo) { this.fieldValue = todo.title; this.okButtonText = 'Edit task'; } this.showDialog = true; }

The updateTodo funkcia sa volá, keď ju chceme zavrieť. Ostatné funkcie ( editTodo , addTodo , skryťDialog ) sú pomocné metódy pre updateTodo .

updateTodo(title) { if (title) { title = title.trim(); if (this.editingTodo) { this.editTodo(title); } else { this.addTodo(title); } } this.hideDialog(); }

V material2-do.component.html dali sme našej žiadosti md-panel nástrojov kde sme umiestnili názov a ikona md zavolal pridať (ktoré vyzerá ako znamienko plus) pre naše tlačidlo s pohyblivou akciou (FAB), ktoré nám umožňuje vytvoriť novú úlohu:

add

Používame md-card-content držať md-list a an * ngFor iterovať a zobraziť naše zoznam úloh pole ako md-list-items :

md-začiarkavacie políčko umožňuje nám odškrtnúť položky z nášho zoznamu. A máme dve md-mini-fab tlačidlá, ktoré môžeme použiť na odstránenie a úpravu našej úlohy: md-icons delete_forever a mode_edit :

delete_forever mode_edit

S trochou CSS zostanú skryté, kým neprejdete kurzorom (alebo nekliknete). Kód môžete vidieť v repo.

Napredovať

Pretože Angular Material 2 je stále v alfa verzii, niektoré veci chýbajú - najmä efekt zvlnenia podpisového tlačidla MD. Aj keď v budúcnosti môžu dôjsť k prelomovým zmenám API, je veľmi funkčné. Spĺňa tiež tvrdenie, že má priame API, ktoré vývojárom nepomýli a dá sa ľahko využiť na vytváranie skvelo vyzerajúcich aplikácií.

Tento článok bol pôvodne publikovaný v čísle 284 netu, najpredávanejšieho časopisu na svete pre webových dizajnérov a vývojárov. Prihlásiť sa na odber tu .

Súvisiace články: