Construiți aplicații web ultramoderne cu material angular

La Conferința Google I/O din 2014, Google a anunțat Material Design, noul lor limbaj de design. De atunci, au convertit multe dintre aplicațiile lor populare pentru a adera la această nouă specificație, în efortul de a oferi o experiență consecventă. Acum încearcă să vă convingă să urmați și pe voi.

Ce este Material Design?

După o vizită la specificația oficială Material Design, veți avea imediat un sentiment de minimalism ultramodern. Formele de bază și culorile plate sunt tema aici. Parcurgerea documentației este o experiență destul de mare. Vă recomand să vă uitați singur, dar o voi rezuma aici.

Poartă

Scopul este de a crea un limbaj vizual care sintetizează principiile clasice de bun design cu inovația și posibilitatea tehnologiei și științei. De asemenea, pentru a dezvolta un singur sistem de bază care să permită o experiență unificată pe diferite platforme și dimensiuni de dispozitiv.

Principii

Material Design se bazează pe trei principii.

Materialul este metafora

Inspirat de studiul hârtiei și al cernelii, materialul trăiește în spațiul 3D și se bazează pe realitatea tactilă. Oferă iluzia spațiului prin utilizarea umbrelor realiste. Materialul de hârtie trebuie să respecte legile fizicii (adică două bucăți de hârtie pot să nu călătorească una prin alta), dar pot depăși lumea fizică (adică o hârtie poate crește sau se micșorează).

Îndrăzneț, grafic, intenționat

Alegerea deliberată a culorilor, imaginile de la margine la margine, tipografia la scară largă și spațiul alb intenționat creează o interfață îndrăzneață și grafică care cufundă utilizatorul în experiență. Butonul de acțiune plutitor, sau FAB, este un exemplu excelent al acestui principiu. Ați observat acel cerc mic cu simbolul „plus” care plutește în aplicația dvs. Google Inbox? Material Design face foarte evident că acesta este un buton important.

Mișcarea oferă sens

Mișcarea este semnificativă și adecvată, servind la concentrarea atenției și la menținerea continuității. Feedback-ul este subtil, dar clar. Tranzițiile sunt eficiente, dar coerente. Ideea principală aici este să animați doar atunci când are un scop și să nu exagerați.

Cum se potrivește AngularJS în designul materialului?

AngularJS, „Supereroic JavaScript MVW Framework” de la Google, abordează multe dintre provocările întâlnite în dezvoltarea aplicațiilor cu o singură pagină (SPA). Oferă cadrul necesar pentru a crea aplicații web moderne care se conectează la API-uri și nu au nevoie ca pagina să fie reîmprospătată.

AngularJS: O nouă abordare

Angular este ceea ce ar fi fost HTML, dacă ar fi fost conceput pentru aplicații. HTML este un limbaj declarativ excelent pentru documente statice, dar nu creează aplicații dinamice.

Crearea de aplicații dinamice cu HTML a fost întotdeauna un exercițiu de a păcăli browserul să facă lucruri pe care nu era menit să le facă. Există câteva abordări pentru a face acest lucru.

1. Biblioteca - o colecție de funcții. (jQuery)
2. Framework - codul completează dinamic elementele statice atunci când este necesar. (Durandal, Ember)

Angular adoptă o abordare diferită pentru a rezolva această problemă. În loc să se lupte cu HTML-ul dat, creează noi constructe HTML. Angular învață browser-ul nouă sintaxă HTML printr-un construct numit „directive”. Angular vine cu un set de aceste directive încorporat, dar vă permite și să creați directive personalizate, astfel încât vă permite să scrieți propriile elemente HTML.

Nu ar fi bine dacă Google ar crea un set de directive bazate pe principiile Material Design?

Prezentarea materialului unghiular

Google dezvoltă în mod activ Angular Material, o implementare a Material Design în AngularJS. Angular Material oferă un set de componente UI reutilizabile bazate pe sistemul Material Design. Materialul unghiular este compus din mai multe piese. Are o bibliotecă CSS pentru tipografie și alte elemente, oferă o abordare JavaScript interesantă pentru tematică, iar aspectul său receptiv folosește o grilă flexibilă. Dar cea mai atrăgătoare caracteristică a Angular Material este colecția sa uimitoare de directive.

Noțiuni de bază

Am creat un proiect open source pentru a ajuta la lansarea următorului tău proiect Angular Material. Scopul acestui proiect este de a oferi un exemplu de tot ce are de oferit Angular Material, totul sub un singur acoperiș. Navigarea, paginarea, tematica și întreaga colecție de directive sunt gata de funcționare, tot ce trebuie să faceți este să vă introduceți datele și să le legați la HTML.

Aruncați o privire la demonstrația aici sau introduceți codul pe GitHub.

Directive

Directivele sunt o caracteristică de bază Angular. Angular vine cu mai multe directive pe care le folosiți tot timpul, cum ar fi ng-model sau ng-repeat. Sunt o piesă foarte importantă din Angular care face ca cadrul să funcționeze așa cum ar trebui.

Cum să utilizați o directivă de materiale unghiulare

Angular Material extinde această bibliotecă de directive cu un set de directive frumoase inspirate de Material Design. Directivele Angular Material sunt etichete HTML care încep cu „md”; prescurtare pentru Material Design. Nu ar putea fi mult mai ușor de folosit. De exemplu, să aruncăm o privire la butonul vechi bun.

Un buton HTML standard ar putea arăta cam așa.

 <button>Click Me</button>

Un buton Material unghiular arată astfel.

 <md-button>Click Me</md-button>

Și asta este tot ce este necesar pentru a face un buton Material. Acum, există câteva alte opțiuni care sunt disponibile pentru această directivă, cum ar fi tematica și ridicarea acesteia de la suprafață pentru a implica importanță.

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Servicii

Serviciile sunt, de asemenea, esențiale pentru funcționalitatea Angular. Ele sunt folosite pentru a partaja codul în cadrul aplicației. Un serviciu de bază comun, cum ar fi $http, este utilizat și reutilizat pentru apelurile de date în aplicațiile Angular.

Serviciile unghiulare sunt:

1. Instanțiat leneș – Angular instanțiază un serviciu doar atunci când o componentă a aplicației depinde de el.
2. Singletons – Fiecare componentă dependentă de un serviciu primește o referință la instanța unică generată de fabrica de servicii.

Cum să utilizați un serviciu de materiale unghiulare

Angular Material vine la pachet cu unele servicii care oferă o anumită funcționalitate suplimentară aplicației. Ele contribuie, de asemenea, la îndeplinirea unora dintre directive. Un exemplu grozav de serviciu este „toast”.

Un toast este o mică notificare care alunecă din partea de sus a ecranului și dispare după câteva secunde. Utilizarea acestui serviciu este ușoară.

În JavaScript,

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

Acest exemplu arată un toast simplu care apare în partea stângă jos a ecranului și se retrage după 3 secunde.

Unele servicii pot fi personalizate cu șabloane personalizate. În acest caz, serviciul $mdToast poate folosi un șablon HTML personalizat folosind directiva md-toast.

Tematică

Material Design este un limbaj vizual în care temele transmit sens prin culoare, tonuri și contrast. Aceste teme sunt exprimate în toate componentele din întreaga aplicație pentru a oferi o senzație mai unitară.

Conform instrucțiunilor de design de materiale, trebuie să „limitați selecția de culori alegând trei nuanțe de culoare din paleta principală și o culoare de accent din paleta secundară”. Angular Material simplifică urmărirea acestui ghid prin utilizarea JavaScript pentru a configura tema. Dar mai întâi, ce este o paletă și o nuanță?

• Nuanță: o nuanță este o singură culoare dintr-o paletă.
• Paletă: O paletă este o colecție de nuanțe.

De exemplu, o paletă ar fi „verde”, iar o nuanță este o anumită nuanță de verde. Angular Material vine ambalat cu toate paletele valide din specificațiile Material Design. Puteți afla mai multe despre paletele de culori valide aici.

Configurarea temei

Tematica proiectului dvs. este o simplă simplă. În fișierul app.js, setați paletele și nuanțele dorite folosind serviciul Theming Provider.

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Folosind Tema

Pentru a aplica tema componentelor, setați clasa elementului la paleta și nuanța dorite.

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

Aspect

Flexbox este cea mai recentă și cea mai bună adăugare la designul receptiv, iar Angular Material este livrat împreună cu acesta. Dacă sunteți familiarizat cu sistemul de grilă Bootstrap, atunci ar trebui să puteți înțelege rapid. De fapt, Bootstrap trece la Flexbox în viitoarea sa lansare. Are aspectul familiar de rânduri și coloane cu care v-ați obișnuit, dar cu mult mai mult. Aflați cum să utilizați Flexbox cu acest tutorial sau studiați documentația oficială.

Top 9 cele mai bune directive privind materialele unghiulare

Există prea multe directive Angular Material pentru a le enumera pe toate, așa că aș dori să vă împărtășesc favoritele mele.

9. Progres liniar

Adesea, în SPA-uri, paginile au nevoie de timp pentru a încărca date de pe server. Dacă aplicația afișează o pagină goală în acest timp, utilizatorii pot crede că aplicația este ruptă și vor pleca. Informați utilizatorii că datele se încarcă cu directiva Progress Linear. Utilizatorii vor ști să aștepte când vor vedea o bară de progres animată care indică faptul că ceva se întâmplă. Ca alternativă, utilizați directiva Progress Circular pentru un indicator rotund.

8. Selector de date

Directiva Date Picker face din alegerea unei date o experiență curată și simplă pentru utilizator și un adevărat text de scris. Pur și simplu utilizați md-datepicker și, opțional, limitați intervalul cu md-min-date și md-max-date și gata.

7. Completare automată

Completarea automată oferă o experiență plăcută utilizatorului, ajutându-l să aleagă o opțiune. Este ceea ce face ca motorul de căutare Google să fie cel mai bun. Directiva de completare automată adaugă această funcționalitate aplicației dvs. completând cuvintele unui utilizator pe măsură ce scriu. Dar cea mai bună parte a acestei directive este personalizarea. Prin completarea automată cu md-item-template, puteți da mai mult sens sugestiilor. De exemplu, dacă un utilizator căuta nume într-o companie, completarea automată ar putea afișa numele care se potrivesc cu imaginea și rolul companiei, oferind o experiență de utilizator mai robustă.

6. Foaia de jos

Foaia de jos este un mic meniu care glisează în sus din partea de jos a ecranului, acoperind conținutul și concentrându-se. Inițial concepută pentru a fi utilizată exclusiv pentru dispozitive mobile, foaia de jos a câștigat popularitate pe ecranele mai mari. Pentru a-l utiliza, creați un șablon cu md-bottom-sheet care conține fie un md-grid, fie o md-list pentru un aspect grid sau, respectiv, listă. Apoi apelați-l cu serviciul Bottom Sheet, $mdBottomSheet.show().

5. Intrare

Formele de intrare sunt plictisitoare și au fost încă de la începutul internetului. Dar nu trebuie să fie! Oferiți-vă intrărilor un pic de fler cu directiva Input. Încheiați eticheta de intrare cu md-input-container și urmăriți cum prinde viață. Urmăriți cum substituentul dvs. se anime într-o etichetă plutitoare. Validați-vă cu ușurință introducerea cu modificări instantanee, dar subtile, de culoare și mesaje de avertizare. Directiva de intrare preia un element despre care se așteaptă să fie plictisitor și oferă o surpriză plăcută.

4. Pâine prăjită

Cea mai agravantă experiență a utilizatorului este să nu știe ce face aplicația. Ușurăm această agravare cu prăjitoarele de pâine sau cu mici notificări discrete. Pe vremuri, când trimiteam o cerere către server, așteptam pe pagina respectivă până când răspunsul a revenit înainte de a putea merge mai departe. Perioada de atenție a utilizatorilor a scăzut drastic de atunci. În SPA-urile de astăzi, facem clic pe un buton și ne așteptăm să mergem imediat, ocupându-ne de răspunsul serverului atunci când vine. Directiva Toast face din asta o bucată de tort. Un prăjitor de pâine este invocat prin simpla utilizare a Serviciului Toast, $mdToast.show() și setând textul, durata și colțul în care să apară. Creați-vă propriul toaster personalizat cu md-toast.

3. Lista grilă

Listele tale sunt lipsite de pizazz? Listele grilă sunt o alternativă la vizualizările standard de listă. O listă grilă este cea mai bună pentru prezentarea imaginilor și este optimizată pentru înțelegerea vizuală. Funcționează prin așezarea plăcilor de diferite dimensiuni pe o grilă, dând o senzație împrăștiată, eclectică. Dimensiunea și aspectul plăcilor răspund apoi la dimensiunea ecranului. Această directivă va oferi cu siguranță aplicației dvs. un aspect interesant și distractiv.

2. Cadru alb

Conceptul de spațiu este nucleul Material Design și metafora sa de hârtie. Două coli de hârtie în aceeași poziție z (sau adâncime), formează o cusătură și trebuie să se miște împreună. Două coli de hârtie suprapuse, cu poziții Z diferite, formează un pas. Se mișcă independent unul de celălalt. Pentru a urmări designul, trebuie să putem deplasa elementele de-a lungul axei z. Angular Material oferă o modalitate simplă de a face acest lucru. Folosind directiva Whiteframe, setați clasa la md-whiteframe-z{x}, unde x este unitățile de adâncime în sus față de fundal. Cu cât numărul este mai mare, cu atât umbra aruncată de hârtie este mai mare.

1. Sidenav

Crearea unui meniu de navigare lateral nu a fost niciodată mai ușoară. Directiva Sidenav plasează un meniu de navigare în stânga sau în dreapta ecranului. Ținând cont de dispozitivul mobil, glisează înăuntru și în afara așa cum era de așteptat, sau în mod programatic cu un clic pe buton. Un plus frumos este funcția de deschidere a blocării. Navigarea laterală poate fi setată să blocheze deschiderea când ecranul atinge o anumită dimensiune. Prin setarea parametrului md-is-locked-open="$mdMedia('gt-sm')”, meniul va fi ascuns pe telefon, dar blocat deschis pe tabletă și mai mare.

Concluzie

Google își convertește cele mai populare aplicații în Material Design. Acum ei se ocupă de dezvoltarea Angular Material, o implementare a Material Design scrisă în AngularJS. Material Design folosește o metaforă pe hârtie, intenții îndrăznețe și mișcare semnificativă. AngularJS organizează aplicații cu o singură pagină. Angular Material aplică principiile Material Design aplicațiilor AngularJS.

Material Design este aici, iar Angular Material este o modalitate fantastică de a aplica specificațiile Material design la aplicațiile dvs. de o singură pagină. Dacă doriți să vă creați propria aplicație Angular Material, nu vă pierdeți timpul plecând de la zero. Mai degrabă, începeți cu o aplicație complet funcțională, cu demonstrații ale directivelor, tematica deja configurată și navigarea și rutarea gata de funcționare. Aruncați o privire la demonstrația aici sau introduceți codul pe GitHub. Desigur, puteți afla totul despre Angular Material vizitând documentația oficială.

Ce părere aveți despre alegerile mele pentru cele mai bune directive de material unghiular? Le-am inteles bine? Care sunt preferatele tale?