Qu’est-ce qu’un matériau angulaire, quand l’utiliser

Dans cet article, nous découvrons Angular Material pour créer une belle application avec une aide au style. Mais qu’en est-il lorsque nous construisons un produit personnalisé ou manquons d’expérience ?

En tant que développeurs, nous aimons créer des produits avec une interface élégante et cohérente, et accélérer également notre développement pour fournir des applications rapides et cohérentes à l’aide d’une bibliothèque de composants. Aujourd’hui, nous allons parler du matériau angulaire.

Qu’est-ce qu’un matériau angulaire ?

Matériau angulaire est un ensemble de composants visuels qui nous permet de développer des interfaces utilisateur cohérentes prises en charge par l’équipe angulaire.

Angular Material s’appuie sur les directives de Conception matérielle. Il s’agit d’un système de conception conçu par Google pour créer des expériences utilisateur numériques, avec un guide de conception complet et détaillé pour la mise en œuvre. Lorsque nous l’utilisons dans nos applications, Angular Material nous donne une liste complète de composants d’interface, accessibles et avec un support multilingue.

Angular Material dispose d’un kit de développement de composants (CDK) pour créer des composants personnalisés avec des comportements prédéfinis. Apportez également de beaux composants d’interface utilisateur tels que des cartes, des entrées, des boîtes de dialogue, des tableaux de données, une barre d’outils, etc. avec un style fantastique avec Material Design accessible pour changer l’apparence.

Jouer avec un matériau angulaire

Nous avons un aperçu de ce qu’est le matériau angulaire ; nous allons maintenant montrer comment créer une petite application et profiter de cette avancée pour utiliser Angular Schematics pour créer des composants facilement et rapidement.

Ensuite, nous verrons comment installer la CLI Angular, générer une application Angular et la démarrer.

Installer la CLI angulaire

La CLI angulaire nous aide à créer des projets et à générer des applications et des bibliothèques, entre autres. Pour l’installer, il faut exécuter la commande suivante dans un terminal :

Angular nécessite Node.js 10.9.0 ou supérieur :

$ npm install -g @angular/cli

La -g flag nous permet d’effectuer l’installation globalement.

Installer le matériel et utiliser les schémas

Créer une nouvelle application, NBA-appen exécutant la commande dans le terminal :

C:\Users\dany.paredes\Documents\projects>ng new NBA-app
?  Would you like to add Angular routing?  No
?  Which stylesheet format would you like to use?  CSS

Ensuite, ajoutez Angular Material à notre application en exécutant la commande à partir du répertoire de l’application. Il posera des questions sur le thème, ajoutera une typographie et le module d’animation angulaire.

C:\Users\dany.paredes\Documents\projects\nba-app>ng add @angular/material
i Using package manager: npm
√ Found compatible package version: @angular/material@14.0.4.
√ Package information loaded.
The package @angular/material@14.0.4 will be installed and executed.
Would you like to proceed?  Yes
√ Packages successfully installed.
? Choose a prebuilt theme name or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
?  Set up global Angular Material typography styles?  Yes
?  Include the Angular animations module?  Include and enable animations
UPDATE package.json (1104 bytes)
√ Packages were installed successfully.
UPDATE src/app/app.module.ts (423 bytes)
UPDATE angular.json (3091 bytes)
UPDATE src/index.html (574 bytes)
UPDATE src/styles.css (181 bytes)

Parfait, nous avons Angular Material dans l’application. Ensuite, nous créons quelques composants.

Composants matériels

L’ensemble des composants visuels de Angular Material est une liste énorme. Examinons-en quelques-uns :

• Saisie automatique: Le composant de saisie semi-automatique est une saisie de texte standard enrichie d’un panneau d’options suggérées.

  

• Sélecteur de date: La Composant sélecteur de date permet aux utilisateurs de saisir une date par saisie de texte ou à partir du calendrier.

  

• Pas à pas: Matériau angulaire pas à pas fournit un flux de travail de type assistant en divisant le contenu en étapes logiques.

  

Visite la vitrine jouer avec la liste complète des composants.

Créer des composants à l’aide de schémas de matériaux

Nous voulons accélérer notre processus de développement en utilisant des schémas. Il aide à générer des composants tels que des tableaux, des tableaux de bord et une navigation plus rapidement et avec un comportement par défaut.

Construisons une petite page avec une barre latérale et un tableau avec une liste d’éléments.

Tout d’abord, exécutez les schémas material-nav:

ng generate @angular/material:navigation navigation
CREATE src/app/navigation/navigation.component.html (930 bytes)
CREATE src/app/navigation/navigation.component.spec.ts (1290 bytes)
CREATE src/app/navigation/navigation.component.ts (606 bytes)
CREATE src/app/navigation/navigation.component.css (193 bytes)
UPDATE src/app/app.module.ts (990 bytes)

Le processus est le même pour la table ; changer le type de material:navigation à material:table Comme:

ng generate @angular/material:table table

Modifiez le app.component.html et supprimez le modèle par défaut et utilisez la navigation.

<app-navigation></app-navigation>

Ajouter le app-table à la navigation dans le mat-sidebar-content comme suit:

<mat-sidenav-content>
	<app-stats></app-stats>
</mat-sidenav-content>

Courir ng serve -o et voir les résultats :

Fait! Nous avons créé une page de base avec navigation et un tableau avec pagination rapide et magnifique avec Angular Material.

Ensuite, nous parlons des scénarios utilisant Angular Material.

En savoir plus sur les schémas angulaires.

Quand utiliser un matériau angulaire ?

Nous allons souligner quelques points sur les raisons d’utiliser Angular Material :

• Utilisez la ligne de conception de matériau angulaire : Tous les composants sont prêts à être conçus avec un aspect et une sensation de matériau.
• Fournir la conception de l’écosystème Google : Material Design est identifiable car il s’agit du style par défaut de l’écosystème Google. Vous voudrez donc l’utiliser dans les cas où vos utilisateurs souhaitent avoir la même interface utilisateur comme Gmail, Android, Google Drive ou Google Calendar.
• Construisez rapidement : Accélérez un projet en utilisant des composants prédéfinis et étendez-le en utilisant le CDK ou Schematics pour générer vos composants.

Quand chercher ailleurs ?

Parce que rien n’est parfait, Angular Material a quelques faiblesses. Permettez-moi d’en montrer quelques-uns :

• Pas de composants complexes et avancés prêts pour les applications d’entreprise.
• Les composants CDK n’ont pas de bons exemples concrets et manquent de documentation.
• Pas de support commercial ou premium.
• La personnalisation de Angular Material CSS pour une conception unique est parfois un cauchemar pour les développeurs non expérimentés.

Conclusion

Dans cet article, nous avons découvert les composants et les schémas Angular Material pour créer une belle application sans investir trop de temps à penser aux styles. Pourtant, lorsque nous construisons un produit personnalisé ou que votre équipe n’a pas d’expérience substantielle et doit faire face à des problèmes, la communauté est notre seule aide.

Vous pouvez trouver un exemple de code complet pour cet article et jouer avec l’exemple d’application sur les liens suivants :

Merci pour votre temps. J’espère que cela vous aidera à apprendre quand utiliser Angular Material et à choisir le meilleur framework pour votre prochaine application.