Bygg en Material Design App med vinkel 2

Vinket materiale er et ditt komponentramme som implementerer Googles materiale designspesifikasjon for vinkel 2 - den nye, raskere implementeringen av vinkel, skrevet i typekryptering. Selv om det fortsatt er i alfa, gir vinkelmaterialet allerede et sett med gjenbrukbare og tilgjengelige UI-komponenter basert på materialdesign.

Vinkel 2 selv er designet for bruk på tvers av alle plattformer (web, mobil og skrivebord), og har mange nye teknologier forbundet med det. På JavaScript-nivået har vi den ekstra syntaksen av ECMAScript 2015 (ES6), skrive- og grensesnittstøtte fra typekryptering, sammen med dekoratører fra metadata refleksjon API. Den bruker observablere fra de reaktive utvidelsesbiblioteket for å håndtere sekvenser av hendelser på en funksjonell programmeringsvei. Den bruker soner til å inkapslere og avskjære asynkron aktivitet for å gi en form for trådløs lagring, slik at vinkelen kan reagere automatisk på dataendringer i asynkron hendelser for å opprettholde databindinger. Endelig håndteres modullasting av Systemjs.

I denne opplæringen skal vi bruke vinkel 2 for å skape en enkel å-gjøre app med noen signaturmaterialedesignelementer. Få kildefilene her .

Få satt opp

Å sette opp det opprinnelige miljøet kan være vanskelig. Det er en vinkel2-frø tilgjengelig, så vel som en Angular2-starter. . Det er imidlertid noe enda bedre: med Angular-Cli. Du kan konfigurere ditt vinkel 2-prosjekt med en enkelt kommando.

Ikke bare vil det ta vare på oppsettet for alle teknologiene jeg nevnte i den siste delen (Via Node og NPM), vil det også legge til i stillas for Jasmine-enhetstesting, protractor end-to-end testing, pluss tslint testing, og Codelyzer statisk kodeanalyse av vinkel 2 typescript. Selv om du ikke trenger å bruke alle disse, bør du definitivt. Det er så enkelt å bruke, du vil lure på hvordan du noen gang har fått uten det.

Vinkel CLI er tilgjengelig som en NPM-pakke, så du må installere node og npm globalt på maskinen din ved hjelp av NPM Install -G-vinkel-CLI . Opprett nå en ny vinkel 2 app med ng ny materiale2-do . Du må vente litt, fordi etter at den genererer de nødvendige filene, initierer den en git repo og gjør en npm installasjon For å laste ned alle nødvendige moduler til node_moduler / . Ta en titt på pakke.json. og bli kjent med modulene og skriptene der.

Du har nå opprettet en ny vinkel 2 applikasjon som følger den offisielle beste praksis.

Legg til materialdesign

Standardappen vet ingenting om materialdesign (en oversikt jeg er sikker på), så vi må legge det til oss selv.

Det er en liste over publiserte vinkel 2 materialdesignpakker i @ vinkel2-materiale bibliotek. I dette eksemplet skal vi bruke kjerne (Kreves for alle vinkelmaterialer 2 apper), så vel som knapp , kort , avkrysningsboks. , ikon , input. , liste og Verktøylinje :

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

For leverandørbunten til arbeid, må vi legge til @ vinkel2-materiale / ** / * til gruppen av vendornpmfiles. i vinkel-cli-build.js . Vi må også legge til banen til @ vinkel2-materiale til Kart gjenstand:

 CONT Kart: Any = {
  '@ vinkel2-materiale': 'leverandør / @ vinkel2-materiale'
}; 

La Systemjs vite hvordan man behandler nye moduler ved å peke på hovedfilene til hver av pakkene:

 Const Packages: Enhver = {};

// Sett navnene på noen av dine materialkomponenter her
const Materialpkgs: String [] = ['Core', 'knapp', 'CARD', 'CCOINTBOX',
'Ikon', 'Input', 'List', 'Toolbar'];

materialpkgs.foreach ((pkg) = & gt; {
  Pakker [`` eggular2-materiale / $ {pkg} `] = {main:` $ {pkg} .js`};
}); 

Nå er det på tide å laste Material Design Icon Font i av src / index.html. . Enhver skrift vil fungere, men vi bruker standardmaterialet design ikoner:

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

Opprett en MD-dialog

Vi kan nå jobbe med Material Design i vår To-Do App. En av komponentene som nå mangler fra vinkel 2 materialdesign, er en rask eller dialog, så for vår første oppgave vil vi lage en!

La oss lage en ny komponent ved hjelp av et materialdesignkort, en verktøylinje, en inngang og et par knapper. I den SRC / APP. mappe av repo, type ng generere komponentdialog . Dette genererer en ny Dialogkomponent i SRC / APP / DIALOG , og legger til en fat til System-config.ts. så systemjs vet hvordan man laster den.

Hvis du ser på den genererte dialog.component.ts. Fil, du vil se den første linjen er: Importer {komponent, Oninit} fra '@ vinkel / kjerne'; . Komponent er en av de viktigste bygningsblokkene av vinkel, og Oninit. er en av grensesnittene det implementerer. Men for å få tilgang til kommunikasjon mellom nestede komponenter, samt de materielle designkomponentene nevnt ovenfor, må vi importere inngang, Produksjon og Eventemitter. fra @ vinkel / kjerne; og MDCard. , MDINPUT , MDToolBar. og Mdbutton. fra deres tilsvarende moduler i @ vinkel2- Materiale bibliotek.

For å gjøre disse materialkomponentene, må vi injisere direktivene våre DialogComponent. krever. Vi vil legge til følgende direktiver til @Components. Metadata:

 Templateurl: 'dialog.component.html',
Direktiv: [MDCard, MDToolbar, MDINPUT, MDButton],
Styleurls: ['dialog.component.css'] 

Vi erklærer deretter en rekke @Input. Variabler ( Oktext. , Canceltext. og så videre) som tillater oss å definere innholdet i dialogboksen. Vi må også legge til en @Produksjon Emitter som gjør at vi kan utløse en funksjon med en verdi i foreldrekomponenten når dialogboksen er stengt.

Nå kan vi erstatte den genererte konstruktøren i dialog.component.ts. Med følgende kode:

 konstruktør () {
 this.oktext = 'ok';
 This.canceltext = 'Avbryt';
}

Emitvalue (verdi) {
 this.valueemitted.emit (verdi);
} 

Så vel som å bruke @Input. Variabler i vår DialogComponent. innen dialog.component.html. Mal, den MD-inngang Tillater oss å godta inngang fra brukeren:

 & lt; md-input class = "full bredde" [plassholder] = "plassholder"
        [(ngmodel)] = "verdi" #dialoginputten
        (Keyup.Enter) = "Emitvalue (verdi)"
        (Keyup.escape) = "Emitvalue (null)" & gt; & lt; / md-input & gt; 

De MD-knapper Tillat brukeren å klikke på "OK", "Avbryt" eller hva du bestemmer deg for å merke disse knappene:

 & lt; knappen md-knapp (klikk) = "Emitvalue (null)" farge = "primær" & gt;
  {{anceltext}}
& lt; / knappen & gt;
& lt; knappen md-hevet-knapp (klikk) = "emitvalue (verdi)" farge = "primær" & gt;
  {{oktext}}
& lt; / button & gt; 

Legg merke til Keyup Hendelseshåndterere, som tar vare på ting når Enter eller Escape-tasten er trykket. Disse håndtererne er identiske med klikk Hendelseshåndterere for Canceltext. og Oktext. . Escape gjør det samme som Avbryt (Emitvalue (null)) , og å treffe Enter vil ha det samme resultatet som å klikke på OK (Emitvalue (verdi)) . Dette gjør at vi kan spørre brukeren om en verdi Via An. MD-inngang , og motta utslipp.

Vi kan se eksempler på en rekke materialdesignkomponenter: MD-kort , MD-knappen , og så videre. Vi må også legge til noen CSS i dialog.component.css For å oppnå utformingen ønsker vi - du kan se full koden i den medfølgende Github Repo.

La oss nå legge til dette DialogComponent. til Material2-do.component.html. For å se hvordan det ser ut til:

 & lt; app-dialog [TITLE] = "'DIALOG PROMPT'"
  [Template] = "" Dette er vår nye materielle designbaserte komponent: ""
  [stedholder] = "'Skriv inn tekst her'"
  [OkText] = "Ja" "
  [Canceltext] = "Nei" "
  [verdi] = "'Starte tekst'"
  (Valueemitted) = "Log ($ Event)"
  [showprompt] = "sant" & gt;
& lt; / app-dialog & gt; 

Legg merke til at vi har bokstavelige strenger for alle @Inputs. . Disse krever at vi bruker både enkle og dobbelte anførselstegn, ellers kan vinkelen tolke innholdet som et variabelt navn i Komponent omfang.

Vi har også den som sendes ut @Produksjon . Dette gjør dialogen enkel og ekstremt konfigurerbar. De fleste inngangene ville ha misligholdt til tomme strenger hvis det er utelatt.

La oss endre Material2Dokomponent . Vi må importere dialogkomponent og erklære det som et direktiv, ellers Material2Dokomponent. vil ikke kunne gjøre det. Vi vil også legge til loggfunksjonen:

 logg (tekst) {
   konsoll.log (tekst);
 } 

La oss ta en titt på vårt håndverk. Du kan servere appen (standardporten er 4200) ved å kjøre NPM Run-Script Start , som igjen kjører ng server . Hvis du åpner konsollen, kan du se hva som er logget: Innholdet i inngangen sendes ut når du klikker på "Ja", og null er utsendt når du klikker på 'Nei'.

Vi er nå klare til å bruke denne nye DialogComponent. å lage vår To-Do app.

Opprett hovedappen

Vi skal bruke følgende MD-komponenter for hovedappen: Verktøylinje , liste , Liste-item. , avkrysningsboks. , knapp , ikon , Ikon-Registry , og dens avhengige, Http_provider. , fra det vinkelte http-biblioteket. Så disse må legges til importavsnittet i Material2Dokomponent .

Igjen, for å kunne gjøre disse komponentene, må vi inkludere dem i @Components. metadata. Direktiver array sammen med. DialogComponent. , som vi nettopp har lagt til:

 Direktiv: [MDCard, MDToolbar, MDList, Mdlistitem, MdCheckbox, Mdbutton, MDicon, DialogComponent], 

Å få tilgang til MDIConregistry , vi må injisere det, sammen med Http_providers , via den @Components. metadata. Leverandører array:

 Leverandører: [MDICONREGISTRY, HTTP_PROVIDERS], 

Nå løper vi vår DialogComponent. , Legge til nok logikk for en enkel å-gjøre søknad. De tododialog. kalles for å åpne dialogboksen vår, enten med oppgaven å redigere ( å gjøre ) eller null Hvis vi skaper en ny.

Vi setter opp standardvariablene for en ny oppgave, eller hvis vi redigerer en oppgave i stedet, endrer vi dem tilsvarende. Vi viser da DialogComponent. Ved å sette den showdialog. variabel til ekte :

 tododialog (todo = null) {
    this.okbuttontext = 'Opprett oppgave';
    denne.fieldvalue = '';
    this.editedtodo = todo;
    hvis (todo) {
      this.fieldValue = todo.title;
      this.okbuttontext = 'Rediger oppgave';
    }
    this.showdialog = sant;
  } 

De UpdateTodo. Funksjonen kalles når vi ønsker å lukke den. De andre funksjonene ( edittodo. , AddToDo. , heddeialog. ) er hjelpemetoder for UpdateTodo. .

 UpdateTodo (tittel) {
    hvis (tittel) {
      tittel = title.trim ();
      hvis (dette.editedtodo) {
        this.edittodo (tittel);
      } else {
        this.addtodo (tittel);
      }
    }
    this.hedialog ();
  }

I Material2-do.component.html. Vi har gitt vår søknad en MD-Toolbar. hvor vi har satt tittelen og en MD-ikon kalt Legg til (som ser ut som et pluss tegn) for vår flytende handlingsknapp (FAB), som lar oss lage en ny oppgave:

 & lt; knappen md-fab class = "fab-add" (klikk) = "tododialog ()" & gt;
      & lt; md-icon & gt; add & lt; / md-icon & gt;
    & lt; / button & gt; 

Vi bruker MD-kort-innhold å holde AN. MD-list og en * ngfor. å iterere gjennom, og vise, vår gjøremålsliste array As. MD-liste-elementer :

 & lt; md-list-item * ngfor = "la todo av todolist; la indeks = indeks" & gt; 

md-avkrysningsboks. Gjør det mulig å krysse av elementer på vår liste. Og vi har to md-mini-fab Knapper vi kan bruke til å slette og redigere oppgaven vår: MD-Ikoner delete_forever og modus_edit. :

& lt; knappen md-mini-fab (klikk) = "Fjern (indeks)" farge = "primær" & gt;
  & lt; md-ikon & gt; DELETE_FOREVER & LT; / MD-ICON & GT;
& lt; / knappen & gt;

& lt; button md-mini-fab (klikk) = "tododialog (todo)" farge = "primær"
        [deaktivert] = "todo.completed" & gt;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / button & gt; 

Med en liten CSS forblir disse skjult til du rollover (eller klikker). Du kan se koden i repo.

Går fremover

Som vinkelmateriale 2 er fortsatt i alfa, er det noen ting som mangler - spesielt signaturen MD-knappen Ripple-effekten. Mens det kan bryte endringer i API fremover, fungerer det veldig mye. Det lever også opp til kravet om å ha en enkel API som ikke forvirrer utviklere, og er lett å utnytte for å skape flotte applikasjoner.

Denne artikkelen ble opprinnelig publisert i utgave 284 i Net, verdens bestselgende magasin for webdesignere og utviklere. Abonner her .

Relaterte artikler:

• Hva er nytt i vinkel 4?
• Slik bygger du en fullside nettside i vinkel
• Bygg et Data Dashboard med Angularjs