Come costruire un'interfaccia utente di accesso con design angolare e materiale

Questo tutorial ti mostrerà come costruire una bellissima interfaccia utente di login e registrazione con Angular Material. Vedremo i vari componenti del design dei materiali e come possono essere utilizzati per realizzare applicazioni dall'aspetto professionale. Il codice completo per questo tutorial può essere trovato nel nostro repository GitHub.

Iniziare

Inizieremo creando un'applicazione angolare. Si spera che siano già installati Node.js e Angular CLI nel proprio ambiente di lavoro.

Utilizzare il seguente comando per creare una nuova app Angolare.

# crea un nuovo progetto angolare sotto il nome responsive-angular-material ng new registration-login-angular-material

Questo comando crea tutti i file necessari per eseguire il boot di un'applicazione Angolare. Il prossimo passo sarà aggiungere materiale angolare nella tua applicazione. 

cd responsive-angular-material / #install angular material ng add @ angular / material

Creazione di componenti mediante la CLI angolare

I componenti in Angolare sono gli elementi costitutivi dell'applicazione. Sebbene sia possibile creare manualmente componenti, Angular CLI semplifica la generazione automatica di componenti che contengono tutto il codice di avviamento necessario. Per generare un componente in CLI angolare, è sufficiente eseguire il seguente comando:

# MyComponent è il nome del componente componente ng g MyComponent

La nostra app avrà i seguenti componenti:

• il Registrazione componente
• il Accesso Componente

Generiamo ora quei componenti.

# Componente di registrazione ng componente g Componente di registrazione # componente componente ng componente LoginComponent

Aggiungere un tema

La bellezza di Angular Material è che viene fornito con temi predefiniti, in modo da poter facilmente avviare l'aspetto e l'aspetto dell'applicazione semplicemente inserendo alcuni semplici snippet di codice nella tua app. Per aggiungere un tema, è sufficiente importarlo in style.css.

/*style.css*/ @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Costruire l'interfaccia utente

Vogliamo che la nostra interfaccia utente sia dotata di una barra di navigazione con collegamenti per la registrazione e il login. Creeremo quindi una barra di navigazione con due pulsanti che collegano ai componenti dell'app.

Per creare una barra degli strumenti e pulsanti, si utilizza il  e  componenti rispettivamente.

Vai avanti e aggiungi il codice HTML per l'interfaccia utente in src / app / app.component.html. Si noti che abbiamo anche aggiunto collegamenti ai percorsi.

    CASA  Registrati Login  

Successivamente, aggiungeremo uno stile alla nostra interfaccia utente. Aperto app.component.css e aggiungi i seguenti stili CSS.

.spacer flex: 1 1 auto; 

Importazione di componenti di materiale angolare

Devi anche importare i moduli da @ Angolare / materiale. È possibile scegliere di importarli dal modulo principale o creare un modulo separato che conterrà tutti i moduli di progettazione dei materiali. Dato che lavoreremo con molti di questi moduli quando creeremo il resto dell'interfaccia utente, creeremo un modulo separato per tutti i componenti. Vai avanti e crea un nuovo file src / app / material.module.ts.

Aggiungi i moduli per il  , , e  componenti nel file come mostrato di seguito.

import NgModule da '@ angular / core'; import MatButtonModule, MatToolbarModule da '@ angular / material'; @NgModule (importazioni: [MatButtonModule, MatToolbarModule], esporta: [MatButtonModule, MatToolbarModule],) classe di esportazione MyMaterialModule 

Quindi, da altri componenti nel nostro codice, abbiamo solo bisogno di includere il modulo che abbiamo appena creato-app / app.module.ts-come mostrato di seguito.

// app / app.module.ts import MyMaterialModule da './material.module'; @NgModule (importazioni: [BrowserModule, BrowserAnimationsModule, MyMaterialModule,],)

Emettere il ng servire comando per testare la tua applicazione, e dovresti vedere una bella area di navigazione con Registrare e Accesso link.

Abilita il routing

Il routing consente agli utenti di navigare tra le diverse pagine. Per abilitare il routing nella nostra applicazione, definiremo prima la configurazione del routing. Per fare ciò, aggiungere il seguente codice a app.module.ts.

importare RouterModule, Routes da '@ angular / router'; importazioni: [BrowserModule, BrowserAnimationsModule, MyMaterialModule, RouterModule.forRoot ([path: ", redirectTo: '/', pathMatch: 'full', percorso: 'register', componente: RegistrationComponentComponent, percorso: 'login' , componente: LoginComponentComponent,]),],

Il prossimo passo sarà aggiungere un  elemento che consente a Angular Router di sapere dove posizionare i componenti indirizzati. Il app.component.html il file dovrebbe ora assomigliare a questo:

    CASA  Registrati Login   

Abbiamo posizionato il router in modo che i componenti vengano visualizzati sotto la barra di navigazione.

UI di registrazione

In questa sezione, utilizzeremo principalmente i componenti di layout e controllo del modulo. Questa interfaccia utente mostrerà questi componenti di Material Design:

• componente della carta () -un contenitore di contenuti per testo, foto e azioni nel contesto di un singolo soggetto
• componente dell'etichetta () -utilizzato per specificare un'etichetta per il campo modulo
• componente di input () -specifica un campo di input
• componente del campo modulo () - Avvolge diversi componenti Angolari per creare un campo modulo
• componente checkbox () - una casella di controllo nativa con uno stile di progettazione materiale avanzato
• componente di selezione data () -un selezionatore di date avanzato

Ma prima, importiamoli dentro src / app / material.ts.

import NgModule da '@ angular / core'; import MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatListModule, da '@ angular / material'; import MatDatepickerModule da '@ angular / material / datepicker'; import FormsModule, ReactiveFormsModule da '@ angular / forms'; @NgModule (importazioni: [MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,], le esportazioni: [MatNativeDateModule, FormsModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,],) classe di esportazione MyMaterialModule 

Inizieremo con il , che conterrà tutto il contenuto nell'interfaccia utente di registrazione. Aperto registration-component.component.html e aggiungi il seguente codice.

 Registrazione         

Successivamente, aggiungeremo un modulo HTML all'interno della sezione del contenuto che conterrà tutti i nostri campi modulo.

  Registrazione    
  
     

Successivamente, aggiungeremo campi modulo per il nome, il cognome, l'indirizzo, l'e-mail e la password. Useremo  creare etichette e  per creare i campi di input.

 
  Nome di battesimo    Cognome    Indirizzo    E-mail    Parola d'ordine   
 

Successivamente, aggiungeremo una casella di controllo per sesso e un selettore di date per la data di nascita. Noi useremo  e  che hanno migliorato lo stile e le animazioni di Material Design.

 
 Genere:  Maschio Femmina Altro  
  Data di nascita    

L'ultimo bit sarà un pulsante dopo il  per l'invio delle informazioni dell'utente.

 
  
   REGISTRARE  

Forma Styling

Mettiamo un po 'di stile sulle nostre forme per renderle più presentabili. Aperto creare-account.component.css e aggiungi i seguenti stili CSS.

.my-form min-width: 150px; larghezza massima: 500 px; larghezza: 100%;  .full-width width: 100%; 

L'interfaccia utente di registrazione sarà simile a questa:

Creazione dell'interfaccia utente per il componente di accesso

L'interfaccia utente di accesso avrà i seguenti componenti:

• componente della carta () -un contenitore di contenuti per testo, foto e azioni nel contesto di un singolo soggetto
• componente di input () -specifica un campo di input

Proprio come abbiamo fatto per l'interfaccia utente della registrazione, avremo un componente della scheda Materiale per ospitare il modulo di accesso.

Il codice HTML per Accesso viene mostrata la pagina, che contiene due ingressi per le credenziali e-mail e password.

 ACCESSO    
  E-mail    Parola d'ordine   
   ACCESSO  

L'interfaccia utente finale sarà simile a questa:

Conclusione

Questo tutorial ha coperto la maggior parte dei componenti di Angular Material necessari per realizzare un'interfaccia utente pienamente funzionante. Come hai visto, Angular Material è molto facile da usare poiché tutti i componenti hanno stili predefiniti. Ciò significa che puoi creare rapidamente belle interfacce utente. Inoltre, la documentazione del materiale angolare fornisce molti esempi ed è facile da seguire.