Cum se utilizează designul materialului în unghiular 6

Angular a evoluat de-a lungul anilor și noi caracteristici interesante au fost adăugate în mod continuu la fiecare versiune. Una dintre imbunatatiri este in Material Design, care vine cu componente noi. Acest tutorial va analiza materialul unghiular și cum îl va încorpora în proiectele Angular 6.

Ce este designul materialului?

Material Design este un limbaj de proiectare pentru aplicații web și mobile dezvoltat de Google în 2014. Designul de materiale ușurează dezvoltatorii să-și personalizeze interfața utilizator, păstrând în același timp o interfață de aplicație bună cu care se confruntă utilizatorii. Cu Material Design, veți obține un format bine organizat, împreună cu flexibilitatea de a vă exprima brandul și stilul.

Pentru un exemplu de design al materialelor, consultați Houzz, o aplicație de design de origine care a câștigat premiile Google Play în 2016. Această aplicație folosește Material Design pentru a se potrivi multor caracteristici sale în domeniul imobiliar limitat al dispozitivului mobil. Aceasta oferă o experiență bună pentru utilizator, permițându-i să vizualizeze și să navigheze în aplicație fără a se simți copleșiți. Este cu adevărat una dintre cele mai bune aplicații de design material. 

Acest post nu are legătură cu materialul de design, așa că nu vom trece în detaliu. Dacă doriți să aflați mai multe, există un tutorial excelent privind designul de materiale pe blogul Envato.

Introducere în materialul unghiular

Materialul unghiular constă dintr-o suită de componente angulare pre-construite. Spre deosebire de Bootstrap, care vă oferă componente pe care le puteți modela în orice fel doriți, Materialul Angular se străduiește să ofere o experiență îmbunătățită și consistentă a utilizatorului. În același timp, vă oferă posibilitatea de a controla modul în care se comportă diferitele componente.

La fel ca Angular, Angular Material a evoluat foarte mult de la lansarea sa inițială, cu mari îmbunătățiri și corecții de erori.

Cum să adăugați un material unghiular la proiectul dvs.

Pentru a adăuga un material unghiular la un proiect, vom folosi adăugați care este folosită pentru a adăuga noi capabilități proiectelor Angular. Această comandă se întâmplă să fie o caracteristică nouă în Angular 6 și este la fel de simplă:

ng adăugați @ unghiular / material

Această comandă va adăuga biblioteca la un proiect existent și va aduce tema CSS în angular.json. Acesta va adăuga, de asemenea, scripturi în index.html și actualizați AppModule.

O altă caracteristică în Angular 6 este ng update, care actualizează dependențele npm atunci când este lansată o nouă versiune. De asemenea, vă actualizează codul RxJS și codul de design material pentru a profita de noile API-uri.

Dependențe și componente

Materialul unghiular este alcătuit din mai multe componente de proiectare care se încadrează în următoarele categorii:

• Formele de control
• Butoane și indicatoare
• Navigare și aspect
• Popupuri și modale
• Tabel de date

Puteți genera componentele de pornire utilizând ng update comanda. Unele dintre schemele disponibile prin intermediul acestei comenzi sunt:

• Navigare
• Tablou de bord
• Masa

Aceste scheme pot fi ușor instalate cu ng genera comandă după cum urmează:

• ng genera @ unghiular / material: material-table - nume : generează o componentă care afișează date cu un tabel de date
  
• ng genera @ unghiular / material: material-nav - nume : generează o componentă cu o navigație laterală și o bară de instrumente

• ng genera @ unghiular / material: tablou de bord material - nume : generează o componentă care conține o listă de carduri dinamice din rețea.

Construiți o aplicație pentru unghiular 6

Pentru a începe, veți avea nevoie de unghiular CLI. Dacă nu aveți instalat CLI Angular, instalați-l pur și simplu prin emiterea următoarei comenzi.

npm install -g @ unghiular / cli

Apoi, va trebui să inițializăm un nou proiect Angular. Pentru aceasta, lansați următoarea comandă, unde Material-ng este numele proiectului nostru Angular.

ng nou Material-ng

Această comandă creează mai multe fișiere șablon unghiular pentru proiectul dvs. și instalează dependențele de pornire necesare.

Mergeți în directorul proiectului dvs. și adăugați un material unghiular la proiectul dvs..

cd MaterialApp ng add @ unghiular / material

Apoi, vom adăuga unele componente care sunt comune pentru multe aplicații, cum ar fi navigația.

Adăugați o bară de navigare

Pentru a adăuga o bară de navigare, pur și simplu:

ng genera @ unghiular / material: material-nav - nume myNav

Această comandă adaugă o componentă de navigare laterală pliabilă și o componentă sertar. Ar trebui să obțineți următoarea ieșire, care are patru fișiere generate pentru noi, și anume mi-nav.component.css, mi-nav.component.html, mi-nav.component.spec.ts, și mi-nav.component.ts.

CREATE src / app / my-nav / my-nav.component.css (129 octeți) CREATE src / app / my-nav / my-nav.component.html (958 octeți) -nav.component.spec.ts (699 octeți) CREATE src / app / my-nav / my-nav.component.ts (580 octeți) UPDATE src / app / app.module.ts (795 bytes)

Acum deschis mi-nav.component.html și ar trebui să vedeți tot codul HTML pentru navigația generată pentru noi.

  Meniul  Link 1 Link 2 Link 3      meniul  Material-ng     

În mod implicit, un proiect Angular starter va servi pagina implicită, dar dorim să vedem magia Designului Material! Pentru a face uz de componentul Nav proiectat Material Nav, deschideți app.component.html și înlocuiți tot codul cu:

Acum, când rulați aplicația, veți vedea bara de navigare.

De asemenea, trebuie să observați că componenta de navigare pe care am adăugat-o a fost importată în modulul principal după cum se arată:

# app.module.ts import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import BrowserAnimationsModule de la '@ unghiular / platform-browser / animații'; import MyNavComponent de la "./my-nav/my-nav.component"; import LayoutModule din '@ angular / cdk / layout'; import MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule din '@ unghiular / material'; @NgModule (declaratii: [AppComponent, MyNavComponent], import: [BrowserModule, BrowserAnimationsModule, LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule] 

În mi-nav.component.html, să facem câteva modificări și în listele de meniuri:

Acasă  Formularul de control Navigare Layout Butoane și indicatoare Popupuri și modale Tabela de date  

Acum, puteți porni serverul de dezvoltare rulând: 

ng server-open

Rezultatul ar trebui să arate astfel:

După cum puteți vedea, materialul unghiular oferă o modalitate ușoară de a vă pune în aplicare aplicația. Cu doar câteva comenzi și câteva linii de cod, am reușit să încorporăm designul de material în aplicația noastră Angulară!

Vizitați repo-ul nostru GitHub pentru codul sursă complet al acestei aplicații exemplu.

Concluzie

Sper că acest tutorial v-a ajutat să înțelegeți cum să utilizați puterea Designului Material în aplicația dvs. pentru un UI de vârf. Pentru mai multe informații despre proiectarea materialelor în versiunea Angular 6, consultați documentele oficiale care conțin șabloane gata de utilizare. Este un loc minunat pentru a afla despre Angular. De asemenea, puteți să consultați tutorialele și cursurile Angulare aici pe Envato Tuts+!