Byg en materialet design app med vinkel 2

Vinkelmateriale er en UI-komponentramme, der implementerer Googles materielle designspecifikation for vinkel 2 - den nye, hurtigere implementering af vinkel, skrevet i typeskrift. Selvom det stadig er i alfa, giver vinkelmateriale allerede et sæt genanvendelige og tilgængelige UI-komponenter baseret på materiale design.

Vinkel 2 selv er designet til brug på tværs af alle platforme (web, mobil og desktop), og har mange nye teknologier forbundet med det. På JavaScript-niveauet har vi den ekstra syntaks for Ecmascript 2015 (ES6), Typing og Interface Support fra Typscript, sammen med dekoratører fra metadata refleksion API. Det bruger observerbare fra det reaktive udvidelsesbibliotek til at styre sekvenser af hændelser på en funktionel programmeringsvej. Den bruger zoner til at indkapslere og aflytte asynkron aktivitet for at tilvejebringe en form for tråd-lokalopbevaring, hvilket gør det muligt for vinkel til automatisk at reagere på dataændringer i asynkron hændelser for at opretholde databindinger. Endelig håndteres modullastning af systemjs.

I denne tutorial vil vi bruge vinkel 2 for at skabe en simpel to-do app med nogle signaturmateriale designelementer. Få kildefilerne her .

FÅ SET UP.

Opsætning af det oprindelige miljø kan være svært. Der er AN. Angular2-Seed. tilgængelig, såvel som en vinkel2-starter. . Men der er noget endnu bedre: med vinkel-cli. Du kan konfigurere dit vinkel 2-projekt med en enkelt kommando.

Ikke alene vil det tage sig af opsætningen for alle de teknologier, jeg nævnte i sidste afsnit (via node og NPM), vil det også tilføje i stilladser til Jasmine-enhedstest, protractor end-to-end-test, plus Tslint-test og CODELYZER statisk kodeanalyse af vinkel 2 typeskript. Selvom du ikke behøver at bruge alle disse, skal du helt sikkert. Det er så nemt at bruge, du vil spekulere på, hvordan du nogensinde har fået sammen uden det.

Vinkel CLI er tilgængelig som en NPM-pakke, så du skal installere node og NPM globalt på din maskine ved hjælp af NPM Installer -G Angular-CLI . Nu opret en ny vinkel 2 app med ng nye materiale2-do . Du bliver nødt til at vente lidt, for efter at det genererer de nødvendige filer, initialiserer det en git repo og gør en NPM Install. at downloade alle de nødvendige moduler til node_modules / . Tag et kig på Package.json. og blive fortrolig med modulerne og scripts der.

Du har nu oprettet en ny vinkel 2 applikation, der følger den officielle bedste praksis.

Tilføj materiale design.

Standardappen ved intet om materialet design (et tilsyn, jeg er sikker på), så vi skal tilføje det selv.

Der er en liste over udgivne vinkel 2 materielle designpakker i @ Angular2-materiale bibliotek. I dette eksempel skal vi bruge Core. (Påkrævet for alle vinkelmateriale 2 apps), såvel som knap Vi kort Vi afkrydsningsfeltet Vi ikon. Vi input. Vi liste og Toolbar. :

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

For leverandørbundtet til arbejde skal vi tilføje @ Angular2-materiale / ** / * til arrayet af VendornPmFiles. i vinkel-cli-build.js . Vi skal også tilføje stien til @ Angular2-materiale til Kort objekt:

 CONST MAP: ANVENDELSE = {
  '@ Angular2-Materiale': 'Vendor / @ Angular2-Materiale'
}; 

Lad systemjs vide, hvordan man behandler nye moduler ved at pege på de vigtigste filer af hver af pakkerne:

 CONST-pakker: Any = {};

// Sæt navnene på nogen af ​​dine materialekomponenter her
CONST MATERIALPKGS: String [] = ['Core', 'knappen', 'kort', 'afkrydsningsfelt',
'ikon', 'input', 'liste', 'værktøjslinje'];

materialpkgs.foreach ((pkg) = & gt; {
  Pakker [`@ Angular2-Materiale / $ {PKG}`] = {Main: `$ {pkg} .js`};
}); 

Nu er det tid til at indlæse Material Design-ikonet skrifttype i af src / index.html. . Enhver skrifttype vil fungere, men vi bruger standardmaterialets designikoner:

 & lt; link href = "https://fonts.googleapis.com/icon?family=Material+icons" rel = "stylesheet" & gt; 

Opret en MD DIALOG

Vi kan nu arbejde med materiale design i vores til-do app. En af de komponenter, der mangler fra vinkel 2 materiale design, er en hurtig eller dialog, så for vores første opgave vil vi lave en!

Lad os oprette en ny komponent ved hjælp af et materielt designkort, en værktøjslinje, en indgang og et par knapper. I SRC / APP. mappe af din repo, type ng generere komponentdialog . Dette skaber en ny DialogComponent. i SRC / APP / DIALOG , og tilføjer en tønde til System-config.ts. Så Systemjs ved, hvordan man læser det.

Hvis du ser på det genereret Dialog.Component.ts. Fil, du vil se den første linje er: Import {Component, OnInit} fra '@ vinkel / kerne'; . Komponent er en af ​​de vigtigste byggesten af ​​vinkel, og Oninit. er en af ​​de grænseflader, det redskaber. For at få adgang til kommunikation mellem nestede komponenter, samt de ovennævnte materielle designkomponenter, skal vi importere input, Produktion og Eventemitter. fra @ vinkel / kerne; og Mdcard. Vi MdInput. Vi MDToolBar. og MdButton. fra deres tilsvarende moduler i @ Angular2- Materiale. bibliotek.

For at gøre disse materialekomponenter, skal vi injicere de direktiver, vores DialogComponent. kræver. Vi vil tilføje følgende direktiver til @Components. Metadata:

 Templateurl: 'Dialog.Component.html',
Direktiver: [MDCard, MDToolbar, MDInput, MDButton],
Styleurls: ['Dialog.Component.css'] 

Vi erklærer derefter en række af @Input. Variabler ( Oktext. Vi canceltext. og så videre), der giver os mulighed for at definere indholdet af dialogen. Vi skal også tilføje en @Produktion Emitter, der giver os mulighed for at udløse en funktion med en værdi i moderkomponenten, når dialogen er lukket.

Nu kan vi erstatte den genererede konstruktør i Dialog.Component.ts. Med følgende kode:

 Konstruktør () {
 This.OkText = 'OK';
 this.canceltext = 'annullere';
}

emitvalue (værdi) {
 dette.Valueemitted.emit (værdi);
} 

Såvel som at bruge @Input. Variabler inde i vores DialogComponent. indenfor Dialog.Component.html. skabelon, The. MD-input. Tillader os at acceptere input fra brugeren:

 & lt; md-input class = "fuld bredde" [pladsholder] = "pladsholder"
        [(ngmodel)] = "værdi" #dialoginput
        (keyup.enter) = "emitvalue (værdi)"
        (Keyup.escape) = "Emitvalue (null)" & gt; / lt; / md-input & gt; 

Det MD-knapper. Tillad brugeren at klikke på 'OK', 'Annuller' eller hvad du beslutter dig for at mærke disse knapper:

 & LT; Button MD-knappen (klik) = "Emitvalue (null)" Color = "Primary" & GT;
  {{canceltExt}}
& lt; / knap & gt;
& lt; knap md-raised-knappen (klik) = "emitvalue (værdi)" farve = "primær" & gt;
  {{Oktext}}
& lt; / knap & gt; 

Bemærk venligst KEPUP. hændelseshåndterere, der tager sig af ting, når indtastet eller escape-tasten trykkes. Disse håndtere er identiske med klik hændelseshåndterer for canceltext. og Oktext. . Escape gør det samme som annullere (Emitvalue (null)) , og rammer Enter vil have det samme resultat som at klikke på OK (emitvalue (værdi)) . Dette giver os mulighed for at bede brugeren om en værdi Via An. MD-input. , og modtag udsendt output.

Vi kan se eksempler på en række materielle designkomponenter: MD-Card. Vi MD-knappen. , og så videre. Vi skal også tilføje nogle CSS i Dialog.Component.css. For at opnå det layout vi ønsker - du kan se hele koden i den medfølgende GitHub repo.

Lad os nu tilføje dette DialogComponent. til Material2-do.component.html. For at se, hvordan det ser ud:

 & lt; app-dialog [titel] = "'Dialog Prompt'"
  [Template] = "'Dette er vores nye materiale designbaserede komponent:'"
  [Placeholder] = "'Indtast tekst her'"
  [Oktext] = "'Ja'"
  [CanceltExt] = "'nej'"
  [værdi] = "'Start tekst'"
  (værdiskabelse) = "log ($ begivenhed)"
  [Showprompt] = "True" & GT;
& lt; / app-dialog & gt; 

Bemærk, at vi har bogstavelige strenge for alle de @Inputs. . Disse kræver, at vi bruger både enkelt- og dobbelt citater, ellers vil vinkelformulere indholdet som et variabelt navn i Komponent omfanget.

Vi har også den udsendte @Produktion . Dette gør dialogen enkel og ekstremt konfigurerbar. De fleste af inputene ville have misligholdt tomme strenge, hvis de udelades.

Lad os ændre Material2Docomponent. . Vi skal importere DialogComponent og erklære det som et direktiv, ellers Material2Docomponent. vil ikke være i stand til at gøre det. Vi vil også tilføje logfunktionen:

 Log (tekst) {
   console.log (tekst);
 } 

Lad os tage et kig på vores håndværk. Du kan tjene appen (standardporten er 4200) ved at køre NPM Run-Script Start , som igen løber ng server . Hvis du åbner konsollen, kan du se, hvad der er logget: Indholdet af indgangen udsendes, når du klikker på 'Ja', og nul udsendes, når du klikker på 'nej'.

Vi er nu klar til at bruge denne nye DialogComponent. at oprette vores til-do app.

Opret hovedappen

Vi skal bruge følgende MD-komponenter til hovedappen: Toolbar. Vi liste Vi Liste-Item. Vi afkrydsningsfeltet Vi knap Vi ikon. Vi ikon-Registry , og dets afhængige, Http_provider. , fra det vinkel HTTP bibliotek. Så disse skal tilføjes til importafsnittet af Material2Docomponent. .

Endnu en gang, for at kunne gøre disse komponenter, skal vi medtage dem i @Components. metadata. Direktiver. array langs med DialogComponent. , som vi netop har tilføjet:

 Direktiver: [MDCard, MDToolbar, MDList, MDListItem, MDCheckbox, MDButton, MDICON, DialogComponent], 

At få adgang til Mdiconregistry. , vi skal injicere det sammen med Http_providers. , via @Components. metadata. udbydere. Array:

 udbydere: [MDICONRegistry, http_providers], 

Nu udnytter vi vores DialogComponent. , tilføjer i tilstrækkelig logik til et simpelt at gøre applikation. Det Tododialog. kaldes for at åbne vores dialog, enten med opgaven at redigere ( at gøre ) Or. nul Hvis vi skaber en ny.

Vi opretter standardvariablerne til en ny opgave, eller hvis vi redigerer en opgave, ændrer vi dem i overensstemmelse hermed. Vi viser derefter DialogComponent. ved at indstille showdialog variabel til sand :

 Tododialog (todo = null) {
    This.okbuttontext = 'Opret opgave';
    this.fieldvalue = '';
    this.editingtodo = todo;
    hvis (todo) {
      dette.fieldvalue = todo.title;
      This.okbuttontext = 'Rediger opgave';
    }
    this.showdialog = true;
  } 

Det UpdateTodo. Funktionen kaldes, når vi ønsker at lukke det. De andre funktioner ( Edittodo. Vi AddTodo. Vi hidedialog. ) Er hjælpermetoder til UpdateTodo. .

 UPDATETETODO (titel) {
    hvis (titel) {
      titel = title.trim ();
      hvis (this.editingtodo) {
        this.edittodo (titel);
      } ellers {
        this.addtodo (titel);
      }
    }
    denne.hidedialog ();
  }

I Material2-do.component.html. Vi har givet vores ansøgning en MD-Toolbar. hvor vi har lagt titlen og en MD-ikon hedder tilføje (som ligner et plus tegn) til vores flydende handlingsknap (FAB), som giver os mulighed for at oprette en ny opgave:

 & LT; Button MD-FAB CLASS = "FAB-ADD" (klik) = "Tododialog ()" & GT;
      & lt; md-icon & gt; Tilføj & md-icon & GT;
    & lt; / knap & gt; 

Vi bruger MD-kort-indhold at holde AN. MD-List. og AN. * ngforholdige at gentage igennem og vise vores Todolist. array som. MD-List-elementer :

 & lt; md-list-element * ngfor = "lad todo af todolist; lad indeks = indeks" & gt; 

MD-afkrydsningsfelt Gør det muligt for os at tjekke varer på vores liste. Og vi har to md-mini-fab Knapper, vi kan bruge til at slette og redigere vores opgave: MD-ikoner DELETE_ORVER og MODE_EDIT :

& lt; knap md-mini-fab (klik) = "Fjern (indeks)" farve = "primær" & gt;
  & lt; md-icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / knap & gt;

& lt; knap md-mini-fab (klik) = "Tododialog (TODO)" Color = "Primary"
        [Deaktiveret] = "Todo.Competed" & GT;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / knap & gt; 

Med lidt CSS forbliver de skjulte, indtil du rollover (eller klik). Du kan se koden i repo.

Fremadrettet

Som vinkelmateriale 2 er stadig i alfa, er der nogle ting, der mangler - især underskriften MD-knappen ripple effekt. Mens der kan bryde ændringer i API'en fremad, er det meget fungerende. Det lever også op til kravet om at have en ligetil API, der ikke forvirrer udviklere, og det er nemt at udnytte til skabelse af flotte applikationer.

Denne artikel blev oprindeligt offentliggjort i udstedelse 284 af netto, verdens bedst sælgende magasin for webdesignere og udviklere. Abonner her .

Relaterede artikler:

• Hvad er nyt i vinkel 4?
• Sådan opbygges en hel side hjemmeside i vinkel
• Byg et data Dashboard med AngularJs