Share
Angular si è evoluto nel corso degli anni e nuove funzionalità entusiasmanti sono state aggiunte continuamente ad ogni versione. Uno dei miglioramenti è in Material Design, che viene fornito con nuovi componenti. Questo tutorial vedrà il materiale angolare e come incorporarlo nei progetti Angular 6.
Material Design è un linguaggio di progettazione per le app Web e mobile sviluppato da Google nel 2014. Material Design semplifica la personalizzazione dell'interfaccia utente degli sviluppatori mantenendo allo stesso tempo un'interfaccia di app di bell'aspetto con cui gli utenti si trovano a proprio agio. Con Material Design, ottieni un formato ben organizzato e la flessibilità per esprimere il tuo marchio e il tuo stile.
Per un esempio di Material Design, controlla Houzz, un'applicazione di design per la casa che ha vinto i premi Google Play nel 2016. Questa app utilizza Material Design per adattarsi alle sue numerose funzionalità nel limitato spazio dei dispositivi mobili. Ciò fornisce una buona esperienza all'utente consentendo loro di visualizzare e navigare nell'applicazione senza sentirsi sopraffatti. È davvero una delle migliori app di Material Design.
Questo post non riguarda Material Design, quindi non entreremo in tutti i dettagli. Se vuoi saperne di più, c'è un ottimo tutorial su Material Design sul blog Envato.
Il materiale angolare è costituito da una suite di componenti angolari pre-costruiti. A differenza di Bootstrap, che offre componenti che puoi modellare come desideri, Angular Material si impegna a fornire un'esperienza utente avanzata e coerente. Allo stesso tempo, ti dà la possibilità di controllare come si comportano i diversi componenti.
Proprio come Angular, Angular Material si è evoluto molto dalla sua versione iniziale, con grandi miglioramenti e correzioni di bug.
Per aggiungere materiale angolare a un progetto, useremo il ng aggiungi comando che viene utilizzato per aggiungere nuove funzionalità ai progetti Angular. Questo comando sembra essere una nuova funzionalità in Angular 6 ed è semplice come:
ng add @ angular / material
Questo comando aggiungerà la libreria a un progetto esistente e inserirà il tema CSS in angular.json. Aggiungerà anche script in index.html e aggiorna il AppModule.
Un'altra caratteristica di Angular 6 è ng aggiornamento, che aggiorna le dipendenze di npm quando viene rilasciata una nuova versione. Aggiorna inoltre il codice RxJS e il codice del material design per sfruttare le nuove API.
Il materiale angolare è costituito da diversi componenti di progettazione che rientrano nelle seguenti categorie:
È possibile generare i componenti di avviamento usando il ng aggiornamento comando. Alcuni degli schemi disponibili tramite questo comando sono:
Questi schemi possono essere facilmente installati con ng generare comando come segue:
Accentsconagua
ng generate @ angular / material: material-table --name : genera un componente che visualizza i dati con una tabella di dating genera @ angular / material: material-nav --name : genera un componente con una navigazione laterale e una barra degli strumenting genera @ angular / material: material-dashboard --name : genera un componente che contiene un elenco griglia dinamico di carte.
Per iniziare, avrai bisogno della CLI angolare. Se non è installata la CLI Angolare, è sufficiente installarla inviando il seguente comando.
npm install -g @ angular / cli
Successivamente, avremo bisogno di inizializzare un nuovo progetto angolare. Per fare ciò, emettere il seguente comando, dove Materiale-ng è il nome del nostro progetto angolare.
nuovo materiale-ng
Questo comando crea diversi file modello angolari per il progetto e installa le necessarie dipendenze iniziali.
Vai nella directory del tuo progetto e aggiungi Angular Material al tuo progetto.
cd MaterialApp ng add @ angular / material
Successivamente, aggiungeremo alcuni componenti comuni a molte applicazioni, come la navigazione.
Per aggiungere una barra di navigazione, emetti semplicemente:
ng genera @ angular / material: material-nav --name myNav
Questo comando aggiunge una navigazione laterale e un componente cassetto pieghevoli. Si dovrebbe ottenere il seguente risultato, che ha quattro file generati per noi, vale a dire my-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, e my-nav.component.ts.
CREA src / app / my-nav / my-nav.component.css (129 byte) CREA src / app / my-nav / my-nav.component.html (958 byte) CREA src / app / my-nav / my -nav.component.spec.ts (699 byte) CREA src / app / my-nav / my-nav.component.ts (580 byte) UPDATE src / app / app.module.ts (795 byte)
Ora aperto my-nav.component.html e dovresti vedere tutto il codice HTML per la navigazione che è stato generato per noi.
Menu Link 1 Link 2 Link 3 Materiale-ng
Per impostazione predefinita, un progetto angolare di base servirà la pagina predefinita, ma vogliamo essere in grado di vedere la magia di Material Design! Per utilizzare il nostro componente nav di Material Design generato, apri app.component.html e sostituisci tutto il codice con:
Ora, quando esegui l'app, vedrai la barra di navigazione.
Dovresti anche notare che il componente di navigazione che abbiamo aggiunto è stato importato nel modulo principale come mostrato:
# app.module.ts importa BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; import BrowserAnimationsModule da '@ angular / platform-browser / animations'; import MyNavComponent da './my-nav/my-nav.component'; importare LayoutModule da '@ angular / cdk / layout'; import MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule da '@ angular / material'; @NgModule (dichiarazioni: [AppComponent, MyNavComponent], importa: [BrowserModule, BrowserAnimationsModule, LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule], provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule
Nel my-nav.component.html, facciamo anche alcune modifiche agli elenchi di menu:
Casa Controlli modulo Navigazione Layout Pulsanti e indicatori Popup e modali Tabella dati
Ora puoi avviare il server di sviluppo eseguendo:
ng server -open
Il risultato dovrebbe essere simile a questo:
Come puoi vedere, Angular Material offre un modo semplice per far funzionare la tua applicazione. Con pochi comandi e poche righe di codice, siamo stati in grado di incorporare Material Design nella nostra applicazione Angular!
Visita il nostro repository GitHub per il codice sorgente completo di questa app di esempio.
Spero che questo tutorial ti abbia aiutato a capire come utilizzare la potenza di Material Design nella tua app per un'interfaccia utente di alto livello. Per ulteriori informazioni su Material Design in Angular 6, controlla i documenti ufficiali che contengono modelli pronti per l'uso. È un ottimo posto per conoscere Angular. Puoi anche consultare i nostri tutorial e corsi Angular qui su Envato Tuts+!
