Comment utiliser la conception de matériaux dans Angular 6

Angular a évolué au fil des ans et de nouvelles fonctionnalités intéressantes ont été continuellement ajoutées à chaque version. L’une des améliorations concerne la conception des matériaux, qui comprend de nouveaux composants. Ce tutoriel examinera le matériau angulaire et comment l’incorporer dans les projets Angular 6.

Qu’est-ce que la conception matérielle?

Material Design est un langage de conception pour les applications Web et mobiles qui a été développé par Google en 2014. Material Design permet aux développeurs de personnaliser facilement leur interface utilisateur tout en conservant une interface d’application attrayante avec laquelle les utilisateurs sont à l’aise. Avec Material Design, vous obtenez un format bien organisé avec la flexibilité d’exprimer votre marque et votre style.

Pour un exemple de Material Design, consultez Houzz, une application de conception de maison qui a remporté les prix Google Play en 2016. Cette application utilise Material Design pour adapter ses nombreuses fonctionnalités à l’immobilier limité des appareils mobiles. Cela offre une bonne expérience à l’utilisateur en lui permettant de visualiser et de naviguer dans l’application sans se sentir dépassé. C’est vraiment l’une des meilleures applications de conception de matériaux.

Cet article ne concerne pas la conception matérielle, nous n’entrerons donc pas dans tous les détails. Si vous souhaitez en savoir plus, il existe un excellent tutoriel sur la conception de matériaux sur le blog Envato.

Introduction au matériau angulaire

Le matériau angulaire consiste en une suite de composants angulaires pré-construits. Contrairement à Bootstrap, qui vous offre des composants que vous pouvez styliser comme vous le souhaitez, Angular Material s’efforce de fournir une expérience utilisateur améliorée et cohérente. En même temps, cela vous donne la possibilité de contrôler le comportement des différents composants.

Tout comme Angular, Angular Material a beaucoup évolué depuis sa sortie initiale, avec de grandes améliorations et des corrections de bugs.

Comment ajouter un matériau angulaire à votre projet

Afin d’ajouter du matériau angulaire à un projet, nous utiliserons le ng add commande qui est utilisée pour ajouter de nouvelles fonctionnalités aux projets Angular. Cette commande se trouve être une nouvelle fonctionnalité dans Angular 6, et elle est aussi simple que:

Cette commande ajoutera la bibliothèque à un projet existant et introduira le thème CSS dans angular.json. Il ajoutera également des scripts dans index.html et mettre à jour le AppModule.

Une autre fonctionnalité d’Angular 6 est ng update, qui met à jour les dépendances npm lorsqu’une nouvelle version est publiée. Il met également à jour votre code RxJS et votre code Material Design pour tirer parti des nouvelles API.

En relation :  Comment récupérer la barre des tâches sombre de Windows 10 et le menu Démarrer

Dépendances et composants

Le matériau angulaire se compose de plusieurs composants de conception qui entrent dans les catégories suivantes:

  • Contrôles de formulaire
  • Boutons et indicateurs
  • Navigation et mise en page
  • Popups et modaux
  • Tableau de données

Vous pouvez générer les composants de démarrage à l’aide du ng update commander. Certains des schémas disponibles via cette commande sont:

  • La navigation
  • Tableau de bord
  • Table

Ces schémas peuvent être facilement installés avec le ng generate commande comme suit:

  • ng generate @angular/material:material-table --name <component-name>: génère un composant qui affiche des données avec une table de données
  • ng generate @angular/material:material-nav --name <component-name>: génère un composant avec une navigation latérale et une barre d’outils
  • ng generate @angular/material:material-dashboard --name <component-name>: génère un composant qui contient une liste de grille dynamique de cartes.

Créer une application de matériau angulaire 6

Pour commencer, vous aurez besoin de la CLI angulaire. Si vous n’avez pas installé Angular CLI, installez-le simplement en exécutant la commande suivante.

Ensuite, nous devrons initialiser un nouveau projet Angular. Pour ce faire, exécutez la commande suivante, où Material-ng est le nom de notre projet Angular.

Cette commande crée plusieurs fichiers de modèle angulaire pour votre projet et installe les dépendances de démarrage nécessaires.

Allez dans le répertoire de votre projet et ajoutez du matériau angulaire à votre projet.

Ensuite, nous ajouterons quelques composants communs à de nombreuses applications, comme la navigation.

Ajouter une barre de navigation

Pour ajouter une barre de navigation, émettez simplement:

Cette commande ajoute une navigation latérale pliable et un composant de tiroir. Vous devriez obtenir la sortie suivante, qui a quatre fichiers générés pour nous, à savoir mon-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, et my-nav.component.ts.

Ouvert my-nav.component.html et vous devriez voir tout le code HTML de la navigation qui a été généré pour nous.

Par défaut, un projet Angular de départ servira la page par défaut, mais nous voulons pouvoir voir la magie du Material Design! Pour utiliser notre composant de navigation Material Design généré, ouvrez app.component.html et remplacez tout le code par:

Désormais, lorsque vous exécutez l’application, vous verrez la barre de navigation.

En relation :  Votre Google Pixel peut avoir un microphone cassé

Vous devriez également noter que le composant de navigation que nous avons ajouté a été importé dans le module principal comme indiqué:

Dans my-nav.component.html, apportons également quelques modifications aux listes de menus:

Maintenant, vous pouvez démarrer le serveur de développement en exécutant:

Le résultat devrait ressembler à ceci:

Mise en page angulaire de l'application Material Design

Comme vous pouvez le voir, Angular Material offre un moyen simple de démarrer et d’exécuter votre application. Avec seulement quelques commandes et quelques lignes de code, nous avons pu intégrer la conception matérielle dans notre application Angular!

Visitez notre Dépôt GitHub pour le code source complet de cet exemple d’application.

Conclusion

J’espère que ce tutoriel vous a aidé à comprendre comment utiliser la puissance de Material Design dans votre application pour une interface utilisateur de premier ordre. Pour plus d’informations sur la conception de matériaux dans Angular 6, consultez le site officiel docs qui contiennent des modèles prêts à l’emploi. C’est un endroit idéal pour en savoir plus sur Angular. Vous pouvez également consulter nos tutoriels et cours Angular ici sur Envato Tuts +!

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.