Comment construire une interface utilisateur de connexion avec une conception angulaire et matérielle

Ce tutoriel va vous montrer comment créer une belle interface utilisateur de connexion et d’enregistrement avec Angular Material. Nous examinerons les différents composants de conception du matériau et leur utilisation pour créer des applications de qualité professionnelle. Le code complet de ce tutoriel se trouve dans notre rapport GitHub.

Commencer

Nous allons commencer par créer une application angulaire. Espérons que Node.js et Angular CLI sont déjà installés dans votre environnement de travail..

Utilisez la commande suivante pour créer une nouvelle application angulaire..

# créer un nouveau projet angulaire sous le nom responsive-angular-material avec le nouveau registration-login-angular-material

Cette commande crée tous les fichiers nécessaires au démarrage d’une application Angular. La prochaine étape consistera à ajouter un matériau angulaire dans votre application.. 

cd responsive-angular-material / #installez le matériel angulaire ng add @ angular / material

Création de composants à l'aide de la CLI angulaire

Les composants de Angular sont les blocs de construction de l'application. Bien que vous puissiez créer manuellement des composants, Angular CLI facilite très facilement la génération automatique de composants contenant tout le code de démarrage nécessaire. Pour générer un composant dans Angular CLI, exécutez simplement la commande suivante:

# MyComponent est le nom de votre composant. MyComponent

Notre application aura les composants suivants:

• la enregistrement composant
• la S'identifier Composant

Générons ces composants maintenant.

Composant d'enregistrement #g Composant RegistrationComponent Composant #login Composant g LoginComponent

Ajout d'un thème

La beauté de Angular Material réside dans le fait qu’il est livré avec des thèmes prédéfinis. Vous pouvez donc facilement améliorer l’apparence de votre application en insérant simplement quelques extraits de code dans votre application. Pour ajouter un thème, importez-le simplement dans style.css.

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

Construire l'interface utilisateur

Nous voulons que notre interface utilisateur comporte une barre de navigation avec des liens pour l'enregistrement et la connexion. Nous allons donc créer une barre de navigation avec deux boutons qui renvoient aux composants de l'application.

Pour créer une barre d’outils et des boutons, vous utilisez le  et  composants respectivement.

Allez-y et ajoutez le code HTML pour l'interface utilisateur dans src / app / app.component.html. Notez que nous avons également ajouté des liens vers les itinéraires.

    MAISON  S'inscrire Login  

Ensuite, nous allons ajouter du style à notre interface utilisateur. Ouvrir app.component.css et ajoutez les styles CSS suivants.

.spacer flex: 1 1 auto; 

Importation de composants de matériaux angulaires

Vous devez également importer les modules de @ angulaire / materiel. Vous pouvez choisir de les importer à partir du module principal ou de créer un module séparé qui contiendra tous les modules de conception de matériau. Comme nous allons travailler avec plusieurs de ces modules lors de la création du reste de l'interface utilisateur, nous allons créer un module séparé pour tous les composants. Allez-y et créez un nouveau fichier src / app / material.module.ts.

Ajoutez les modules pour le  , , et  composants dans le fichier comme indiqué ci-dessous.

importer NgModule de '@ angular / core'; import MatButtonModule, MatToolbarModule depuis '@ angular / material'; @NgModule (importations: [MatButtonModule, MatToolbarModule], exportations: [MatButtonModule, MatToolbarModule],) classe d'exportation MyMaterialModule 

Ensuite, à partir d'autres composants de notre code, il suffit d'inclure le module que nous venons de créer.-app / app.module.ts-comme indiqué ci-dessous.

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

Émettre le ng servir commande pour tester votre application, et vous devriez voir une jolie zone de navigation avec registre et S'identifier liens.

Activer le routage

Le routage permet aux utilisateurs de naviguer entre différentes pages. Pour activer le routage dans notre application, nous allons d’abord définir la configuration du routage. Pour ce faire, ajoutez le code suivant à app.module.ts.

importer RouterModule, Routes de '@ angular / router'; importations: [BrowserModule, BrowserAnimationsModule, MyMaterialModule, RouterModule.forRoot ([path: ", redirectTo: '/', pathMatch: 'complet', chemin: 'register', composant: RegistrationComponentComponent, chemin: 'login' , composant: LoginComponentComponent,]),],

La prochaine étape consistera à ajouter un  élément qui permet au routeur angulaire de savoir où placer les composants routés. le app.component.html Le fichier devrait maintenant ressembler à ceci:

    MAISON  S'inscrire Login   

Nous avons placé la sortie du routeur afin que les composants s'affichent sous la barre de navigation..

IU d'enregistrement

Dans cette section, nous utiliserons principalement les composants de disposition et de contrôle de formulaire. Cette interface utilisateur présentera les composants de conception de matériaux suivants:

• composant de carte () - un conteneur de contenu pour du texte, des photos et des actions dans le contexte d'un seul sujet
• composant d'étiquette () -utilisé pour spécifier une étiquette pour le champ de formulaire
• composant d'entrée () -spécifie un champ de saisie
• composant de champ de formulaire () - enroule plusieurs composants angulaires pour créer un champ de formulaire
• composant de case à cocher () - une case à cocher native avec un style Material Design amélioré
• composant sélecteur de date () -un sélecteur de date amélioré

Mais d'abord, importons-les dans src / app / material.ts.

importer NgModule de '@ angular / core'; import MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatRadioModule, MatRistioModule, de '@ angular Material importer MatDatepickerModule de '@ angular / material / datepicker'; import FormsModule, ReactiveFormsModule depuis '@ angular / forms'; @NgModule (importations: [MatNativeDateModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,], les exportations: [MatNativeDateModule, FormsModule, MatDatepickerModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatInputModule, MatListModule, MatRadioModule,],) classe d'exportation MyMaterialModule 

Nous allons commencer avec le , qui contiendra tout le contenu dans l'interface utilisateur d'enregistrement. Ouvrir registration-composant.component.html et ajoutez le code suivant.

 enregistrement         

Ensuite, nous allons ajouter un formulaire HTML dans la section de contenu qui contiendra tous nos champs de formulaire..

  enregistrement    
  
     

Ensuite, nous ajouterons des champs de formulaire pour le prénom, le nom de famille, l'adresse, l'adresse de messagerie et le mot de passe. Nous allons utiliser  créer des étiquettes et  créer les champs de saisie.

 
  Prénom    Nom de famille    Adresse    Email    Mot de passe   
 

Ensuite, nous ajouterons une case à cocher pour le sexe et un sélecteur de date pour la date de naissance. Nous utiliserons  et  qui ont amélioré le style Material Design et les animations.

 
 Le sexe:  Mâle Femelle Autre  
  Date de naissance    

Le dernier bit sera un bouton après le  pour soumettre les informations utilisateur.

 
  
   REGISTRE  

Style de formulaire

Mettons un peu de style sur nos formulaires pour les rendre plus présentables. Ouvrir create-account.component.css et ajoutez les styles CSS suivants.

.ma-forme min-width: 150px; largeur maximale: 500px; largeur: 100%;  .full-width width: 100%; 

L’Interface d’Inscription ressemblera à ceci:

Construction de l'interface utilisateur pour le composant de connexion

L'interface utilisateur de connexion aura les composants suivants:

• composant de carte () - un conteneur de contenu pour du texte, des photos et des actions dans le contexte d'un seul sujet
• composant d'entrée () -spécifie un champ de saisie

Comme nous l'avons fait pour l'interface utilisateur d'enregistrement, nous aurons un composant de carte Matériau pour héberger le formulaire de connexion..

Le code HTML pour le S'identifier page s'affiche, qui contient deux entrées pour les informations d'identification de courrier électronique et mot de passe.

 S'IDENTIFIER    
  Email    Mot de passe   
   S'IDENTIFIER  

L'interface utilisateur finie ressemblera à ceci:

Conclusion

Ce tutoriel a couvert la plupart des composants Matériau angulaire nécessaires à la création d’une interface utilisateur pleinement fonctionnelle. Comme vous l'avez vu, Angular Material est très facile à utiliser car tous les composants ont des styles prédéfinis. Cela signifie que vous pouvez créer rapidement de belles interfaces utilisateur. De plus, la documentation sur le matériau angulaire fournit de nombreux exemples et est facile à suivre..