Angular 7 comment ça marche ?

by Blochaou Enagnon Francois

Angular 2+ est un framework pour développer des applications clientes (frontend). Depuis sa création par Google, ce framework a beaucoup évolué. Nous sommes maintenant à la version 7. Dans cet article, je vais vous montrer la philosophie de Angular et comment ça marche dans un projet réel. Si vous êtes nouveau dans le monde Angular, je vous conseille de lire les 2 articles qu'est ce que Angular et mon premier projet Angular.

Création d'un projet Angular

Pour bien comprendre le fonctionnement de Angular, nous allons créer un projet. Exécutez les commandes suivantes:

mkdir angular7
cd angular7
ng new myproject

Après la création de votre projet, ouvrez le dans un éditeur comme visual studio code et démarrez le avec la commande ng serve. Naviguez ensuite vers http://localhost:4200/ pour voir votre projet. La page qui s'affiche est le fichier index.html qui se trouve dans le répertoire src.

Détail du fichier index.hml

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myproject</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Dans ce fichier html, il y a 2 balises qui ne sont pas habituelles dans un fichier html.

  <base href="/">
   <app-root></app-root>

La balise baseest utilisé par Angular pour la navigation et pour reconstituer tous les chemins. Lire plus de détails sur cette balise base sur https://developer.mozilla.org.
La deuxième balise app-root est une balise créée par Angular. Dans Angular vous créez vos propres balises. Ici la balise app-root représente l'espace réservé à votre application. Toute votre application viendra remplacer cette balise et tournera dans cet espace. La page index.hml va donc héberger votre application toute entière. Vous ne quitterez plus cette page. C'est pour ça qu'on parle de SPA (Single Page Application). Chaque balise dans Angular représente un component. Ouvrons le fichier app.component.ts

Détail du fichier app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myproject';
}

Le fichier app.component.ts definit le component AppComponent. C'est une classe avec un décorateur @Component. C'est ce décorateur qui fait de lui un component. Ce décorateur prend en paramètre un objet json avec les clés suivantes: selector, templateUrl, styleUrls.
La clé selectordefinit le nom de la balise ici app-root. C'est notre balise qui était dans le fichier index.html.
La clé templateUrldefinit le chemin du template du component . C'est à dire la vue. Ce que l'utilisateur va voir. ici c'est le fichier app.component.html.
La clé styleUrlsdefinit un tableau contenant les chemins des fichiers css qui seront appliqués au template.
Remarquons que le component définit une propriété title et lui affecte la valeur myproject. Nous allons maintenant regarder le fichier app.component.html.

Détail du fichier app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

Le fichier app.component.hml représente le template, c'est à dire la vue. Ce fichier contient 2 lignes qui nous interpellent:

Welcome to {{ title }}!
<router-outlet></router-outlet>

La syntaxe {{ title }}est celle utilisée par Angular pour afficher les propriétés du component. On parle de liaison par interpolation. Il suffit d'écrire le nom de la propiété entre double chochets et la value s'affiche. Pour plus de détails sur l'affichage des données, lisez l'article affichage de données dans angular.
La deuxième ligne <router-outlet></router-outlet>est une balise interne à Angular. Cette balise représente l'endroit de naviuation de votre application. Toute la naviguation dans votre application se passe dans cette balise. Cette balise est le coeur de la naviguation chez Angular. C'est dans cette balise que vous allez afficher les différentes vues de votre application. Cette balise est le selector de la directive RouterOutlet fourni par Angular et qui se trouve dans le module RouterModule. Rappelons que le module est l'unité de base dans une application Angular. Chaque module est indépendant, il peut importer d'autres modules, cacher certains de ses composants et mettre d'autres composants à disposition des autres modules.
Regardons maintenant le fichier app.module.ts qui contient le module de notre application.

Détail du fichier app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Le fichier app.module.ts définit le module AppModule. C'est une classe avec le décorateur @NgModule. C'est le décorateur qui fait de cette classe un module. Ce décorateur prend en paramètre un objet json avec les clés suivantes: declarations, imports, providers, bootstrap
La clé declarations est un tableau qui contient la liste de tous les components du module. Ce sont ses propres components.
La clé imports définit un tableau contenant la liste des modules qu'il a importés. Ce sont des modules qui ont des fonctionnalités dont il a besoin.
La clé providersest un tableau vide. Il contient les services injectés par la technique de l'injection par dépendance.
La clé bootstrap est un tableau contenant la liste des components par lesquels le module démarre.
Remarquons que ce module AppModule a importé un autre module AppRoutingModule qui est un module de notre projet et qui est défini dans le fichier app-routing.module.ts

Détail du fichier app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Le fichier app-routing.module.tsdéfinit le module de navigation de votre application. C'est dans ce module que vous allez définir l'ensemble de la naviguation de votre application. Ce fichier contient la variable routesqui est un tableau. Il est réservé pour la définition de la naviguation. Remarquons l'import RouterModule.forRoot(routes). Ce module utilise la méthode forRoot. Nous parlerons plus en détail de cette méthode dans un autre article. La variable routesest vide donc il n'y a aucune navigation. C'est pour ça que rien ne s'affiche dans la balise <router-outlet></router-outlet>. Nous allons maintenant créer un component et l'afficher dans cette balise.

Créer votre premier component

Pour créer un component , exécutez la commande suivante dans le répertoire de votre projet.

ng generate component test

Angular-cli va générer le component dans le répertoire test sous app

CREATE src/app/test/test.component.css (0 bytes)
CREATE src/app/test/test.component.html (23 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (261 bytes)
UPDATE src/app/app.module.ts (467 bytes)

Angular-cli crée 4 fichiers: test.component.css, test.component.html,component.spec.ts, test.component.ts. Il met à jour automatique le module AppModule en ajoutant le nouveau component dans la clé declarations.

 declarations: [
    AppComponent,
    TestComponent
  ],

Nous allons maintenant modifier le fichier app-routing.module.ts pour afficher notre component dans la balise <router-outlet></router-outlet>.

const routes: Routes = [
  {path: 'test', component: TestComponent}
];

Enregistrez et démarrez votre application puis naviguez vers http://localhost:4200/test. Vous verrez le contenu de app.component.html s'afficher dans la balise <router-outlet></router-outlet>.Ici c'est le message test works!qui s'affiche.

Conclusion

Ce article est un peu long mais je voulais vous montrer le fonctionnement de base dans Angular. Merci d'avoir lu mon article et n'hésitez pas à le partagez sur les réseaux sociaux. A bientôt