Perfectionnez-vous sur Angular

Dans ce chapitre, vous allez préparer les fondations de l'application qui servira pour tout le reste du cours. Cela vous permettra de passer en revue vos connaissances architecturales, et de les pratiquer.

Vous découvrirez également la bibliothèque Angular Material (en anglais) si vous ne la connaissez pas déjà.

Dans ce cours, vous créerez d'abord un mini réseau social, avec ses posts et ses commentaires – vous y découvrirez des éléments d'architecture Angular avancée comme les resolvers, les variables environnement, et les Directives et Pipes customisés. Vous y ajouterez ensuite trois feature modules :

• des animations Angular ;

• un formulaire complexe d'inscription utilisateur, avec de l'affichage conditionnel, des comportements réactifs, et une validation personnalisée ;

• un outil d'embauche pour les RH de la fabuleuse entreprise SnapFace, basé sur un state management 100 % réactif.

Commençons au début, avec la création du projet !

Creusez les fondations

Démarrez ce nouveau projet tout beau tout propre avec le CLI d'Angular :

ng new awesome-components --style=scss --skip-tests=true --routing

Le nouveau projet est généré avec des fichiers de styles SCSS, sans fichiers de test, et avec un module de routing préétabli.

Vous allez maintenant ajouter la bibliothèque Material au projet, aussi à l'aide du CLI :

ng add @angular/material

Lors de l'installation, vous pourrez choisir un thème. Dans ce cours, je choisis le deuxième thème ("Deep Purple/Amber").

Material vous propose d'activer la typographie Material ainsi que les animations. Acceptez les deux pour le meilleur rendu possible (on va aussi avoir besoin des animations dans la deuxième partie du cours !).

Une fois la bibliothèque installée, vous allez créer les trois premiers modules de votre application : CoreModule et SharedModule (pour une architecture propre), ainsi que SocialMediaModule qui sera votre premier feature module (qui sera lazy-loaded, donc ajoutez-y un module de routing) :

ng g m core
ng g m shared
ng g m social-media --routing

Pour finir la préparation structurelle, vous allez créer votre premier component, HeaderComponent, dans CoreModule. Ce sera l'en-tête global de l'application :

ng g c core/components/header

On peut maintenant lancer l'IDE pour continuer le travail de préparation !

Construisez les murs

Commencez par vider le code boilerplate ajouté dans le template d'AppComponent par le CLI d'Angular.

Pour donner un côté plus design à votre application, je vous propose de lui ajouter une image de fond. Créez un dossier  images  dans le dossier  assets  du projet pour y ajouter le fichier image désiré. Vous pouvez utiliser la même que moi, disponible à partir de ce lien, ou votre propre image.

Pour attribuer cette image au  body  de l'application, on va venir ajouter les styles dans  styles.scss , le fichier de styles global de l'application :

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-image: url('./assets/images/blurred-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

Ensuite, puisque HeaderComponent sera utilisé dans AppComponent, il faut l'exporter de CoreModule et importer CoreModule dans AppModule.

Dans  core.module.ts  :

@NgModule({
  declarations: [
    HeaderComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    HeaderComponent
  ]
})

Et dans  app.module.ts  :

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Tout cela vous permet maintenant d'ajouter l'en-tête dans le template d'AppComponent, ainsi qu'un  router-outlet  qui affichera la route active de l'application :

<app-header></app-header>
<router-outlet></router-outlet>

Vous pouvez d'ores et déjà implémenter le lazy-loading pour SocialMediaModule. Le flag  --routing  utilisé lors de la création du projet et de celle du module a bien généré les modules de routing : vous n'avez plus qu'à ajouter vos routes !

Dans AppRoutingModule :

const routes: Routes = [
  { path: 'social-media', loadChildren: () => import('./social-media/social-media.module').then(m => m.SocialMediaModule) },
  { path: '**', redirectTo: 'social-media'}
];

Une dernière chose avant d'implémenter HeaderComponent : ajoutez SharedModule aux imports de CoreModule et de AppModule.

Niveau module et routing, la base est prête : passons à HeaderComponent !

Posez le toit

L'en-tête de l'application utilisera un component Material : le MatToolbar.

Pour tout component Material, il faut importer le module correspondant. Puisque vous risquez de réutiliser les différents components Material, au lieu de les importer à plusieurs endroits de l'application, vous les importerez dans SharedModule. 

En fait, ce n'est pas tout à fait juste. Vous les exporterez depuis SharedModule.

Vous avez donc :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  exports: [
    MatToolbarModule,
  ]
})
export class SharedModule { }

Vu que votre CoreModule importe SharedModule, vous pouvez tout de suite utiliser  <mat-toolbar>  dans le template de HeaderComponent, en y ajoutant le titre de l'application, ainsi qu'une liste de liens :

<mat-toolbar color="primary">
  <span>Awesome Components</span>
  <ul>
    <li><a routerLink="/social-media">Social Media</a></li>
  </ul>
</mat-toolbar>

Attribuer une  color  à MatToolbar permet de sélectionner une couleur du thème sélectionné. Ici, j'ai choisi la couleur primaire, qui dans mon cas correspond à un violet.

Deux petits styles dans  header.component.scss  pour l'affichage de la liste :

ul {
  list-style: none;
}

li {
  display: inline-block;
}

… quelques styles pour les liens de toute l'application, insérés dans  styles.scss  :

a {
  color: white;
  text-decoration: none;
  font-weight: normal;
  &:hover {
    text-decoration: underline;
  }
}

… et le squelette de l'application est prêt !

En résumé

• Le flag  --routing  permet d'ajouter automatiquement un module de routing depuis le CLI.

• ng add  permet d'ajouter certaines bibliothèques comme Angular Material à votre projet Angular.

• Pour utiliser un component Material, il faut importer le module correspondant.

• Exporter des éléments depuis un module les met à disposition de tout autre module qui viendrait l'importer – par exemple, exporter MatToolbarModule dans SharedModule.

Suivez-moi au prochain chapitre, où vous allez afficher des données aux utilisateurs grâce au resolver !