Bygg en Material Design-app med Angular 2

Skjermer for bærbar PC og telefon med kantet logo

Angular Material er et UI-komponentrammeverk som implementerer Googles Material Design-spesifikasjon for Angular 2 - den nye, raskere implementeringen av Angular, skrevet i TypeScript. Selv om det fortsatt er i alfa, har Angular Material allerede et sett med gjenbrukbare og tilgjengelige UI-komponenter basert på Material Design.

Angular 2 i seg selv er designet for bruk på alle plattformer (web, mobil og stasjonær), og har mange nye teknologier knyttet til den. På JavaScript-nivå har vi den ekstra syntaksen til ECMAScript 2015 (ES6), skriving og grensesnittstøtte fra TypeScript, sammen med dekoratører fra Metadata Reflection API. Den bruker observerbare fra Reactive Extensions-biblioteket til å administrere sekvenser av hendelser på en funksjonell programmeringsmåte. Den bruker soner til å kapsle inn og avskjære asynkron aktivitet for å gi en form for trådlokal lagring, slik at Angular automatisk reagerer på dataendringer i asynkrone hendelser for å opprettholde databindinger. Til slutt håndteres modulinnlasting av SystemJS.

I denne opplæringen skal vi bruke Angular 2 til å lage en enkel å gjøre-app med noen signatur Material Design-elementer. Få kildefilene her .



Sett deg opp

Det kan være vanskelig å sette opp det opprinnelige miljøet. Det er en angular2-seed tilgjengelig, samt en angular2-startpakke . Imidlertid er det noe enda bedre: med vinkel-cli du kan konfigurere Angular 2-prosjektet ditt med en enkelt kommando.

Ikke bare vil den ta seg av oppsettet for alle teknologiene jeg nevnte i forrige avsnitt (via Node og npm), det vil også legge til stillas for Jasmine-enhetstesting, Protractor end-to-end testing, pluss TSLint-testing, og codelyzer statisk kodeanalyse av Angular 2 TypeScript. Selv om du ikke trenger å bruke alle disse, bør du absolutt gjøre det. Det er så enkelt å bruke, du vil lure på hvordan du noen gang har klart deg uten det.

Angular CLI er tilgjengelig som en npm-pakke, så du må installere Node og npm globalt på maskinen din ved hjelp av npm installere -g vinkel-cli . Opprett nå en ny Angular 2-app med av nytt materiale2-do . Du blir nødt til å vente litt, for etter at den genererer de nødvendige filene, initialiserer den en Git repo og gjør en npm installere for å laste ned alle nødvendige moduler til node_modules / . Ta en titt på pakke.json og bli kjent med modulene og skriptene der.

Du har nå opprettet et nytt Angular 2-program som følger de offisielle beste praksisene.

Legg til materialdesign

Standardappen vet ingenting om Material Design (en oversikt er jeg sikker på), så vi må legge den til selv.

Det er en liste over publiserte Angular 2 Material Design-pakker i @ angular2-materiale bibliotek. I dette eksemplet skal vi bruke kjerne (kreves for alle Angular Material 2-apper), samt knapp , kort , avkrysningsruten , ikon , inngang , liste og verktøylinje :

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

For at leverandørpakken skal fungere, må vi legge til @ angular2-material / ** / * til utvalget av vendorNpmFiles i angular-cli-build.js . Vi må også legge veien til @ angular2-materiale til kart gjenstand:

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

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

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`}; });

Nå er det på tide å laste inn materialdesignfonten i av src / index.html . Enhver skrift vil fungere, men vi bruker standard Material Design-ikonene:

photoshop hvordan konvertere til rgb

Opprett en MD-dialog

Vi kan nå jobbe med Material Design i vår oppgaveapp. En av komponentene som for øyeblikket mangler i Angular 2 Material Design er en ledetekst eller dialog, så for vår første oppgave vil vi lage en!

La oss lage en ny komponent ved hjelp av et Material Design-kort, en verktøylinje, en inngang og et par knapper. I src / app mappen til repoen din, skriv inn ng generer komponent-dialog . Dette genererer en ny DialogKomponent i src / app / dialog , og legger et fat til system-config.ts så SystemJS vet hvordan de skal lastes inn.

Hvis du ser på den genererte dialog.component.ts filen, vil du se den første linjen er: importer {Component, OnInit} fra '@ vinkel / kjerne'; . Komponent er en av de viktigste byggesteinene i Angular, og OnInit er et av grensesnittene den implementerer. For å få tilgang til kommunikasjon mellom nestede komponenter, samt materialdesignkomponentene nevnt ovenfor, må vi imidlertid importere Input, Produksjon og EventEmitter fra @ vinkel / kjerne; og MdCard , MdInput , MdToolbar og MdButton fra deres tilsvarende moduler i @ angular2- materiale bibliotek.

For å gjengi disse materialkomponentene, må vi injisere direktivene DialogKomponent krever. Vi vil legge til følgende direktiver i @Komponenter metadata:

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

Vi erklærer da et antall @Input variabler ( okTekst , avbryt tekst og så videre) som lar oss definere innholdet i dialogen. Vi må også legge til en @Produksjon emitter som lar oss utløse en funksjon med en verdi i den overordnede komponenten når dialogen lukkes.

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

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

I tillegg til å bruke @Input variabler inne i vår DialogKomponent innen dialog.component.html mal, den md-inngang tillater oss å godta innspill fra brukeren:

De md-knapper la brukeren klikke 'OK', 'Avbryt' eller hva du enn velger å merke disse knappene:

{{cancelText}} {{okText}}

Legg merke til tastatur hendelsesbehandlere, som tar seg av ting når du trykker på Enter eller Escape. Disse håndtererne er identiske med klikk hendelsesbehandlere for avbryt tekst og okTekst . Escape gjør det samme som å avbryte (emitValue(null) ) og å trykke Enter vil ha samme resultat som å klikke OK (emitValue (verdi)) . Dette lar oss be brukeren om en verdi via en md-inngang , og motta utsendt utdata.

Vi kan se eksempler på en rekke materialdesignkomponenter: md-kort , md-knapp , og så videre. Vi må også legge til litt CSS i dialog.component.css for å oppnå det oppsettet vi ønsker - kan du se hele koden i den medfølgende GitHub-repoen.

La oss nå legge til dette DialogKomponent til material2-do.component.html for å se hvordan det ser ut:

Legg merke til at vi har bokstavelige strenger for alle @Innganger . Disse krever at vi bruker både enkle og doble anførselstegn, ellers vil Angular tolke innholdet som et variabelnavn i Komponent omfang.

Vi har også den som sendes ut @Produksjon . Dette gjør dialogen enkel og ekstremt konfigurerbar. De fleste av inngangene ville ha tømt strenger hvis de utelates.

La oss endre Material2DoComponent . Vi må importere DialogComponent og erklære det som et direktiv, ellers Material2DoComponent vil ikke være i stand til å gjengi det. Vi vil også legge til loggfunksjonen:

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

La oss ta en titt på håndverket vårt. Du kan servere appen (standardporten er 4200) ved å kjøre npm run-script start , som igjen kjører av serveren . Hvis du åpner konsollen, kan du se hva som er logget: innholdet på inngangen sendes ut når du klikker 'Ja', og null sendes ut når du klikker 'Nei'.

Vi er nå klare til å bruke denne nye DialogKomponent for å lage vår oppgaveapp.

Lag hovedappen

Vi skal bruke følgende MD-komponenter for hovedappen: verktøylinje , liste , listeelement , avkrysningsruten , knapp , ikon , ikonregister , og dens avhengige, HTTP_PROVIDER , fra Angular HTTP-biblioteket. Så disse må legges til importdelen av Material2DoComponent .

Nok en gang, for å kunne gjengi disse komponentene, må vi inkludere dem i @Komponenter metadata direktiver array sammen med DialogKomponent , som vi nettopp la til:

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

For å få tilgang til MdIconRegistry , må vi injisere den sammen med HTTP_PROVIDERS , via @Komponenter metadata leverandører matrise:

providers: [MdIconRegistry, HTTP_PROVIDERS],

Nå utnytter vi vårt DialogKomponent , og legger til nok logikk for en enkel å gjøre applikasjon. De todoDialog kalles for å åpne dialogen vår, enten med oppgaven å redigere ( alt ) eller null hvis vi lager en ny.

Vi setter opp standardvariablene for en ny oppgave, eller hvis vi redigerer en oppgave i stedet, endrer vi dem deretter. Vi viser deretter DialogKomponent ved å stille inn vis Dialog variabel til ekte :

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; }

De updateTodo funksjonen kalles når vi ønsker å lukke den. De andre funksjonene ( editTodo , addTodo , skjul dialogboksen ) er hjelpermetoder for updateTodo .

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

I material2-do.component.html vi har gitt søknaden vår en md-verktøylinje der 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:

add

Vi bruker md-kort-innhold å holde en md-liste og en * ngFor å gjenta gjennom, og vise, vårt gjøremålsliste array som md-list-items :

md-avkrysningsrute gjør at vi kan krysse av for ting på listen vår. Og vi har to md-mini-fab knappene vi kan bruke til å slette og redigere oppgaven vår: md-ikoner delete_forever og mode_edit :

delete_forever mode_edit

Med litt CSS forblir disse skjult til du velter (eller klikker). Du kan se koden i repoen.

Fremover

Siden Angular Material 2 fremdeles er i alfa, mangler det noen ting - spesielt signatur MD-knappen ringvirkning. Selv om det kan være ødeleggende endringer i API-et fremover, fungerer det veldig mye. Det lever også opp til påstanden om å ha en grei API som ikke forvirrer utviklere, og som er lett å utnytte for å lage flotte applikasjoner.

Denne artikkelen ble opprinnelig publisert i utgave 284 av net, verdens mest solgte magasin for webdesignere og utviklere. Abonner her .

Relaterte artikler: