Rakenna materiaalisuunnittelusovellus Angular 2: lla

Kannettavan tietokoneen ja puhelimen näytöt, joissa on kulmainen logo

Angular Material on käyttöliittymäkomponenttikehys, joka toteuttaa Googlen Material Design -määritykset Angular 2: lle - uuden, nopeamman Angularin toteutuksen, kirjoitettuna TypeScript-muodossa. Vaikka kulmamateriaali on edelleen alfa-muodossa, se tarjoaa jo joukon uudelleenkäytettäviä ja käytettävissä olevia käyttöliittymäkomponentteja, jotka perustuvat materiaalisuunnitteluun.

Itse Angular 2 on suunniteltu käytettäväksi kaikilla alustoilla (verkko, mobiili ja työpöytä), ja siihen liittyy monia uusia tekniikoita. JavaScript-tasolla meillä on lisäsyntaksi ECMAScript 2015 (ES6), kirjoittaminen ja käyttöliittymän tuki TypeScriptiltä sekä sisustusarkkitehdit Metadata Reflection -sovellusliittymästä. Se käyttää Reactive Extensions -kirjaston havaittavissa olevia tapahtumasarjojen hallintaan toiminnallisella ohjelmointitavalla. Se käyttää vyöhykkeitä kapseloimaan ja sieppaamaan asynkronista toimintaa tarjoamaan muodon kierre-paikallinen tallennustila, jolloin kulma pystyy vastaamaan automaattisesti asynkronisten tapahtumien tietojen muutoksiin ylläpitämään datan sidoksia. Lopuksi moduulien lataamista hoitaa SystemJS.



Tässä opetusohjelmassa aiomme käyttää Angular 2: ta luomaan yksinkertaisen tehtäväsovelluksen, jossa on joitain allekirjoitusmateriaalisuunnitteluelementtejä. Hanki lähdetiedostot täältä .



Valmistaudu

Alkuympäristön asettaminen voi olla vaikeaa. On kulmikas2-siemen saatavilla sekä kulmikas 2-käynnistin . On kuitenkin jotain vielä parempaa: kanssa kulma-cli voit määrittää Angular 2 -projektisi yhdellä komennolla.

Sen lisäksi, että se huolehtii kaikkien viime osiossa mainitsemiesi tekniikoiden asennuksesta (solmun ja npm: n kautta), se lisää myös rakennustelineitä Jasmine-yksikötestaukseen, Protractorin päähän-testaukseen sekä TSLint-testaukseen ja Angely 2 TypeScript: n staattisen koodin analysointi. Vaikka sinun ei tarvitse käyttää kaikkia näitä, sinun pitäisi ehdottomasti käyttää sitä. Se on niin helppokäyttöinen, ihmettelet, kuinka olet koskaan tullut toimeen ilman sitä.



Kulmainen CLI on saatavana npm-pakettina, joten sinun on asennettava Node ja npm globaalisti koneellesi käyttämällä npm asenna -g kulma-cli . Luo nyt uusi Angular 2 -sovellus uutta materiaalia2-do . Joudut odottamaan vähän, koska sen jälkeen kun se on luonut tarvittavat tiedostot, se alustaa Git-repon ja tekee npm asentaa ladata kaikki tarvittavat moduulit solmu_moduulit / . Katsokaa package.json ja tutustu siellä oleviin moduuleihin ja komentosarjoihin.

Olet nyt luonut uuden Angular 2 -sovelluksen, joka noudattaa virallisia parhaita käytäntöjä.

Lisää materiaalisuunnittelu

Oletussovellus ei tiedä mitään materiaalisuunnittelusta (olen varma, että olen ylivoimaa), joten meidän on lisättävä se itse.



Siellä on luettelo julkaistuista Angular 2 Material Design -paketeista @ kulma2-materiaali kirjasto. Tässä esimerkissä aiomme käyttää ydin (vaaditaan kaikille Angular Material 2 -sovelluksille) sekä -painiketta , kortti- , valintaruutu , -kuvaketta , tulo , lista ja työkalurivi :

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

Jotta myyjäpaketti toimisi, meidän on lisättävä @ kulma2-materiaali / ** / * ryhmään vendorNpmFiles sisään kulma-cli-build.js . Meidän on myös lisättävä polku @ kulma2-materiaali että karttoja esine:

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

Kerro SystemJS: lle, kuinka uudet moduulit käsitellään osoittamalla kunkin paketin päätiedostoihin:

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

Nyt on aika ladata Material Design -kuvakkeen fontti / src / index.html . Mikä tahansa kirjasin toimii, mutta käytämme tavallisia materiaalisuunnittelukuvakkeita:

muistiinpanotabletti opiskelijoille

Luo MD-valintaikkuna

Voimme nyt työskennellä materiaalisuunnittelun kanssa tehtäväsovelluksessamme. Yksi Angular 2 -materiaalisuunnittelusta puuttuvista komponenteista on kehote tai valintaikkuna, joten teemme sellaisen ensimmäiseen tehtäväämme!

Luodaan uusi komponentti Material Design -kortilla, työkalurivillä, syötteellä ja muutamalla painikkeella. vuonna src / sovellus Kirjoita repo-kansio, kirjoita luo komponentti-valintaikkuna . Tämä luo uuden DialogComponent sisään src / sovellus / valintaikkuna ja lisää tynnyrin system-config.ts joten SystemJS tietää kuinka ladata se.

Jos katsot luotua dialog.component.ts tiedosto, näet ensimmäisen rivin: tuonti {komponentti, OnInit} alkaen 'kulma / ydin'; . Komponentti on yksi kulmien tärkeimmistä rakennuspalikoista, ja OnInit on yksi sen toteuttamista rajapinnoista. Sisäänrakennettujen komponenttien sekä edellä mainittujen materiaalisuunnittelukomponenttien välisen viestinnän saamiseksi meidän on kuitenkin tuotava Input, Tuotos ja Tapahtuman lähettäjä alkaen @ kulma / ydin; ja MdCard , MdInput , MdToolbar ja MdPainike niiden vastaavista moduuleista @ kulma2- materiaali kirjasto.

Näiden materiaalikomponenttien renderoimiseksi meidän on injektoitava direktiivit meidän DialogComponent vaatii. Lisätään seuraaviin direktiiveihin @Komponentit metatiedot:

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

Sitten ilmoitamme joukon @Input muuttujat ( okText , CancelText ja niin edelleen), joiden avulla voimme määrittää valintaikkunan sisällön. Meidän on myös lisättävä yksi @Output emitter, jonka avulla voimme käynnistää toiminnon, jonka arvo on ylätason komponentissa, kun valintaikkuna on suljettu.

Nyt voimme korvata luodun konstruktorin dialog.component.ts seuraavalla koodilla:

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

Sekä @Input muuttujat sisällä DialogComponent sisällä dialog.component.html malli, md-tulo antaa meille mahdollisuuden hyväksyä käyttäjän syöttö:

md-painikkeet anna käyttäjän napsauttaa OK, Peruuta tai mitä tahansa, minkä päätät merkitä näihin painikkeisiin:

{{cancelText}} {{okText}}

Huomaa näppäimet tapahtumankäsittelijät, jotka hoitavat asioita, kun Enter- tai Escape-näppäintä painetaan. Nämä käsittelijät ovat identtisiä klikkaus tapahtumankäsittelijät CancelText ja okText . Escape tekee saman kuin peruutus (emitValue (null)) , ja Enter-painalluksella saadaan sama tulos kuin napsauttamalla OK (emitValue (arvo)) . Tämän avulla voimme pyytää käyttäjää a arvo kautta md-tulo , ja vastaanottaa lähetetty tuotos.

Voimme nähdä esimerkkejä useista materiaalisuunnittelun komponenteista: md-kortti , md-painike , ja niin edelleen. Meidän on myös lisättävä joitain CSS-tiedostoja sisään dialog.component.css haluamasi asettelun saavuttamiseksi - voit tarkastella koko koodia mukana olevassa GitHub-repossa.

Lisätään nyt tämä DialogComponent että material2-do.component.html nähdäksesi miltä se näyttää:

Huomaa, että meillä on kirjaimelliset merkkijonot kaikille @Tulot . Nämä vaativat meitä käyttämään sekä yksittäisiä että kaksoislainauksia, muuten Angular tulkitsisi sisällön muuttujan nimellä Komponentti soveltamisala.

Meillä on myös yksi päästetty @Output . Tämä tekee valintaikkunasta yksinkertaisen ja erittäin konfiguroitavan. Suurin osa syötteistä olisi oletusarvoisesti tyhjät merkkijonot, jos ne jätetään pois.

Muutetaan Materiaali2DoComponent . Meidän on tuotava DialogComponent ja julistettava se direktiiviksi, muuten Materiaali2DoComponent ei voi tehdä sitä. Lisäämme myös lokitoiminnon:

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

Katsotaanpa käsityömme. Voit palvella sovellusta (oletusportti on 4200) suorittamalla npm run-script -aloitus , joka puolestaan ​​toimii palvelimen . Jos avaat konsolin, näet, mikä on kirjattu: syötteen sisältö lähetetään, kun napsautat Kyllä. tyhjä tulee, kun napsautat Ei.

Olemme nyt valmiita käyttämään tätä uutta DialogComponent luoda tehtäväsovelluksemme.

Luo pääsovellus

Aiomme käyttää seuraavia MD-komponentteja pääsovelluksessa: työkalurivi , lista , luettelokohde , valintaruutu , -painiketta , -kuvaketta , kuvake-rekisteri ja sen riippuvainen, HTTP_PROVIDER , kulmallisesta HTTP-kirjastosta. Joten nämä on lisättävä Materiaali2DoComponent .

Jälleen kerran, jotta voimme renderoida nämä komponentit, meidän on sisällytettävä ne komponenttiin @Komponentit metatiedot direktiivejä taulukko yhdessä DialogComponent , jonka juuri lisäsimme:

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

Pääsy MdIconRegistry , meidän on pistettävä se yhdessä HTTP_PROVIDERS kautta @Komponentit metatiedot palveluntarjoajat taulukko:

providers: [MdIconRegistry, HTTP_PROVIDERS],

Nyt hyödynnämme DialogComponent , lisäämällä tarpeeksi logiikkaa yksinkertaista tehtävää varten. todoDialog kutsutaan avaamaan valintaikkuna joko tehtävän kanssa muokattavaksi ( kaikki ) tai tyhjä jos olemme luomassa uutta.

Asetamme oletusmuuttujat uudelle tehtävälle tai jos muokkaamme tehtävää, muutamme niitä vastaavasti. Näytämme sitten DialogComponent asettamalla showDialog muuttuja totta :

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

updateTodo -toimintoa kutsutaan, kun haluamme sulkea sen. Muut toiminnot ( editTodo , addTodo , hideDialog ) ovat auttajamenetelmiä updateTodo .

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

Sisään material2-do.component.html olemme antaneet hakemuksellemme md-työkalurivi mihin olemme kirjoittaneet otsikon, ja md-kuvake nimeltään lisätä (joka näyttää plusmerkiltä) kelluvalle toimintopainikkeellemme (FAB), jonka avulla voimme luoda uuden tehtävän:

add

Käytämme md-kortti-sisältö pitää md-luettelo ja * ngFor toistaa ja näyttää meidän tehtävälista taulukko md-list-kohteita :

md-valintaruutu avulla voimme merkitä luettelossamme olevat kohteet. Ja meillä on kaksi md-mini-fab painikkeet, joita voimme käyttää tehtävämme poistamiseen ja muokkaamiseen: md-kuvakkeet delete_forever ja mode_edit :

delete_forever mode_edit

Pienellä CSS: llä ne pysyvät piilossa, kunnes siirrät (tai napsautat). Näet koodin repossa.

Menen eteenpäin

Koska kulmamateriaali 2 on edelleen alfa-muodossa, puuttuu joitain asioita - erityisesti allekirjoituksen MD-painikkeen aaltoilu. Vaikka API: ssa voi olla rikkomatta muutoksia, se toimii hyvin. Se täyttää myös väitteen siitä, että sillä on yksinkertainen sovellusliittymä, joka ei sekoita kehittäjiä, ja sitä on helppo käyttää hyvännäköisten sovellusten luomiseen.

Tämä artikkeli julkaistiin alun perin maailman myydyimmän verkkosivujen suunnittelijoille ja kehittäjille suunnatun nettilehden 284 numerossa. Tilaa täällä .

Aiheeseen liittyvät artikkelit: