Sestavte aplikaci Design materiálu s úhlovým 2

Úhlový materiál je rámec UI komponenty, který implementuje specifikaci materiálu pro návrh materiálu pro úhlové 2 - nové, rychlejší implementace úhlové, napsané v Sypenti. Ačkoli stále v Alpha, úhlový materiál již poskytuje soubor opakovaně použitelných a dostupných komponent UI na základě materiálového designu.

Samotný úhlový 2 je určen pro použití napříč všemi platformami (web, mobilní a desktop) a má s ním mnoho nových technologií. Na úrovni JavaScriptu máme další syntaxi ECMAScript 2015 (ES6), psaní a rozhraní podporu od strypscript, spolu s dekoratérem z metadatové reflexe API. Používá pozorovatele z knihovny reaktivních rozšíření pro správu sekvencí událostí ve funkčním programovacím způsobem. Používá zóny k zapouzdření a zachycení asynchronní aktivity pro poskytnutí formy lokálního ukládání vláken, což umožňuje úhlovému pro automatickému reagovat na změny dat v asynchronních událostech pro udržení vazeb dat. Konečně, načítání modulu je zpracováváno systémjs.

V tomto tutoriálu použijeme úhlové 2 pro vytvoření jednoduché aplikace s nějakým prvkem návrhu materiálu podpisu. Získejte zde zdrojové soubory .

Zřídit se

Nastavení počátečního prostředí může být obtížné. Tady je Angular2-semeno k dispozici, stejně jako Angular2-startér. . Nicméně, tam je něco ještě lepšího: s úhlové-cli. Projekt úhlového 2 můžete konfigurovat s jediným příkazem.

Nejen, že se postará o instalaci pro všechny technologie, které jsem zmínil v poslední části (přes uzel a NPM), bude také přidat lešení pro testování jasmínových jednotek, testování úhloměru konec testování, plus testování tslint a Codelyezer Statický kód analýza úhlového typu 2 str. I když nemusíte používat všechny tyto, určitě byste měli. Je to tak jednoduché použít, budete se divit, jak jste se někdy dostali bez něj.

Úhlové CLI je k dispozici jako balíček NPM, takže budete muset nainstalovat uzel a NPM globálně na vašem počítači NPM Instalovat -G Angular-Cli . Nyní vytvoříte novou aplikaci úhlové 2 ng nový materiál2-do . Budete muset čekat trochu, protože poté, co generuje potřebné soubory, inicializuje Git repo a dělá NPM Install. stáhnout všechny potřebné moduly node_modules / . Podívejte se na Package.json. a seznámit se s moduly a skripty.

Nyní jste vytvořili novou aplikaci úhlové 2, která následuje oficiální osvědčené postupy.

Přidat materiálový design

Výchozí aplikace neví nic o materiálovém designu (nad dohledem jsem si jistý), takže musíme ji přidat sami.

Existuje seznam publikovaných balíčků pro úhlové 2 materiálové designu v @ Angular2-materiál knihovna. V tomto příkladu se chystáme používat jádro (Vyžaduje se pro všechny aplikace s úhlovým materiálem 2), stejně jako knoflík , Kartu , zaškrtávací políčko , ikona , vstup , seznam a Panel nástrojů :

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

Pro balíček dodavatele do práce, musíme přidat @ angular2-materiál / ** / * na řadu Vendornpmfiles. v Angular-Cli-Build.js . Musíme také přidat cestu @ Angular2-materiál na Mapy objekt:

 Mapa CONST: ALL = {
  '@ angular2-materiál': "prodejce / @ anglar2-materiál"
}; 

Nechte systemjs vědět, jak zpracovávat nové moduly tím, že ukazuje na hlavní soubory každého z balíčků:

 CONST balíčky: libovolný = {};

// uveďte názvy některého z vašich materiálových komponent
CONST Materialspkgs: String [] = ['Core', 'Button', 'Card', 'Zaškrtněte políčko',
'Icon', 'vstup', 'seznam', 'Toolbar'];

materiálspkgs.Foreach ((pkg) = & gt; {
  Balíčky [`@ Angular2-materiál / $ {pkg}`] = {Hlavní: `$ {pkg} .js`};
}); 

Nyní je čas načíst ikonu návrhu materiálu písmo v z SRC / index.html. . Každý písmo bude fungovat, ale používáme standardní ikony návrhu materiálu:

 & lt; link href = "https://fonts.googleapis.com/icon?family=materií+icons" Rel = "Stylesheet" & gt; 

Vytvořte dialog MD

Nyní můžeme pracovat s materiálovým designem v naší aplikaci. Jeden z komponent v současné době chybí v úhlovém 2 materiálu designu, je rychlé nebo dialogové okno, takže pro náš první úkol uděláme jeden!

Vytvořme novou komponentu pomocí karty designu materiálu, panelu nástrojů, vstupu a pár tlačítek. V SRC / APP. Složka vašich repo, typ NG generovat dialogové okno . To generuje nový Dialogcomponent v SRC / APP / DIALOG a přidává barel System-config.ts. Takže Systemjs ví, jak ji načíst.

Pokud se podíváte na generované Dialog.Component.ts. soubor, uvidíte první řádek: Import {komponenty, onInit} z '@ úhlové / jádro'; . Komponent je jedním z hlavních stavebních bloků úhlů a Oninit je jedním z rozhraní, kterou implementuje. Aby však měly mít přístup k komunikaci mezi vnořenými komponenty, jakož i výše uvedených konstrukčních složek materiálu, musíme importovat vstup, Výstup a Eventuter z @ úhlové / jádro; a Mdcard. , Mdinput. , Mdtoolbar. a Mdbutton. z jejich odpovídajících modulů v @ Angular2- materiál knihovna.

Chcete-li tyto materiální komponenty poskytnout, musíme vstřikovat směrnice Dialogcomponent vyžaduje. Do té doby přidáme následující směrnice @Components. METADATA:

 Templateurl: 'Dialog.component.html',
Směrnice: [MDCard, Mdtoolbar, mdinput, mdbutton],
Styleurls: ['Dialog.component.css'] 

Pak deklarujeme řadu @Vstup proměnné ( Oktext. , Cancelext. a tak dále), které nám umožňují definovat obsah dialogu. Musíme také přidat jednu @Výstup Emitor, který nám umožňuje spouštět funkci s hodnotou v nadřazené komponenty, když je dialog zavřený.

Nyní můžeme nahradit generovaný konstruktor v Dialog.Component.ts. S následujícím kódem:

 Konstruktor () {
 Tento.OKTEXT = 'OK';
 tento.canceltext = 'Zrušit';
}

emitvalue (hodnota) {
 This.Valueemited.emit (hodnota);
} 

Stejně jako použití @Vstup Proměnné uvnitř našeho Dialogcomponent v rámci Dialog.component.html. Šablona ,. MD-INPUT Umožňuje nám přijímat vstup od uživatele:

 & lt, md-input třídy = "full-width" [zástupný symbol] = "zástupný symbol"
        [(ngmodel)] = "hodnota" #dialogPut
        (Keyup.Enter) = "EMITVALUE (hodnota)"
        (Keyup.escape) = "emitvalue (null)" & gt; & lt; / md-input & gt; 

. \ T MD-tlačítka Umožněte uživateli kliknout na 'OK', 'Cancel' nebo cokoliv, co se rozhodnete označit tato tlačítka:

Všimněte si klesající Manipulátory událostí, které se postarají o věci, když je stisknuto tlačítko Enter nebo Escape. Tyto manipulátory jsou totožné s kliknutí Manipulátory událostí Cancelext. a Oktext. . Útěk dělá to samé jako zrušení (emitvalue (null)) a bít Enter bude mít stejný výsledek jako kliknutím na tlačítko OK (emitvalue (hodnota)) . To nám umožňuje vyzvat uživatele hodnota přes A. MD-INPUT a přijímat emitovaný výstup.

Můžeme vidět příklady řady dílů materiálových konstrukcí: md-card. , MD-Button. , a tak dále. Musíme také přidat některé CSS Dialog.Component.css. Aby se dosáhlo rozvržení, které si přejeme - můžete zobrazit celý kód v doprovodu GitHub repo.

Přidejme to Dialogcomponent na Material2-do.component.html. Chcete-li zjistit, jak to vypadá:

 & lt, app-dialog [title] = "''
  [Šablona] = "'Toto je naše nová složka založená na materiálu:'"
  [Zástupný symbol] = "'Zadejte text zde'"
  [oktext] = "'Ano'"
  [Cancelext] = "'ne'"
  [Value] = "'Spuštění textu'
  (ValueemAted) = "log ($ událost)"
  [showprompt] = "true" & gt;
& lt; / app-dialog & gt; 

Všimněte si, že máme doslovné struny pro všechny @Inputs. . Ty vyžadují použití jednoduchých i dvojitých uvozovek, jinak by úhlová interpretovala obsah jako název proměnné v Komponent rozsah.

Máme také ten emitovaný @Výstup . Díky tomu je dialog jednoduchý a velmi konfigurovatelný. Většina vstupů by byla v případě vynechána prázdným řetězcem.

Upravme se Materiál2docomponentní . Musíme importovat Dialogcomponent a prohlásit jej jako směrnici, jinak Materiál2docomponentní nebude moci učinit. Přidáme také funkci protokolu:

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

Podívejme se na naše práce. Můžete sloužit aplikaci (výchozí port je 4200) spuštěním NPM Run-Script Start , což zase běží NG Server. . Pokud otevřete konzolu, můžete vidět, co je zaznamenáno: Obsah vstupu je emitován, když kliknete na tlačítko "Ano" a nula je emitován, když kliknete na 'ne'.

Jsme nyní připraveni použít tento nový Dialogcomponent vytvořit naši aplikaci.

Vytvořte hlavní aplikaci

Pro hlavní aplikaci použijeme následující komponenty MD: Panel nástrojů , seznam , Seznam-položka , zaškrtávací políčko , knoflík , ikona , icon-registr. \ t a jeho závislé, Http_provider. , z úhlové knihovny HTTP. Takže musí být přidány do části importu Materiál2docomponentní .

Opět, aby bylo možné tyto komponenty poskytnout, musíme je zahrnout do @Components. metadata směrnice pole spolu s. \ t Dialogcomponent , které jsme právě přidali:

 Směrnice: [MDCard, Mdtoolbar, mdlist, mdlisticitem, mdcheckbox, mdbutton, mdicon, digitální, 

Získat přístup k Mdiconregistry Musíme ji aplikovat, spolu s Http_providers. přes. @Components. metadata poskytovatelé Pole:

 Poskytovatelé: [mdiconregistry, http_providers], 

Nyní využijeme naše Dialogcomponent Přidání dostatek logiky pro jednoduchou aplikaci. . \ T tododialog. je volán, aby otevřel náš dialog, buď s úlohem upravit ( dělat ) Or. nula Pokud vytváříme nový.

Nastavili jsme výchozí proměnné pro nový úkol, nebo pokud upravujeme úkol místo toho je měníme odpovídajícím způsobem. Pak ukazujeme Dialogcomponent nastavením. showdialog. Proměnná to skutečný :

 Tododialog (todo = null) {
    Tento.okbuttontext = 'Vytvořit úkol';
    this.fieldvalue = '';
    Tento.editingtodo = todo;
    Pokud (todo) {
      this.fieldvalue = todo.title;
      Tento.okbuttontext = 'Úprava úlohy';
    }
    this.showdialog = true;
  } 

. \ T UpdateTodo. Funkce se nazývá, když ji přejeme zavřít. Další funkce ( Edittodo. , addtodo. , hideialog. ) Jsou metody pomocníka UpdateTodo. .

 UpdateTodo (název) {
    IF (název) {
      název = title.trim ();
      IF (this.editingtodo) {
        tento.edittodo (název);
      } else {
        tento.addtodo (název);
      }
    }
    This.hidedialog ();
  }

v Material2-do.component.html. Dali jsme naši aplikaci MD-Toolbar. kde jsme uvedli titul, a MD-ICON volala přidat (který vypadá jako znaménko plus) pro naši plovoucí akční tlačítko (FAB), což nám umožňuje vytvořit nový úkol:

 Tlačítko MD-Fab Class = "Fab-add" (klikněte) = "tododialog ()" & gt;
      & lt; md-icon & gt; add & lt; / md-icon & gt;
    & lt; / tlačítko & gt; 

Používáme Obsah MD-CARD držet md-list a A. * NGFOR iterovat a zobrazovat, naše seznam úkolů Array as. MUDristické položky :

 & lt, md-list-item * ngfor = "Nechte to todolisty; nechat index = index" & gt; 

MD-zaškrtávací políčko Umožňuje nám zaškrtnout položky v našem seznamu. A máme dva md-mini-fab Tlačítka můžeme použít k odstranění a úpravě našeho úkolu: MD-Ikony Delete_forever a Mode_edit. :

& lt; tlačítko md-mini-fab (klikněte) = "odstranit (index)" color = "primární" & gt;
  & lt; md-icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / tlačítko & gt;

& lt; tlačítko md-mini-fab (klikněte) = "tododialog (todo)" color = "primární"
        [Zakázáno] = "todo.completed" & gt;
  & lt; md-icon & gt; režim_edit & lt; / md-icon & gt;
& lt; / tlačítko & gt; 

S trochou CSS zůstávají skryty, dokud nebudete převrátit (nebo klikněte). Kód můžete vidět v repo.

Jít vpřed

Vzhledem k tomu, že úhlový materiál 2 je stále v alfa, tam jsou některé věci chybí - zejména podpis md tlačítko zvlnění efekt. Zatímco tam může být porušování změn na API dopředu, je to velmi fungující. To také žije na tvrzení, že má přímočaré API, které nezaměňují vývojáře, a je snadné využít pro vytvoření skvělých pohledávek.

Tento článek byl původně publikován v čísle 284 sítě, nejprodávanější časopis světa pro webové designéry a vývojáře. Přihlásit se zde .

Související články:

• Co je nového v úhlovém 4?
• Jak vytvořit celou stránku webové stránky v úhlově
• Sestavte datový řídicí panel s Angularjs