Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Comment utiliser la conception de matériau dans Angular 6

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by Soleil (you can also view the original English article)

Angular a évolué au fil des ans et de nouvelles fonctionnalités intéressantes ont été ajoutées en permanence à 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’intégrer 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. La conception matérielle facilite la personnalisation de l'interface utilisateur par les développeurs tout en conservant une interface agréable avec laquelle les utilisateurs sont à l'aise. Avec Material Design, vous obtenez un format bien organisé avec la flexibilité nécessaire pour 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 mobile limité. Cela fournit une bonne expérience à l'utilisateur en lui permettant d'afficher 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 voulez en savoir plus, il existe un excellent tutoriel sur la conception de matériel 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 styler comme vous le souhaitez, Angular Material s'efforce de fournir une expérience utilisateur améliorée et cohérente. En même temps, il vous permet 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 corrections de bugs.

Comment ajouter du matériau angulaire à votre projet

Pour ajouter un matériau angulaire à un projet, nous allons utiliser la commande ngadd qui permet d'ajouter de nouvelles fonctionnalités aux projets angulaires. 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 mettra à jour 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 de conception de matériel pour tirer parti des nouvelles API.

Dépendances et composants

Le matériau angulaire est constitué de plusieurs composants de conception appartenant aux catégories suivantes:

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

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

  • La navigation
  • Tableau de bord
  • Table

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

  • ng generate @ angular / material: material-table --name <component-name>: génère un composant qui affiche les données avec un tableau 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 contenant une liste dynamique de cartes.

Construire une application de matériau angulaire 6

Pour commencer, vous aurez besoin de la CLI angulaire. Si Angular CLI n'est pas installé, installez-le simplement en lançant la commande suivante.

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

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

Allez dans le répertoire de votre projet et ajoutez Angular Material à votre projet.

Ensuite, nous allons ajouter des composants communs à de nombreuses applications, comme la navigation.

Ajouter une barre de navigation

Pour ajouter une barre de navigation, émettez simplement:

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

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

Par défaut, un projet angulaire démarreur servira la page par défaut, mais nous voulons pouvoir voir la magie de la conception matérielle! Pour utiliser notre composant de navigation Material Design, ouvrez app.component.html et remplacez tout le code par:

Maintenant, lorsque vous exécutez l'application, vous verrez la barre de navigation.

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 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:

Material Design Angular app layout

Comme vous pouvez le constater, le matériau angulaire fournit un moyen simple de faire fonctionner votre application. Avec seulement quelques commandes et quelques lignes de code, nous avons pu intégrer la conception de matériaux dans notre application angulaire!

Visitez notre repo GitHub pour obtenir 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 matérielle dans Angular 6, consultez le docs officiel qui contient des modèles prêts à l'emploi. C'est un endroit idéal pour en apprendre davantage sur Angular. Vous pouvez également consulter nos tutoriels et cours Angular sur Envato Tuts +!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.