Izradite aplikaciju Materijal za dizajn s Angular 2

Zasloni prijenosnih računala i telefona s kutnim logotipom

Angular Material okvir je UI komponente koji implementira Googleovu specifikaciju materijala za Angular 2 - novu, bržu implementaciju Angular-a, napisanu na TypeScript-u. Iako je još uvijek u alfa verziji, Angular Material već nudi skup višekratno dostupnih i pristupačnih komponenata korisničkog sučelja temeljenih na dizajnu materijala.

Sam Angular 2 dizajniran je za upotrebu na svim platformama (web, mobilna i stolna računala), a s njim su povezane brojne nove tehnologije. Na razini JavaScript imamo dodatnu sintaksu ECMAScript 2015 (ES6), podršku za tipkanje i sučelje iz Typecripta, zajedno s dekoraterima iz API-ja Reflection Metadata. Koristi opažljive iz biblioteke Reactive Extensions za upravljanje sljedovima događaja na način funkcionalnog programiranja. Koristi zone za inkapsuliranje i presretanje asinkronih aktivnosti kako bi pružio oblik lokalnog pohranjivanja niti, omogućavajući Angular-u da automatski reagira na promjene podataka u asinkronim događajima radi održavanja veza podataka. Napokon, učitavanjem modula upravlja SystemJS.

U ovom uputstvu koristit ćemo Angular 2 kako bismo stvorili jednostavnu aplikaciju za obveze s nekim potpisanim elementima Materijalnog dizajna. Izvorne datoteke potražite ovdje .



Namjestite se

Postavljanje početnog okruženja može biti teško. Postoji kutna2-sjeme dostupan, kao i kutni2-starter . Međutim, postoji nešto još bolje: s kutna-kli svoj Angular 2 projekt možete konfigurirati jednom naredbom.

Ne samo da će se pobrinuti za postavljanje svih tehnologija koje sam spomenuo u prošlom odjeljku (putem Node i npm), već će dodati i skele za Jasminovo jedinstveno testiranje, protraktor od kraja do kraja, plus TSLint testiranje i codelyzer statička analiza koda Angular 2 TypeScript. Iako sve to ne morate koristiti, definitivno biste trebali. Tako je jednostavan za upotrebu, zapitat ćete se kako ste se ikad snašli bez njega.

Kutni CLI dostupan je kao npm paket, tako da ćete morati instalirati Node i npm globalno na svoj stroj pomoću npm instaliraj -g kutni-kli . Sada stvorite novu aplikaciju Angular 2 s novog materijala2-do . Morat ćete pričekati malo, jer nakon što generira potrebne datoteke, pokreće Git repo i radi npm instalirati za preuzimanje svih potrebnih modula u node_modules / . Pogledajte paket.json i upoznajte se s tamošnjim modulima i skriptama.

Sada ste stvorili novu aplikaciju Angular 2 koja slijedi službenu najbolju praksu.

Dodajte dizajn materijala

Zadana aplikacija ne zna ništa o Materijalnom dizajnu (siguran sam nadzor), pa ga moramo dodati sami.

Postoji popis objavljenih paketa Angular 2 Material Design u @ kutni2-materijal knjižnica. U ovom ćemo primjeru koristiti jezgra (potrebno za sve aplikacije Angular Material 2), kao i dugme , kartica , potvrdni okvir , ikona , ulazni , popis i alatnoj traci :

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

Da bi paket dobavljača funkcionirao, moramo dodati @ angular2-material / ** / * na niz dobavljačNpmFiles u angular-cli-build.js . Također moramo dodati put do @ kutni2-materijal prema Karte objekt:

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

Obavijestite SystemJS kako obrađivati ​​nove module pokazujući na glavne datoteke svakog od paketa:

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

Sada je vrijeme da učitate font ikone Material Design u od src / index.html . Bilo koji font će raditi, ali koristimo standardne ikone Material Design:

kako invertirati boje u clip studiju

Stvorite MD dijaloški okvir

Sada u našoj aplikaciji za obveze možemo raditi s Material Designom. Jedna od komponenata koja trenutno nedostaje u Angular 2 Material Design je upit ili dijalog, pa ćemo za naš prvi zadatak napraviti jedan!

Stvorimo novu komponentu pomoću kartice Material Design, alatne trake, unosa i nekoliko gumba. U src / app mapu vašeg repo-a, upišite ng dijalog za generiranje komponenata . To generira novo DialogComponent u src / app / dialog , i dodaje bačvu u system-config.ts pa ga SystemJS zna učitati.

Ako pogledate generirano dialog.component.ts datoteka, vidjet ćete da je prvi redak: uvoz {Komponenta, OnInit} iz '@ kutna / jezgra'; . Komponenta je jedan od glavnih gradivnih dijelova Kutnog, i OnInit je jedno od sučelja koje implementira. Međutim, da bismo imali pristup komunikaciji između ugniježđenih komponenata, kao i gore spomenutih komponenata Materijalnog dizajna, moramo uvesti Ulaz, Izlaz i EventEmitter iz @ kutna / jezgra; i MdCard , MdInput , MdToolbar i MdButton iz njihovih odgovarajućih modula u @ kutni2- materijal knjižnica.

Da bismo prikazali ove Materijalne komponente, moramo ubrizgati naše direktive DialogComponent zahtijeva. Dodati ćemo sljedeće smjernice na @Komponente metapodaci:

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

Zatim izjavljujemo brojne @Ulazni varijable ( okText , cancelText i tako dalje) koji nam omogućuju definiranje sadržaja dijaloga. Također moramo dodati jedan @Izlaz emiter koji nam omogućuje pokretanje funkcije s vrijednošću u nadređenoj komponenti kada je dijalog zatvoren.

Sada možemo zamijeniti generirani konstruktor u dialog.component.ts sa sljedećim kodom:

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

Kao i pomoću @Ulazni varijable unutar našeg DialogComponent unutar dialog.component.html predložak, md-ulaz omogućuje nam prihvaćanje unosa od korisnika:

The md-gumbi dopustite korisniku da klikne 'U redu', 'Odustani' ili bilo što drugo što želite označiti ovim tipkama:

{{cancelText}} {{okText}}

Primijetite tipkovnica voditelji događaja koji brinu o stvarima kad se pritisne tipka Enter ili Escape. Ovi rukovatelji identični su klik rukovatelji događajima za cancelText i okText . Escape čini isto što i otkazati (emitValue (null)) , a ako pritisnete Enter, rezultirat će istim rezultatom kao i klikom na U redu (emitValue (vrijednost)) . To nam omogućuje da od korisnika zatražimo da postavi vrijednost putem an md-ulaz , i primiti emitirani izlaz.

Možemo vidjeti primjere brojnih komponenata Materijalnog dizajna: md-kartica , md-gumb , i tako dalje. Također trebamo dodati nekoliko CSS-a u dialog.component.css kako bismo postigli izgled koji želimo - cijeli kôd možete pogledati u pripadajućem GitHub repo-u.

Sad dodajmo ovo DialogComponent do materijal2-do.component.html da vidim kako to izgleda:

Primijetite da imamo doslovne nizove za sve @ Ulazi . Oni zahtijevaju da koristimo i jednostruke i dvostruke navodnike, inače bi Angular sadržaj protumačio kao ime varijable u Komponenta opseg.

Imamo i onu emitiranu @Izlaz . To dijalog čini jednostavnim i izuzetno prilagodljivim. Većina ulaznih podataka zadana bi bila za prazne nizove da su izostavljeni.

Izmijenimo se Material2DoComponent . Moramo uvesti DialogComponent i u suprotnom ga deklarirati kao direktivu Material2DoComponent neće moći prikazati. Također ćemo dodati funkciju dnevnika:

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

Pogledajmo naš ručni rad. Aplikaciju možete poslužiti (zadani port je 4200) pokretanjem npm pokretanje skripte za pokretanje , koji zauzvrat trči poslužitelja . Ako otvorite konzolu, možete vidjeti što se bilježi: sadržaj unosa emitira se kad kliknete 'Da' i nula emitira se kad kliknete 'Ne'.

Sada smo spremni za upotrebu ovog novog DialogComponent stvoriti našu aplikaciju za obveze.

Izradite glavnu aplikaciju

Za glavnu aplikaciju koristit ćemo sljedeće MD komponente: alatnoj traci , popis , stavka popisa , potvrdni okvir , dugme , ikona , ikona-registar , i ovisno o njemu, HTTP_PROVIDER , iz Angular HTTP knjižnice. Stoga ih treba dodati u odjeljak za uvoz u Material2DoComponent .

Još jednom, da bismo mogli generirati ove komponente, moramo ih uključiti u @Komponente metapodaci direktive niz zajedno sa DialogComponent , koju smo upravo dodali:

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

Da biste dobili pristup MdIconRegistry , moramo ga ubrizgati, zajedno s HTTP_PROVIDERS putem @Komponente metapodaci davatelji usluga niz:

providers: [MdIconRegistry, HTTP_PROVIDERS],

Sada koristimo svoje DialogComponent , dodajući dovoljno logike za jednostavnu aplikaciju koja se mora obaviti. The todoDialog poziva se da otvori naš dijaloški okvir, bilo sa zadatkom za uređivanje ( sve ) ili nula ako stvaramo novi.

Postavljamo zadane varijable za novi zadatak, ili ako uređujemo zadatak, mijenjamo ih u skladu s tim. Zatim prikazujemo DialogComponent postavljanjem showDialog varijabilno na pravi :

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

The updateTodo funkcija se poziva kada je želimo zatvoriti. Ostale funkcije ( urediTodo , addTodo , hideDialog ) su pomoćne metode za updateTodo .

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

U materijal2-do.component.html dali smo našoj prijavi md-alatna traka gdje smo stavili naslov i md-ikona pozvao dodati (koji izgleda kao znak plusa) za naš plutajući akcijski gumb (FAB), koji nam omogućuje stvaranje novog zadatka:

add

Koristimo md-card-content držati an md-lista i an * ngFor prelistavati i prikazivati ​​naše todoList niz kao md-popis-stavki :

md-potvrdni okvir omogućuje nam da označimo stavke s popisa. A mi imamo dvije md-mini-fab gumbi pomoću kojih možemo izbrisati i urediti svoj zadatak: md-ikone delete_forever i mode_edit :

delete_forever mode_edit

Uz malo CSS-a, oni ostaju skriveni dok ne pređete (ili kliknete). Kôd možete vidjeti u repo-u.

Ide naprijed

Kako je Kutni materijal 2 još uvijek u alfa verziji, nedostaju neke stvari - posebno efekt mreškanja potpisa MD gumba. Iako su možda naprijed promjene u API-ju, on itekako funkcionira. Također opravdava tvrdnju da ima izravni API koji ne zbunjuje programere i jednostavan je za stvaranje izvrsnih aplikacija.

Ovaj je članak izvorno objavljen u broju 284 Net-a, najprodavanijeg svjetskog časopisa za web dizajnere i programere. Pretplatite se ovdje .

Povezani članci: