Tutorial ed esempio sulla progettazione di materiali angolari 8

Blog

Durante questo tutorial, impareremo a utilizzare Angular Material 8 per creare interfacce utente professionali.
Nel tutorial precedente, hai visto come puoi installare Angular CLI 8 e generare un nuovissimo front-end Angular 8. Ora vediamo come aggiungere Angular Material 8 alla nostra applicazione Angular...



Cos'è il Material Design?

Material Design è un linguaggio di progettazione creato da Google nel 2014. Detta una serie di principi e linee guida per la creazione di interfacce utente tra cui movimento (animazioni) e interazione (gesti).



Cos'è il materiale angolare?

Angular Material è l'implementazione di Material Design per Angular. Offre una miriade di componenti e modelli per la navigazione, moduli, pulsanti e layout.



In questo momento, Angular Material 8 è la versione più recente.

In questo tutorial vedremo come aggiungere Material Design ad Angular 8 in due modi:

  • La strada più lunga: seguendo una serie di passaggi manualmente. Funziona per le versioni Angular 4+.
  • La via più breve: usando |_+_| comando per aggiungere rapidamente materiale angolare in un solo passaggio utilizzando Schemi angolari. Questo metodo funziona solo con Angular 6+.

Passaggio 1: installazione di materiale angolare 8 e CDK angolare

bash ottieni la dimensione del file

Vai al tuo terminale, naviga all'interno dell'applicazione front-end Angular creata e quindi esegui i seguenti comandi per installare Angular Material 8 e Angular 8 CDK

ng add

Passaggio 2: aggiunta del supporto per le animazioni angolari

Alcuni componenti di Angular Material utilizzano animazioni, quindi è necessario aggiungere il supporto per le animazioni nell'applicazione front-end Angular 8 per abilitare queste animazioni.

Torna al tuo terminale ed esegui il seguente comando per installare il modulo di animazione angolare

$ npm install --save @angular/material @angular/cdk

Successivamente, devi solo aggiungere questo modulo alla configurazione dell'app. Quindi vai avanti e apri il |_+_| file quindi importa il file |_+_| modulo e aggiungilo alla lista di |_+_|:

$ npm install --save @angular/animations

Passaggio 3: aggiunta del supporto per i gesti con HammerJS

Alcuni componenti del materiale angolare dipendono da martelloJS per il supporto dei gesti. Quindi devi aggiungere HammerJS alla tua applicazione per ottenere tutte le funzionalità di quei componenti.

Puoi semplicemente andare al tuo terminale e installare la libreria da |_+_|:

src/app/app.module.ts

Dovrai quindi importare la libreria nel punto di ingresso della tua app (|_+_|)

BrowserAnimationsModule

Passaggio 4: inclusione di un tema

I temi sono necessari per aggiungere stili ai componenti dei materiali utilizzati nell'applicazione. Puoi utilizzare un tema personalizzato o predefinito.

reazione-div-100vh

I temi sono file CSS. Per trovare tutti i temi predefiniti disponibili puoi controllare il |_+_| cartella nella |_+_| cartella nel tuo progetto:

imports
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; imports: [ BrowserModule, BrowserAnimationsModule ],
npm
$ npm install --save hammerjs

Quindi usiamo il |_+_| tema per la nostra applicazione.

Basta aprire il |_+_| file e aggiungi il seguente CSS |_+_|

main.ts

Aggiunta di materiale angolare 8 con /* [...] */ import 'hammerjs'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err)); e Schemi

Con il rilascio di Angular 6+, il nuovo |_+_| è disponibile il comando che semplifica l'aggiunta di nuove funzionalità al progetto.

Questo comando utilizzerà il gestore di pacchetti per scaricare nuove dipendenze e invocare gli script di installazione corrispondenti. Questo assicura che il progetto venga aggiornato con dipendenze, modifiche alla configurazione e che venga eseguito il codice di inizializzazione specifico del pacchetto.

Di seguito, useremo il di add comando per aggiungere Angular Material all'applicazione Angular 8 precedentemente creata. Torna alla riga di comando, assicurati di navigare all'interno della cartella del tuo progetto ed esegui il seguente comando:

@angular/material/prebuilt-themes

Eseguendo questo comando, stiamo installando Angular Material 8 e il tema corrispondente nel progetto. Inoltre i nuovi componenti di avviamento sono registrati in di generare.

inserisci l'elemento nell'array javascript

Conclusione

Ecco fatto, ora abbiamo aggiornato la nostra applicazione front-end Angular 8 per utilizzare Angular Material. Nel prossimo tutorial vedremo un esempio più dettagliato dell'utilizzo di Material data-table per creare tabelle per i nostri dati.

#angolare

www.techiediaries.com

Tutorial ed esempio sulla progettazione di materiali angolari 8

Durante questo tutorial, impareremo a utilizzare Angular Material 8 per creare interfacce utente professionali. Nel tutorial precedente, hai visto come puoi installare Angular CLI 8 e generare un nuovissimo front-end Angular 8. Ora vediamo come aggiungere Angular Material 8 alla nostra applicazione Angular...