Tutoriel Angular – Création de la page pour afficher un exercice

Par dbeulze, 28 février, 2025

Ce tutoriel explique comment créer une application Angular comportant plusieurs composants pour gérer des exercices. Nous allons créer six composants, installer le module ngx-monaco-editor-v2, configurer un service pour gérer l'exercice en cours, définir les routes et adapter le composant principal.

1. Création des composants Angular

Nous allons créer six composants. Pour cela, utilisez l'Angular CLI avec les commandes suivantes :

ng generate component exercice
ng generate component exercice-enoncer
ng generate component exercice-code
ng generate component exercice-sortie
ng generate component exercice-nav
ng generate component home

Chaque commande génère un composant ainsi que les fichiers associés (HTML, TypeScript, CSS et test).

2. Configuration des Composants

Composant exercice

Ce composant agit comme conteneur principal pour les autres vues (enoncer, code, sortie) et inclut la barre de navigation.

Fichier : exercice.component.html

<router-outlet></router-outlet>
<app-exercice-nav></app-exercice-nav>

Explication :

  1. <router-outlet> : Permet d'afficher le contenu des routes enfants.
  2. <app-exercice-nav> : Affiche la barre de navigation spécifique à l'exercice.

Composant exercice-enoncer

Ce composant affiche l'énoncé de l'exercice ainsi qu'un bouton de retour.

Fichier : exercice-enoncer.component.html

<div class="position-relative top-0 w-100">
  <div class="m-2">
    <app-bouton (onClick)="back()" colorText="#eeeee" title="Retour"></app-bouton>
  </div>
</div>
<div class="container">
  <h2 class="text-center">{{ exercice.titre }}</h2>
  <p>{{ exercice.objectif }}</p>
  <p>{{ exercice['énoncé'] }}</p>
</div>

Explication :

  1. Le bouton de retour permet de naviguer vers la page précédente via la méthode back().
  2. Nous affichons les propriétés de l'objet exercice (titre, objectif, énoncé et l'avenir d'autre).

Fichier : exercice-enoncer.component.ts

export class ExerciceEnoncerComponent implements OnInit {
  @Input() exercice: Question = {
    auteur: '',
    licence: '',
    niveau: '',
    objectif: '',
    rétroactions: { negative: '', positive: '' },
    tests: '',
    titre: '',
    type: '',
    ebauches: {},
    énoncé: ''
  };

  constructor(
    private router: Router,
    private exerciceService: ExercicesService
  ) {}

  ngOnInit() {
    this.exercice = this.exerciceService.exercice;
  }

  back() {
    this.router.navigate(['']);
  }
}

Explication :

  1. Dans ngOnInit(), on récupère l'exercice courant depuis le service ExercicesService.
  2. La méthode back() utilise le routeur Angular pour revenir à la page d'accueil.

Composant exercice-nav

Ce composant représente la barre de navigation pour passer d'une vue à l'autre (énoncé, code, sortie).

Fichier : exercice-nav.component.html

<div class="d-flex align-items-center justify-content-between nav-bar px-3">
  <div class="navbar-element" routerLink="enoncer" [routerLinkActive]="['navbar-element-active']">
    <i class="bi bi-info-circle"></i>
  </div>
  <div class="navbar-element" routerLink="code" [routerLinkActive]="['navbar-element-active']">
    <i class="bi bi-file-earmark-code"></i>
  </div>
  <div class="navbar-element" routerLink="sortie" [routerLinkActive]="['navbar-element-active']">
    <i class="bi bi-box-arrow-right"></i>
  </div>
</div>

Fichier CSS associé :

.nav-bar {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
  padding: 10px;
  border-top: 1px solid #b6b6b6;
}

.navbar-element i {
  font-size: 30px;
  color: #b6b6b6;
  transition: 0.2s;
}

.navbar-element-active i {
  color: #2e869c !important;
  transition: 0.2s;
}

Explication :

  1. Chaque élément de la barre de navigation utilise routerLink pour définir la route et routerLinkActive pour appliquer une classe active lors de la navigation.
  2. Le CSS permet de positionner la barre de navigation en bas de l'écran et de définir la transition de couleur des icônes.

Composant exercice-code

Ce composant permettra d'afficher et d'éditer le code de l'exercice à l'aide de ngx-monaco-editor-v2.

Fichier : exercice-code.component.html

<ngx-monaco-editor class="code-editor" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

Fichier CSS associé :

.code-editor {
  height: 100%;
  width: 100%;
}

Explication :

  1. Le composant <ngx-monaco-editor> intègre l'éditeur Monaco afin de permettre la saisie et l'édition de code.

Composant exercice-sortie

Pour l'instant, le contenu de ce composant sera réalisé dans une prochaine partie du tutorisl.

Composant home

Ce composant représente la page d'accueil qui liste les exercices disponibles.

Fichier HTML de HomeComponent :

<main class="main">
  <div class="h-100 w-100 d-flex flex-column gap-3 p-2 overflow-auto">
    <app-carte-lecon *ngFor="let exercice of exercices" [exercice]="exercice"></app-carte-lecon>
    <app-carte-lecon (ajoutExercise)="chargerExercise()" [add]="true"></app-carte-lecon>
  </div>
</main>

Fichier TypeScript de HomeComponent :

export class HomeComponent implements OnInit {
  exercices: Question[] = [];

  constructor(private gestionStockage: StockageService) { }

  ngOnInit(): void {
    this.chargerExercise();
  }

  chargerExercise() {
    this.gestionStockage.observerQuestions().subscribe((questions: Question[]) => {
      this.exercices = questions;
    });
  }
}

3. Installation de ngx-monaco-editor-v2

Pour intégrer l'éditeur de code, installez le module ngx-monaco-editor-v2. Exécutez la commande suivante dans votre terminal :

npm install ngx-monaco-editor-v2 --save

Note:

  1. Cette bibliothèque inclut tous les éléments nécessaires pour intégrer correctement l'éditeur Monaco dans votre application Angular.

4. Création du service d'exercices

Nous allons créer un service qui gère l'exercice en cours d'exécution.

Fichier : exercices.service.ts

export class ExercicesService {
  private _exercice: Question = {
    auteur: '',
    licence: '',
    niveau: '',
    objectif: '',
    rétroactions: { negative: '', positive: '' },
    tests: '',
    titre: '',
    type: '',
    ebauches: {},
    énoncé: ''
  };

  constructor() { }

  get exercice(): Question {
    return this._exercice;
  }

  set exercice(value: Question) {
    this._exercice = value;
  }
}

5. Configuration des routes

Nous allons maintenant configurer les routes de l'application pour gérer la navigation entre la page d'accueil et les vues d'exercice.

Fichier : app-routing.module.ts (ou similaire)

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'lecon/:id',
    component: ExerciceComponent,
    children: [
      { path: 'enoncer', component: ExerciceEnoncerComponent },
      { path: 'code', component: ExerciceCodeComponent },
      { path: 'sortie', component: ExerciceSortieComponent },
      { path: '', redirectTo: 'enoncer', pathMatch: 'full' }
    ]
  },
];

Explication :

  1. La route vide ('') redirige vers le HomeComponent.
  2. La route lecon/:id affiche le composant ExerciceComponent qui contient des routes enfants pour afficher l'énoncé, le code et la sorti.

6. Mise à jour du composant principal

Nous allons déplacer le contenu initial d'app.component dans le HomeComponent et adapter le fichier app.component.html.

Modification de HomeComponent

Le contenu HTML et le code TypeScript du HomeComponent ont déjà été présentés dans la section.

Mise à jour du fichier app.component.html

Fichier : app.component.html

<router-outlet></router-outlet>

Explication :

  1. Le composant principal ne contient plus de contenu spécifique à l'application, il sert uniquement de conteneur pour le routage.

Votre applicqtion peux desormait gérer un exercice ainsi que programmer dans un éditeur de code.

Références

GOOGLE, Angular Team, dir. Angular, 2024, https://angular.io
NPM, Inc., dir. ngx-monaco-editor‑v2, 2024, https://www.npmjs.com/package/ngx-monaco-editor-v2

Étiquettes

Commentaires