Fermer

mai 21, 2018

Création d'interfaces utilisateur avec des composants de conception de matériaux angulaires –18 minutes de lecture



Dans ce tutoriel, je vais vous présenter le Material Design dans Angular, puis nous verrons comment créer une application angulaire simple avec une interface utilisateur construite à partir de divers composants de matériau angulaire.

Les frameworks basés sur Angular, React et Vue.js ont vu un nombre croissant de collections de composants UI préconstruites devenir disponibles. L'utilisation de telles collections peut aider les développeurs à créer rapidement des applications d'apparence professionnelle.

Conception matérielle

Material Design (nom de code Quantum Paper ) est un langage visuel qui peut être utilisé pour créer des expériences numériques. Il s'agit d'un ensemble de principes et de directives pour les plates-formes et dispositifs d'interactivité, de mouvement et de composants qui simplifient le processus de conception des équipes.

Les composants matériels vous permettent de créer des interfaces utilisateur professionnelles avec des fonctionnalités de modularité et de personnalisation. 19659006] Introduction au matériel angulaire

Le matériel angulaire est la mise en application des principes et des directives de conception matérielle pour l'angulaire. Il contient divers composants de l'interface utilisateur, tels que:

  • contrôles de formulaire (entrée, sélection, case à cocher, sélecteur de date et curseurs, etc.),
  • modèles de navigation (menus, sidenav et barre d'outils)
  • , tabs et listes)
  • buttons
  • indicateurs (barres de progression et spinners)
  • popups et modals
  • tables de données avec en-têtes et pagination etc.

Conditions requises

Avant de pouvoir continuer avec ce tutoriel , vous devez vous assurer que vous avez une machine de développement avec Node (6.9.0+) et NPM (3+) installé.

Vous devez également installer l'interface CLI Angular. Si ce n'est pas le cas, lancez simplement la commande suivante dans votre terminal ou dans l'invite de commande:

 npm install -g @ angular / cli

Créer le projet avec l'interface CLI angulaire

Créons maintenant le projet Angular en utilisant l'interface CLI angulaire. Il suffit d'exécuter la commande suivante:

 ng new angularmaterialdemo

Vous pouvez ensuite servir votre application en exécutant:

 cd angularmaterialdemo
ng servir

L'application sera en cours d'exécution à http: // localhost: 4200 .

Puisque nous allons démontrer différents composants de matériau angulaire, nous devons créer quelques composants angulaires et configurations de routage pour une simple application de démonstration, alors allez-y et utilisez l'interface de ligne de commande pour générer les composants:

 ng g login
ng g composant CustomerList
ng g composant CustomerCreate

Ensuite, ouvrez src / app / app.module.ts et ajoutez la configuration du routeur:

 /*...*/

importer {RouterModule, Routes} à partir de '@ angular / router';

/*...*/

const appRoutes: Routes = [
{ path:  'customer-list', component:  CustomerListComponent },
{ path:  'customer-create', component:  CustomerCreateComponent },
{
path:  'login',
component:  LoginComponent
},
{ path:  '',

redirectTo:  '/login',

pathMatch:  'full'

},
];

Premiers pas avec le matériau angulaire

Maintenant que nous avons une application basique, commençons par installer Angular Material et ses différentes dépendances pour activer les différentes fonctions telles que les gestes et les animations.

Installation de Angular Material et Angular CDK

Commençons par installer Angular Material et Angular CDK à partir de npm.

Retournez à votre terminal et exécutez la commande suivante:

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

Ajout de HammerJS pour le support de gestes

Des composants tels que mat-slide-toggle mat-slider et matTooltip nécessitent le HammerJS bibliothèque pour le support des gestes, vous devez donc l'installer pour obtenir toutes les fonctionnalités de ces composants. Exécutez simplement la commande suivante dans votre terminal:

 npm install --save hammerjs

Ensuite, ouvrez src / main.js (le point d'entrée de votre application) et importez hammerjs

 import 'hammerjs';

Ajouter un thème

Angular Material a un tas de thèmes pré-construits. Pour utiliser un thème, il suffit de l'importer dans styles.css :

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

Vous pouvez trouver plus d'informations sur les thèmes dans ce guide .

Ajout d'icônes matérielles angulaires

Le matériau angulaire est livré avec un composant mat-icon pour les icônes, de sorte que vous Vous devez charger la police d'icône avant de pouvoir l'utiliser.

Ajoutez la balise suivante à votre fichier index.html :


Utilisation d'animations avec des composants de matériau angulaire

La dernière chose est l'activation des animations . Certains composants reposent sur le module d'animations angulaires pour les transitions avancées, vous devez donc installer le module @ angular / animations et inclure le BrowserAnimationsModule dans la configuration de votre module d'application.

revenez à votre terminal et exécutez la commande suivante:

 npm install --save @ angular / animations

Ensuite, ouvrez src / app / app.module.ts et ajoutez le code suivant:

 / * ... * /
importer {BrowserAnimationsModule} à partir de '@ angular / platform-browser / animations';

@NgModule ({
/*...*/
importations: [
BrowserModule,
BrowserAnimationsModule,
],
})
classe d'exportation AppModule {}

Importation de composants de matériau angulaire

Avant de pouvoir utiliser n'importe quel composant de matériau angulaire, vous devez importer son module. Chaque composant a son propre module, vous ne pouvez donc inclure que les composants que vous allez utiliser.

Une autre approche consiste à créer un module séparé et à importer tous les composants angulaires dont vous avez besoin, puis à simplement inclure ce module dans votre module. module d'application.

Alors allez-y et créez un fichier src / app / material.module.ts puis ajoutez le contenu suivant:

 import {NgModule} from '@ angular / core';
importer {MatNativeDateModule, MatSnackBarModule, MatIconModule, MatDialogModule, MatButtonModule, MatTableModule, MatPaginatorModule, MatSortModule, MatTabsModule, MatCheckboxModule, MatToolbarModule, MatCarte, MatCardModule, MatFormField, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule} à partir de '@ angular / material';
importer {MatDatepickerModule} à partir de '@ angular / material / datepicker';
importer {MatRadioModule} à partir de '@ angular / material / radio';
importer {MatSelectModule} à partir de '@ angular / material / select';
importer {MatSliderModule} à partir de '@ angular / material / slider';
importer {MatDividerModule} à partir de '@ angular / material / divider';

@NgModule ({
importations: [MatTabsModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatNativeDateModule,MatDatepickerModule,MatSnackBarModule,MatIconModule,MatDialogModule,MatProgressSpinnerModule,MatButtonModule,MatSortModule,MatTableModule,MatTabsModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule, MatPaginatorModule],
les exportations: [MatTabsModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatNativeDateModule,MatDatepickerModule,MatSnackBarModule,MatIconModule,MatDialogModule,MatProgressSpinnerModule,MatButtonModule,MatSortModule, MatCheckboxModule, MatToolbarModule, MatCardModule,MatTableModule,MatTabsModule, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule, MatPaginatorModule],

})

classe d'exportation MyMaterialModule {}

Ensuite, incluez ce module dans src / app / app.module.ts :

 import {MyMaterialModule} à partir de './material.module';

/*...*/

@NgModule ({

/*...*/

importations: [

/*...*/
MyMaterialModule,
],
/*...*/
})

classe d'exportation AppModule {}

Voilà: vous pouvez maintenant utiliser les composants Angular Material importés dans votre application Angular

Créer l'interface utilisateur de l'application

Vous avez déjà créé les composants de l'application et ajouté la configuration du routeur. Construisons maintenant l'interface utilisateur pour les différents composants en utilisant les composants Angular Material

Construire l'interface utilisateur pour AppComponent

Allez-y et ouvrez src / app / app.component.html puis ajoutez: [19659008] une barre d'outils Material avec trois boutons Material ( mat-button ) pour les liens vers les composants de l'application

  • une sortie de routeur où les composants correspondant à un chemin de routeur seront insérés. le code HTML du composant:

    
    
    
     Clients 
     Créer un client 
     Connexion 
    
    
    

    En ajoutant du style, voici à quoi ressemble la barre d'outils:

     Angular Material: un premier aperçu de la barre d'outils

    Pour créer une barre d'outils, utilisez le composant vous créez une ou plusieurs lignes dans la barre d'outils en utilisant le composant .

    Notez que nous avons importé les modules MatToolbarModule et MatButtonModule de @ angular / material dans le material.module.ts .

    Vous pouvez également utiliser d'autres éléments de navigation tels que menus et encadrés . Construction de l'interface utilisateur pour le composant de connexion

    Après avoir créé l'interface utilisateur du composant racine de notre application, créons l'interface utilisateur du composant de connexion.

    Ouvrir src / app / login / login.component.html et ajoutez le code HTML suivant. Ajoutez une carte Matériel angulaire pour contenir le formulaire de connexion:

    Un composant sert de conteneur à objet unique pour le texte, les photos et les actions. Trouvez plus de détails sur les cartes des documents .

    Ensuite, dans la section "contenu" de la carte, ajoutez le formulaire HTML:

      
    

    Ajoutons maintenant deux entrées pour obtenir le nom d'utilisateur et le mot de passe de l'utilisateur:

      
    
    
    
    
    
    

    De nombreux composants de matériau angulaire doivent être enveloppés dans un composant pour avoir des styles de champs de texte communs tels que le soulignement, l'étiquette flottante et les messages d'indice.

    Ce sont les composants qui sont conçu pour être enveloppé à l'intérieur :

    Enfin, dans la section actions de la carte, ajoutons un bouton Matériau angulaire pour l'action de connexion:

    
        
    
    
    

    Pour créer un bouton Matériau angulaire, il suffit d'utiliser des éléments HTML

    Nous utilisons beaucoup de directives disponibles pour structurer les composants de dialogue:

    • mat-dialog-title : utilisé pour le titre du dialogue, et doit être appliqué aux éléments de titre

      [19659112] etc.

    • : utilisé pour le contenu défilant du dialogue
    • : utilisé comme conteneur pour les actions de dialogue.

    Suivant , ouvrez src / app / app.module.ts et ajoutez ce composant au module:

     @NgModule ({
    
    déclarations: [
    
    /*...*/
        ErrorComponent
    ],
    
    importations: [/*...*/
    ],
    entryComponents: [ErrorComponent],
    /*...*/
    })
    
    classe d'exportation AppModule {}
    

    Ajoutons maintenant la méthode login () (pour déclencher le dialogue d'erreur) au LoginComponent :

     import {Component, OnInit} de '@ angular / core' ;
    importer {MatDialog, MatDialogRef} à partir de '@ angular / material';
    
    / * ... * /
    
    @Composant({
    / * ... * /
    })
    classe d'exportation LoginComponent {
    
        nom d'utilisateur public: string = "";
        mot de passe public: string = "";
    
    
        constructeur (boîte de dialogue privée: MatDialog, routeur privé: Routeur) {}
        s'identifier(){
            if (this.username === "demo" && this.password === "demo")
            {
                this.router.navigate (['customer-list']);
            }
            autre
            {
                this.dialog.open (ErrorComponent, {data: {
                message: "Vos informations de connexion sont incorrectes!"
                }});
            }
        }
    }
    

    Nous injectons simplement le composant MatDialog et l'utilisons pour ouvrir une boîte de dialogue (si les informations d'identification de l'utilisateur ne sont pas correctes) avec le composant ErrorComponent et un objet config contenant les données sera passé. La méthode open () renvoie une instance de MatDialogRef .

    Ceci est une capture d'écran du dialogue d'erreur:

     Une capture d'écran du dialogue d'erreur

    Vous trouverez plus d'informations sur les boîtes de dialogue des documents .

    Construction de l'interface utilisateur pour le composant CustomerList

    Pour le composant CustomerList nous utiliserons différents Composants de matériau angulaire, le plus important:

    Ouvrir src / app / customer-list / customer-list.component.html et ajouter le balisage suivant:

      

    la classe mat-elevation-z8 est une classe d'élévation de matériau angulaire qui vous permet d'ajouter une séparation entre les éléments le long de l'axe z. Vous pouvez trouver plus de détails à partir de ce lien .

    Ajout d'un spinner de chargement

    Nous utilisons pour afficher un spinner lorsque des données sont encore en cours de chargement, que nous simulons en utilisant Fonction setTimeout () :

       
    

    Si la variable de chargement équivaut à true la propriété d'affichage CSS reçoit la valeur du bloc . Sinon, il est assigné aucun ce qui le fait disparaître.

    Vous devez ajouter une variable de chargement à la classe de composant, qui prend initialement une valeur de true . chargement = vrai;
        /*…*/
        constructeur () {}
    ngOnInit (): void {

        setTimeout (() => {

            this.loading = faux;

        }, 2000);

        /*…*/

    Ajout d'une table de données avec une source de données

    Nous créons ensuite une table de données Material en utilisant qui s'affiche uniquement si en charge est égal à false :

      
    
    
    

    La table de données prend une propriété dataSource utilisée pour fournir des données pour la table. Vous pouvez simplement passer un tableau de données à la table, mais pour les cas d'utilisation réels, vous devez utiliser une source de données avancée telle que MatTableDataSource fourni par Angular Material, qui encapsule la logique des opérations avancées telles que la pagination. , tri et filtrage:

     classe d'exportation CustomerListComponent implémente OnInit {
    
        clients: client [] = [
        { id:1, name:'Customer 001',job:'Programmer'},
        /*...*/
        ];
    
        dataSource = new MatTableDataSource  (this.customers);
    

    Ajout de modèles de colonnes

    Pour chaque définition de colonne, vous devez fournir un nom unique et le contenu de ses cellules d'en-tête et de ligne. Par exemple, il s'agit de la colonne permettant d'afficher l'ID client:

    
      CustomerId 
      {{customer.id}} 
    
    

    Ceci est une simple définition de colonne avec le nom id . La cellule d'en-tête contient le texte CustomerId et chaque cellule de ligne restitue la propriété id des données de chaque ligne

    De la même manière, vous pouvez ajouter les autres définitions de colonnes. 19659005] Pour la colonne des opérations, nous utilisons deux icônes du matériau angulaire: delete et edit enveloppé avec des boutons Material:

    
    
      Operations 
    
        

    Enfin, créez un champ de saisie pour l'email du client:

    
         Email 
        
    
    

    Nous utilisons pour créer des étiquettes, pour créer un champ de saisie, et