Les modules et les composants d’Angular

Les composants Angular

Le composant est une classe qui est associée à un template avec lequel elle interagit avec une API spécifique. Et en pratique le composant définit généralement une portion de l’interface utilisateur. Ainsi, on peut dire qu’une application Angular est un arbre de composant.

Quand on crée une application Angular via le CLI, on a déjà le composant app-root qui se trouve dans le fichier index.html.

Création d’un composant

Pour créer un composant Angular, on va utiliser la CLI. Ainsi, pour créer le composant main par exemple, nous allons exécuter la commande :

$ ng generate component main 

Ou en version minimale :

$ ng g c main

Cette commande va générer le composant. On a alors le fichier TypeScript main.component.ts qui est la classe composant. C’est lui qui va lier tous les éléments constitutifs du composant à savoir :

• les templates ;
• les styles CSS.

Pour définir le composant, nous allons avoir un décorateur Component :

@Component

Un décorateur, c’est une fonctionnalité TypeScript qui va permettre de marquer une classe ou une variable ou plusieurs éléments lors de leur instanciation en leur associant une fonction particulière. En fait, plus précisément, c’est un élément TypeScirpt qui permet, lors de la compilation TypeScript en JavaScript, d’associer à cette classe décorée, une fonction particulière qui va effectuer un traitement spécifique à cette classe.

Et pour faire apparaître le composant dans le navigateur, nous allons l’inclure dans le composant racine par exemple. C’est à dire dans le fichier app.component.html. Et à l’intérieur de ce fichier on va mettre le code :

<app-main></app-main>

Passer une variable du composant vers le template

Une fois que le composant est inclus dans l’application, nous allons le lier avec le template. Pour illustrer celà, nous allons passer une variable du composant vers le template. Pour ce faire, dans le template, nous utiliserons le double accolade.

Ainsi, nous aurons le code suivant dans le fichier main.component.ts.

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  user = "Rakoto";
  constructor() { }
  ngOnInit(): void {
  }
}

Et dans le fichier template main.component.html.

<p>Hello {{user}}</p>

 Une autre façon de transmettre des variables du contrôleur au template, qui est un peu plus spécifique lorsque l’on souhaite appliquer ça à un attribut. Par exemple si on a un attribut user et que l’on souhaite associer la valeur de la variable user alors on va utiliser la syntaxe suivante : double-crochets. Par exemple :

<p user=[user]>Hello {{user}}</p>

Cette fonctionnalité seront surtout utilisé lors de l’utilisation des directives.

Passer des informations du template vers le composant

De l’autre côté, nous avons besoin d’envoyer des informations de notre template vers notre composant. Pour ce faire, nous allons utiliser les événements. Par exemple pour appeler un événement de clic du souris, nous allons avoir dans notre template le code suivant :

<p (click)="userClick()">Hello {{user}}</p>

Et dans le fichier main.component.ts, nous aurons :

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  user = "Rakoto";
  constructor() { }
  ngOnInit(): void {
  }
  userClick(): void{
    console.log("clicked");
  }
}

Ajouter un style à un composant Angular

Lors de la création du composant via le CLI, nous avons eu des fichiers qui ont été généré. L’une de ces fichiers est main.component.css. Et c’est dans ce fichier que nous allons insérer nos styles CSS.

De plus, si nous avons besoin d’ajouter des images dans notre application, il est recommandé de le mettre dans le répertoire assets et indiquer le chemin relatif à cette image. De ce fait, nous pouvons avoir le code suivant :

<img src="assets/imge.jpeg" />

Les modules

Après avoir vu ce qu’est un composant Angular, nous allons maintenant parler du module.

Qu’est ce qu’un module Angular ?

Tout d’abord, donnons une définition du module. Un module est un conteneur qui va représenter une partie indépendante du code. Plus précisément, les modules servent à regrouper les composants, les directives, pipes et services. Mais aussi, les modules peuvent être combinés avec d’autres modules.

Toutefois, il est nécessaire de différencier un moule Javascript et un module Angular. Les deux sont complètement différents.

En effet, un module Javascript est un script dans lequel nous avons une instruction export  qui va permettre d’exporter un certain nombre de fonctionnalités ou de méthodes de propriété du script.

De l’autre côté un module Angular est un élément propre à Angular qui auront leur propre rôle à l’intérieur d’Angular. Et ce module ne pourront pas être utilisé à l’extérieur d’Angular.

Les modules Angular se trouve dans le fichier app.module.ts.

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

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

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

Si nous regardons en détail le fichier app.module.ts, nous verrons que c’est une classe qui comporte un décorateur NgModule. Et le NgModule , un peu comme les modules JavaScript, il sert à importer et exporter certains éléments au sein de notre application. En fait, c’est lui qui va regrouper à la fois tous les imports, tous les éléments de notre code source, les composants que l’on va créer, par exemple, etc. De regrouper tous ces éléments qui vont être utiles dans notre application pour les transmettre au compilateur. Et ainsi, notre compilateur pourra effectuer les bundle, qui est représenté par les gros fichiers JavaScript qui seront envoyés à notre navigateur.

Les éléments de configuration du module

Voyons maintenant dans les éléments de configuration du décorateur NgModule.

Dans le code Javascript ci-dessus, nous avons 4 éléments de configuration. Il y en a bien sur plus de 4. On peut aller à l’adresse https://angular.io/guide/ngmodules pour avoir plus de détail.

En premier lieu, nous alons l’élément de configuration « declarations ». Dans la « declarations » on aura nos composants. Petite parenthèse, lorsque je crée un composant avec la CLI, non seulement la CLI a créé un certain nombre de fichiers, mais elle a aussi mis à jour le fichier app.module.ts. Et ce qui a été modifié dans ce fichier est l’ajout d’un import du composant qui a été créé. Donc, ici, voilà, « declarations » va regrouper l’ensemble des éléments de notre code source, enfin, pas tous, mais une bonne partie des éléments de notre code source, à savoir les composants, les directives et les pipes. Ensuite, dans les imports, nous avons les imports d’autres modules qui vont être utiles dans notre application. Les « providers », il s’agit d’un élément utile pour des services, et « bootstrap ». Alors, ceci est une propriété qui est réservée au module racine. 

Conclusion sur le composant et module Angular

Si nous pouvons résumer ce qu’est un module et un composant Angular, nous pourrons dire ceci. Le composant et module Angular sont des classes TypeScript. D’une part, le composant Angular est une classe qui définit généralement une portion de l’interface utilisateur. Et d’autre part le module Angular est une classe qui sert à regrouper les composants, les directives, pipes et services