Ajouter Angular Material 5 dans votre prochaine application

#article_invité ❤

Bonjour à tous et à toutes, je m’appelle Pierre Terrat et je suis passionné par le développement front-end depuis toujours. Quand des frameworks ont commencé à sortir sur le sujet, je m’y suis penché, et je suis tombé sous le charme d’AngularJS, et ensuite d’ Angular. Maintenant, je m’occupe du développement et de l’architecture d’applications Angular avec plusieurs centaines de milliers d’utilisateurs. J’écris de nombreux articles afin de vous aider à apprendre à utiliser le framework Angular et vous permettre de faire des applications qui soient utilisées. Mais assez parlé de moi, passons au tutoriel sur Angular Material.

Ce que vous allez réaliser

Nous allons réaliser ensemble une application affichant une barre de navigation avec un menu, etle contenu de l’application sera un ensemble de Cards (un composant de Angular-Material). Nous apprendrons aussi à utiliser une API afin d’obtenir un jeu de données initial.

article_invite_pierre_terrat_001
La superbe application que vous allez réaliser. 🙂

Pré-requis

Pour réaliser ce tutoriel en toute tranquilité, vous devez :

  • Connaître un peu HTML, CSS et JavaScript ;
  • Connaître les bases du framework Angular : les composants, les templates, etc ;
  • Savoir comment créer un projet avec Angular-CLI (rassurez-vous, je le rappelle dans cet article).

Introduction

Nous allons voir un point très intéressant du framework Angular. Si vous êtes développeur comme moi, il est possible que le design soit plutôt « secondaire ». Heureusement, il est possible de développer un design très épuré et sympathique sans se prendre la tête. En effet, Google met à disposition le material design pour enjoliver vos applications.

Le but de cet article n’est pas de rappeler tout l’historique du material design, néanmoins si vous ne savez pas trop de quoi il s’agit, ou que vous voulez en savoir plus, je vous ai mis un lien vers cette page. Je vais vous montrer dans ce tutoriel comment mettre en place le material design dans votre application Angular.

Je tiens à préciser que ce tutoriel est basé sur Angular 5, et par conséquent sur Angular Material 5, car ses deux projets sont étroitement liés.

Allez, c’est parti !

Générer un projet avec Angular Material

Pour bien commencer ce tutoriel, vous allez avoir besoin de générer un projet avec Angular-CLI. Je vous invite à regarder ce tutoriel si vous n’avez jamais entendu parler de Angular-CLI. Pour faire court, Angular-CLI est un utilitaire de commande qui vous permet de simplifier la génération d’un nouveau projet, d’un nouveau composant, service, etc.

Une fois ceci fait, vous pouvez créer un nouveau projet avec Angular-CLI à l’aide de la commande suivante :

ng new monprojet-material

Placez-vous ensuite dans le dossier de votre nouveau projet :

 cd monprojet-material 

Bon jusqu’à là, il ne s’agit que d’une petite session de rattrapage pour la création d’un nouveau projet avec Angular-CLI. Ne vous inquiétez pas, nous allons rentrer dans le vif du sujet tout de suite !

Installer les dépendances d’Angular Material

Nous avons besoin d’installer deux packages pour pouvoir utiliser Angular Material dans notre projet. Voyons le détail de ces packages ensemble :

  • @angular/material : Il s’agit du package officiel Material pour Angular (fourni par Google)
  • @angular/animations : Depuis la version 4 d’Angular, il est nécessaire d’installer les animations de façon indépendante.  Beaucoup de composants dans le package Material ont besoin des animations, nous sommes donc obligés de les télécharger pour éviter d’éventuels problèmes par la suite.
  • @angular/cdk est le Angular Component Development Kit, il ajoute de nombreux outils pour créer des composants, notamment ceux d’Angular Material.

Pour les installer, nous allons utiliser le gestionnaire de packages de Node, npm :

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

L’option –save permet d’ajouter la dépendance et sa version dans le fichier package.json.

Nous pouvons à présent démarrer notre application. Voici la ligne de commande fournit par Angular-CLI qui nous permet de faire cela 🙂 :

ng serve --open

Cette commande permet de lancer un mini-serveur, d’ouvrir un navigateur avec notre application, et de rafraîchir le navigateur à chaque fois que nous modifions le code source. Pratique !

Ensuite,  nous devons importer les packages que nous venons juste d’installer. Pour cela, rendez-vous dans le fichier app.module.ts, dans /src/app/app.module.ts : 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatIconModule, MatCardModule, MatToolbarModule, MatMenuModule } from '@angular/material';

Rajoutez ces importations à la suite de celles déjà présentes. Nous importons, dans l’ordre :

  • Le package nécessaire pour faire fonctionner les animations ;
  • J’ai ensuite sélectionné des composants d’Angular Material fréquemment utilisés, et dont nous allons avoir besoin dans ce tutoriel.

Le but de ce tutoriel n’est pas de montrer tous les composants Material  possibles et leurs options, mais de vous permettre d’avoir une configuration solide pour démarrer un projet dans un environnement avec Material.

Nous allons voir maintenant comment ajouter ces composants Material dans le module racine @NgModule, afin qu’ils puissent être disponibles dans notre application :

@NgModule({
// …
imports: [
 BrowserModule,
 HttpModule,
 BrowserAnimationsModule,
 MatButtonModule,
 MatIconModule,
 MatCardModule,
 MatToolbarModule,
 MatMenuModule,
],
})

Remarque : pensez à ajouter l’importation du httpModule car nous en aurons besoin dans la suite de ce tutoriel : import { HttpModule } from ‘@angular/http’ ; .

Il ne vous reste plus qu’à sauvegarder votre fichier app.module.ts, pour que votre application soit recompilée automatiquement Rappelez-vous de la commande ng serve ! J

C’est super tout ça, mais si je veux ajouter d’autres composants que ceux proposés dans ce tutoriel, comment est-ce que je fais ? 😮

Très bonne question. Vous devez vous rendre sur la documentation officielle d’Angular Material. Vous sélectionnez le composant que vous souhaitez ajouter dans le menu de gauche. Ensuite, vous cliquez sur l’onglet API pour accéder à l‘API reference for Angular Material. Enfin, vous l’importez dans votre fichier app.module.ts et vous l’ajoutez dans le module @NgModule comme nous venons de le voir. Et voilà, vous pouvez utiliser votre nouveau composant material :).

Obtenir des données pour notre application

Pour illustrer ce tutoriel avec différents composants d’Angular Material, je vous propose d’ajouter quelques données d’exemple à notre projet. Nous allons utiliser JSONPlaceholder pour avoir des données de base au format. C’est un service en ligne qui est bien utile pour générer des données de test.

Ce site nous fournit ainsi une API publique. Pour y accéder depuis notre application, nous devons importer le module Http dans notre composant app.component.ts :

import { Http } from '@angular/http’

Attention, il est également nécessaire d’importer map depuis un opérateur de RxJS :

import 'rxjs/add/operator/map';

Ensuite nous devons ajouter une requête dans notre composant pour récupérer les données de JSONPlaceolder, comme ceci :

export class AppComponent {
myPhotos: Array<any>;
constructor(private http:Http) {
 this.http.get('https://jsonplaceholder.typicode.com/photos')
 .map(response => response.json())
 .subscribe(res => this.myPhotos = res);
}
}

Dans le code ci-dessus, nous avons défini une propriété myPhotos qui est de type Array et qui va contenir nos données factices fournies par JSONPlaceholder :). Nous avons aussi injecté le module Http dans notre constructeur. Ensuite nous faisons une requête http vers JSONPlaceholder pour récupérer nos données au format json.

Remarque : Pour obtenir les mêmes images que la capture d’écran au début de cette article, vous pouvez utiliser ce site, qui permet de gérer des images par rapport à des thèmes pré-définis comme le sport, la nature, etc.

Comment définir un thème pour Material ?

Pour gérer le style de votre application, Angular-CLI génère un fichier styles.css dans /src/styles.css (ah, il fait vraiment tout pour nous!). Vous pouvez configurer un thème par défaut en ajoutant la ligne ci-dessous dans le fichier /src/styles.css:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
body{
margin:0;
}

Nous avons pris dans  l’exemple ci-dessus le thème indigo-pink.css, mais rassurez-vous, si vous n’aimez pas le rose (comme moi), il est possible de le remplacer par un des thèmes suivants :

  • deeppurple-amber.css
  • pink-bluegrey.css
  • purple-green.css

Maintenant, rendez-vous dans notre fichier index.html. Il se situe dans le dossier /src/index.html. Il suffit d’ajouter ces deux lignes dans la balise.

		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

Ces deux balises nous servent à importer les icônes et la police de Material design Roboto.

Définissons un template

Nous allons créer une barre de navigation et un menu avec différents composants de material. Voici le code que je vous porpose et que vous pouvez remplacer dans /src/app.component.html (supprimer le contenu existant qui a été généré par app.component.html) :

<mat-toolbar color="primary">
<span>MyCompany</span>
</mat-toolbar>

Voilà le rendu graphique que vous devriez avoir :

article_invite_pierre_terrat_002

Maintenant, nous allons voir comment utiliser ce composant Card pour afficher les différentes images de notre API simulée :

Ajoutez donc le code suivant à la suite du précédent, toujours dans le fichier src/app/app.component.html :

<mat-card *ngFor="let photo of (myPhotos ? myPhotos .slice(0,10): []); ">
<img mat-card-image [src]=" photo.url">
<mat-card-header>
<mat-card-title>{{ photo .title }}</mat-card-title>
</mat-card-header>
</mat-card>

Nous avons utilisé *ngFor pour parcourir la liste de photos. Pour éviter d’avoir 5000 affichages, nous utilisons la fonction splice pour ne séléctionner que 10 objects. Vous devriez avoir un rendu celui présenté au début de l’article.

Pas mal pour quelque chose fait en 15 minutes :).

Conclusion

Félicitations, vous avez désormais un environnement configuré pour utiliser le Material Design. Si comme moi, vous n’avez pas spécialement decompétences avancées en design, cela peut être pratique pour vous d’utiliser le material design. Vous gagnerez beaucoup de temps en utilisant ces composants Material. De plus, si vous faites des applications pour des clients, proposé un design qui a été réalisé et validé par Google, c’est un sacré argument !

La documentation Angular Material est très bien faite et étoffée, et j’insiste, n’hésitez pas à l’utiliser pour trouver les composants dont vous avez besoin !

En résumé

  • Il est assez simple d’utiliser Angular-Material avec un projet généré via Angular-CLI.
  • Angular Material propose plusieurs composants que vous pouvez utiliser selon vos besoins.
  • Vous avez appris à configurer un thème pour votre applicationAngular-Material propose plusieurs thèmes différents pour votre application.

Remerciements

Je tiens à remercier Simon, qui m’a permis de publier cet article invité sur ce blog. Et je tiens également à vous remercier vous en tant que lecteur, pour avoir lu cet article jusqu’au bout.

Si vous avez des remarques ou des commentaires sur cet article, n’hésitez pas à les poster à la suite de celui-ci. Je me ferai un plaisir de vous répondre. 😉

Ressources

Pour aller plus loin

 

2 commentaires sur « Ajouter Angular Material 5 dans votre prochaine application »

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s