Crea app Web ultramoderne con materiale angolare

Alla conferenza I/O di Google nel 2014, Google ha annunciato Material Design, il loro nuovo linguaggio di progettazione. Da allora hanno convertito gran parte delle loro applicazioni popolari per aderire a questa nuova specifica nel tentativo di fornire un'esperienza coerente. Ora stanno cercando di convincere anche te a seguirlo.

Che cos'è il design dei materiali?

Dopo una visita alle specifiche ufficiali di Material Design, avrai immediatamente una sensazione di minimalismo ultramoderno. Forme di base e colori piatti sono il tema qui. Passare attraverso la documentazione è piuttosto un'esperienza. Ti consiglio di dare un'occhiata di persona, ma te lo riassumo qui.

Obbiettivo

Lo scopo è creare un linguaggio visivo che sintetizzi i principi classici del buon design con l'innovazione e le possibilità della tecnologia e della scienza. Anche per sviluppare un unico sistema sottostante che consenta un'esperienza unificata su varie piattaforme e dimensioni dei dispositivi.

I principi

Il Material Design si basa su tre principi.

Il materiale è la metafora

Ispirato dallo studio della carta e dell'inchiostro, il materiale vive nello spazio 3D e si basa sulla realtà tattile. Dà l'illusione dello spazio usando ombre realistiche. Il materiale cartaceo deve rispettare le leggi della fisica (es. due pezzi di carta potrebbero non viaggiare l'uno attraverso l'altro), ma possono sostituire il mondo fisico (es. una carta può crescere o restringersi).

Audace, grafico, intenzionale

Scelte di colore deliberate, immagini da bordo a bordo, tipografia su larga scala e spazio bianco intenzionale creano un'interfaccia grafica audace che immerge l'utente nell'esperienza. Il Floating Action Button, o FAB, è un ottimo esempio di questo principio. Hai notato quel cerchietto con il simbolo "più" che fluttua nell'app Google Inbox? Material Design rende molto evidente che questo è un pulsante importante.

Il movimento fornisce significato

Il movimento è significativo e appropriato, serve a focalizzare l'attenzione e mantenere la continuità. Il feedback è sottile ma chiaro. Le transizioni sono efficienti ma coerenti. Il punto principale qui è animare solo quando ha uno scopo e non esagerare.

Come si inserisce AngularJS nel design dei materiali?

AngularJS, il "Superheroic JavaScript MVW Framework" di Google, affronta molte delle sfide incontrate nello sviluppo di applicazioni a pagina singola (SPA). Fornisce il framework necessario per creare moderne applicazioni Web che si connettono alle API e non necessitano mai di aggiornare la pagina.

AngularJS: un nuovo approccio

Angular è ciò che l'HTML sarebbe stato, se fosse stato progettato per le applicazioni. L'HTML è un ottimo linguaggio dichiarativo per documenti statici, ma non tanto per creare applicazioni dinamiche.

La creazione di applicazioni dinamiche con HTML è sempre stata un esercizio per indurre il browser a fare cose che non doveva fare. Ci sono un paio di approcci per farlo.

1. Libreria: una raccolta di funzioni. (jQuery)
2. Framework: il codice riempie dinamicamente gli elementi statici quando necessario. (Durandal, Ember)

Angular adotta un approccio diverso per risolvere questo problema. Invece di lottare con l'HTML che gli viene fornito, crea nuovi costrutti HTML. Angular insegna al browser la nuova sintassi HTML attraverso un costrutto chiamato 'direttive'. Angular viene fornito con un set di queste direttive integrate, ma ti consente anche di creare direttive personalizzate, quindi ti consente di scrivere i tuoi elementi HTML.

Non sarebbe bello se Google creasse una serie di direttive basate sui principi del Material Design?

Presentazione del materiale angolare

Google sta sviluppando attivamente Angular Material, un'implementazione di Material Design in AngularJS. Angular Material fornisce una serie di componenti dell'interfaccia utente riutilizzabili basati sul sistema Material Design. Il materiale angolare è composto da più pezzi. Ha una libreria CSS per la tipografia e altri elementi, fornisce un interessante approccio JavaScript per i temi e il suo layout reattivo utilizza una griglia flessibile. Ma la caratteristica più interessante di Angular Material è la sua straordinaria collezione di direttive.

Iniziare

Ho creato un progetto open source per aiutarti a far ripartire il tuo prossimo progetto di materiale angolare. Lo scopo di questo progetto è quello di fornire un esempio di tutto ciò che Angular Material ha da offrire, tutto sotto lo stesso tetto. Navigazione, paging, temi e l'intera raccolta di direttive sono pronti per l'uso, tutto ciò che devi fare è inserire i tuoi dati e associarli all'HTML.

Dai un'occhiata alla demo qui o esegui il fork del codice su GitHub.

Direttive

Le direttive sono una caratteristica angolare fondamentale. Angular viene fornito con diverse direttive che usi sempre come ng-model o ng-repeat. Sono un pezzo molto importante di Angular che fa funzionare il framework come dovrebbe.

Come utilizzare una direttiva materiale angolare

Angular Material estende questa libreria di direttive con una serie di bellissime direttive ispirate al Material Design. Le direttive Angular Material sono tag HTML che iniziano con 'md'; abbreviazione di Material Design. Non potrebbero essere molto più facili da usare. Ad esempio, diamo un'occhiata al buon vecchio pulsante.

Un pulsante HTML standard potrebbe assomigliare a questo.

 <button>Click Me</button>

Un pulsante Materiale angolare ha questo aspetto.

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

E questo è tutto ciò che serve per creare un pulsante Materiale. Ora, ci sono molte altre opzioni disponibili per questa direttiva, come tematizzarla e sollevarla dalla superficie per implicare importanza.

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

Servizi

I servizi sono anche fondamentali per la funzionalità Angular. Vengono utilizzati per condividere il codice nell'applicazione. Un servizio di base comune come $http viene utilizzato e riutilizzato per le chiamate dati nelle applicazioni Angular.

I servizi angolari sono:

1. Istanziato pigramente: Angular istanzia un servizio solo quando un componente dell'applicazione dipende da esso.
2. Singleton: ogni componente dipendente da un servizio ottiene un riferimento alla singola istanza generata dalla service factory.

Come utilizzare un servizio materiale angolare

Angular Material viene fornito con alcuni servizi che forniscono alcune funzionalità extra all'applicazione. Contribuiscono inoltre all'attuazione di alcune delle direttive. Un ottimo esempio di servizio è il "brindisi".

Un brindisi è una piccola notifica che scorre dalla parte superiore dello schermo e scompare dopo pochi secondi. Utilizzare questo servizio è facile.

In JavaScript,

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

Questo esempio mostra un semplice brindisi che compare in basso a sinistra dello schermo e si ritira dopo 3 secondi.

Alcuni servizi possono essere personalizzati con template personalizzati. In questo caso, il servizio $mdToast può utilizzare un modello HTML personalizzato utilizzando la direttiva md-toast.

Temi

Material Design è un linguaggio visivo in cui i temi trasmettono significato attraverso il colore, i toni e il contrasto. Questi temi sono espressi in tutti i componenti dell'intera applicazione per fornire una sensazione più unificata.

Secondo le linee guida per la progettazione dei materiali, è necessario "limitare la selezione dei colori scegliendo tre tonalità di colore dalla tavolozza principale e un colore accento dalla tavolozza secondaria". Angular Material rende semplice seguire questa linea guida utilizzando JavaScript per configurare il tema. Ma prima, cos'è una tavolozza e una tonalità?

• Tonalità: una tonalità è un singolo colore in una tavolozza.
• Tavolozza: una tavolozza è una raccolta di sfumature.

Ad esempio, una tavolozza sarebbe "verde" e una tonalità è una particolare sfumatura di verde. Angular Material viene fornito con tutte le tavolozze valide delle specifiche Material Design. Puoi saperne di più sulle tavolozze di colori valide qui.

Configurazione del tema

Temizzare il tuo progetto è un gioco da ragazzi. Nel file app.js, imposta le tavolozze e le tonalità desiderate utilizzando il servizio 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'); });

Usando il tema

Per applicare il tema ai componenti, impostare la classe dell'elemento sulla tavolozza e la tonalità desiderate.

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

Disposizione

Flexbox è l'ultima e più grande aggiunta al design reattivo e Angular Material viene fornito con esso. Se hai familiarità con il sistema di griglia Bootstrap, dovresti essere in grado di prendere piede rapidamente. In effetti, Bootstrap sta passando a Flexbox nella sua prossima versione. Ha il layout familiare di righe e colonne a cui sei abituato, ma con molto di più. Scopri come utilizzare Flexbox con questo tutorial o studia la documentazione ufficiale.

Le 9 migliori direttive sui materiali angolari

Ci sono troppe direttive sui materiali angolari per elencarle tutte, quindi vorrei condividere con voi i miei preferiti.

9. Progresso lineare

Spesso nelle SPA, le pagine hanno bisogno di tempo per caricare i dati dal server. Se l'applicazione mostra una pagina vuota durante questo periodo, gli utenti potrebbero pensare che l'applicazione sia interrotta e se ne andrà. Fai sapere agli utenti che i dati vengono caricati con la direttiva Progress Linear. Gli utenti sapranno di aspettare quando vedranno una barra di avanzamento animata che indica che sta succedendo qualcosa. In alternativa, utilizzare la direttiva Progress Circular per un indicatore rotondo.

8. Selettore data

La direttiva Date Picker rende la scelta di una data un'esperienza semplice e pulita per l'utente e un vero e proprio one-liner da scrivere. Usa semplicemente md-datepicker e opzionalmente limita l'intervallo con md-min-date e md-max-date e il gioco è fatto.

7. Completamento automatico

Il completamento automatico offre un'esperienza utente piacevole aiutando l'utente a scegliere un'opzione. È ciò che rende il motore di ricerca di Google il migliore. La direttiva Autocomplete aggiunge questa funzionalità all'applicazione completando le parole di un utente durante la digitazione. Ma la parte migliore di questa direttiva è la personalizzazione. Riempiendo il tuo completamento automatico con md-item-template puoi dare più significato ai suggerimenti. Ad esempio, se un utente stava cercando nomi in un'azienda, il completamento automatico potrebbe mostrare i nomi corrispondenti con la loro immagine e il ruolo dell'azienda, offrendo un'esperienza utente più solida.

6. Foglio inferiore

Il foglio inferiore è un piccolo menu che scorre verso l'alto dalla parte inferiore dello schermo, coprendo il contenuto e mettendo a fuoco. Originariamente concepito per essere utilizzato esclusivamente per dispositivi mobili, il foglio inferiore sta guadagnando popolarità su schermi più grandi. Per usarlo, crea un modello con md-bottom-sheet contenente una griglia md o una lista md rispettivamente per un layout griglia o un layout elenco. Quindi chiamalo con il servizio Bottom Sheet, $mdBottomSheet.show().

5. Ingresso

I moduli di input sono noiosi e lo sono dall'inizio di Internet. Ma non devono esserlo! Dai un tocco di stile ai tuoi input con la direttiva Input. Avvolgi il tuo tag di input con md-input-container e guardalo prendere vita. Guarda come il tuo segnaposto si anima in un'etichetta mobile. Convalida facilmente il tuo input con cambiamenti di colore istantanei ma sottili e messaggi di avviso. La direttiva di input prende un elemento che dovrebbe essere noioso e offre una piacevole sorpresa.

4. Brindisi

L'esperienza utente più aggravante è non sapere cosa sta facendo l'applicazione. Alleviamo questo aggravamento con tostapane o piccole notifiche discrete. In passato, quando inviavamo una richiesta al server, aspettavamo su quella pagina fino a quando non tornava la risposta prima di poter andare avanti. La capacità di attenzione dell'utente è diminuita drasticamente da allora. Nelle SPA di oggi, facciamo clic su un pulsante e prevediamo di procedere immediatamente, occupandoci della risposta del server quando arriva. La direttiva Toast lo rende un gioco da ragazzi. Un tostapane viene richiamato semplicemente utilizzando il servizio Toast, $mdToast.show() e impostando il testo, la durata e l'angolo in cui apparire. Crea il tuo tostapane personalizzato con md-toast.

3. Elenco griglia

Le tue liste mancano di pizazz? Gli elenchi a griglia sono un'alternativa alle visualizzazioni elenco standard. Un elenco a griglia è l'ideale per presentare le immagini ed è ottimizzato per la comprensione visiva. Funziona posando piastrelle di diverse dimensioni su una griglia, dando una sensazione sparsa ed eclettica. Le dimensioni e il layout del riquadro rispondono quindi alle dimensioni dello schermo. Questa direttiva darà sicuramente alla tua applicazione un aspetto eccitante e divertente.

2. Cornice bianca

Il concetto di spazio è il fulcro del Material Design e della sua metafora della carta. Due fogli di carta nella stessa posizione z (o profondità), formano una cucitura e devono muoversi insieme. Due fogli di carta sovrapposti, con diverse posizioni z, formano un gradino. Si muovono indipendentemente l'uno dall'altro. Per seguire il progetto, dobbiamo essere in grado di spostare gli elementi lungo l'asse z. Angular Material fornisce un modo semplice per farlo. Usando la direttiva Whiteframe, imposta la classe su md-whiteframe-z{x}, dove x è l'unità di profondità rispetto allo sfondo. Maggiore è il numero, maggiore è l'ombra proiettata dalla carta.

1. Sidenav

Creare un menu di navigazione laterale non è mai stato così facile. La direttiva Sidenav inserisce un menu di navigazione a sinistra oa destra dello schermo. Tenendo presente i dispositivi mobili, scorre dentro e fuori come previsto o in modo programmatico con un clic del pulsante. Una bella aggiunta è la funzione di apertura del lucchetto. La navigazione laterale può essere impostata per bloccarsi aperta quando lo schermo raggiunge una certa dimensione. Impostando il parametro md-is-locked-open=”$mdMedia('gt-sm')” il menu sarà nascosto sul telefono ma bloccato aperto su tablet e versioni successive.

Conclusione

Google sta convertendo le sue applicazioni più popolari in Material Design. Ora stanno guidando lo sviluppo di Angular Material, un'implementazione di Material Design scritta in AngularJS. Material Design utilizza una metafora della carta, intenzioni audaci e un movimento significativo. AngularJS organizza applicazioni a pagina singola. Angular Material applica i principi di Material Design alle applicazioni AngularJS.

Material Design è qui e Angular Material è un modo fantastico per applicare le specifiche di Material design alle tue applicazioni a pagina singola. Se vuoi creare la tua applicazione Angular Material, non perdere tempo a partire da zero. Piuttosto, inizia con un'app perfettamente funzionante con demo delle direttive, temi già impostati e navigazione e routing pronti per l'uso. Dai un'occhiata alla demo qui o esegui il fork del codice su GitHub. Naturalmente, puoi anche imparare tutto su Angular Material visitando la documentazione ufficiale.

Cosa ne pensi delle mie scelte per le migliori direttive sui materiali angolari? Li ho azzeccati? Quali sono i tuoi preferiti?