EXAMEN
Semestre : 1 2
Session : Principale Rattrapage
Module : Angular Nom : ……………………………………………
Enseignants : UP Web Prénom :…………………………………………
Classes : 5GL & 5INFOB Classe : ………………………………………….
Documents autorisés : OUI NON Nombre de pages : 08
Calculatrice autorisée : OUI NON Internet autorisée : OUI NON
Date : 02/12/2020 Heure: 11h Durée : 1h30
Partie 1 : (7 pts)
Une seule réponse est correcte
1- Soit la configuration de routes 3- Quelle est la solution proposée par
suivante : (1pt) Angular qui permet aux développeurs
d'enrichir les balises HTML? (1pt)
const routes: Routes = [
A- Les promises
{path: '**', component:
B- Les directives
ProductsComponent},
{path: 'randonnees', component: C- Les observables
ContentComponent}, D- Les décorateurs
{path: 'home', component:
ArticleComponent}, 4- Dans quels cas ce titre apparaîtra-t-il
]; dans le Template? (1pt)
En tapant l’url <h1 *ngIf=”show">Classe 5eme!</h1>
localhost :4200/randonnees , A. show = true
lequel des composants suivants sera B. show = false
affiché ? C. show= ‘true ‘
D. show = ‘false’
A- ProductsComponent
B- ContentComponent
5- Quelle directive vous permet d’assurer
C- ArticleComponent
D- Le composant AppComponent le Two way data binding.? (1pt)
2- Comment peut-on partager les données A. ngModel
entre composants qui ne sont pas B. ngForm
imbriqués? (1pt) C. ngStyle
A- Via un autre composant. D. ngSubmit
B- Via un service.
C- Via des événements.
D- Via les directives
1 /8
6. Dans le Template d’un composant ListTodo, vous avez le sélecteur suivant :
<app-todo [todo]="t"> </app-todo>. Sachant que app-todo est le sélecteur d’un
composant Todo.
a. Quelle est la relation entre le composant ListTodo et le composant Todo (1pt)
………………….……………………………………………………….. ………………….
……………………………………………………………………………………………….
b. Quelle est la propriété qui sera déclarée dans le composant Todo ? écrire le code
nécessaire pour la déclarer. (1pt)
………………….……………………………………………………….. ……………….
……………………………………………………………………………………………….
Partie 2 : Étude de cas (13 pts)
Nous allons développer la partie front-end d’une application web pour les passionnées des
randonnées avec Angular 9. Pour cela, nous proposons la hiérarchie de composants
suivante que nous allons créer tout au long de notre étude de cas.
AppComponent
app-root
navComponent ContentComponent
app-nav app-content
Localhost:4200/randonnee
RandonneComponent
Est chargé au niveau de
app-randonne
ContentComponent en
tapant le path
/randonnee
ReservationCompone
nt
app-reservation
Soit les deux modèles de données « Randonnee » et « Reservation » suivants :
2 /8
export class Randonnee { export class Reservation{
title : string; identite : string;
description: string; telephone : string;
price:number; nb:number;
date:string; }
nbPlaces:number;}
Le composant navComponent contient dans son Template le code suivant :
<a href="#">Home</a>
<a routerLink="/randonnees">Randonnées</a>
<a href="#">Sports</a>
<a href="#">Contact</a>
En cliquant sur le lien Randonnées, un composant RandonneComponent est chargé affichant
le texte « Nos randonnées : ».
1- Définissez le contenu des templates des composants AppComponent,
ContentComponent et RandonneComponent.
app.component.html (0.25 pt)
content.component.html (0.25 pt)
randonne.component.html (0.25 pt)
2- Au niveau du fichier app-routing.module.ts , configurez la route qui permet de pointer sur
le composant RandonneComponent et dont le lien correspondant est déjà défini en haut dans
navComponent (0.25 pt)
const routes: Routes = [
];
3- Soit la classe RandonneService suivante. La méthode getListRandonnes() permet de
retourner la liste des randonnées contenues un fichier json. Complétez le code qui manque
dans chaque numéro. (1.5 pt)
import { Injectable } from '@angular/core';
import { HttpClient } from 1 ;
3 /8
import { Randonnee } from './model/randonnee';
@Injectable({
providedIn: 'root'
})
export class RandonneService {
constructor(private http : 2 ){}
getListRandonnes()
{
return this._http.get< 3 >("../../assets/randonnees.json");
}
}
1 :1……………………………………………………………………………………………………………………………………………………….
22
:……………………………………………………………………………………………………………………………………………………….
3 :3……………………………………………………………………………………………………………………………………………………….
Une fois le composant RandonneComponent est chargé, la liste des randonnées contenues
dans le fichier json s’affiche comme mentionnée dans la Figure 1
Figure 1
4- Complétez par le code nécessaire pour la récupération de la liste des randonnées à partir de
la méthode getListRandonnes() du service RandonneService. (2 ,5 pts)
import { Component, OnInit } from '@angular/core';
import { RandonneService } from '../randonne.service';
@Component({
selector: 'app-randonne',
4 /8
Nom : …………………………………………………….. ……Prénom………………………………………………………………..
Classe :…………………………………………………….
templateUrl: './randonne.component.html',
styleUrls: ['./randonne.component.css']
})
export class RandonneComponent implements OnInit {
1
constructor( 2 ) { }
ngOnInit(): void { 3 }
}
……………………………………………………………………………………………………………………………………………………………
1
……………………………………………………………………………………………………………………………………………………………
2
……………………………………………………………………………………………………………………………………………………………
3
5- Complétez le code html suivant pour afficher la liste des randonnées comme indiqué dans
la Figure 1 sachant que les images possèdent l’extension « .jpg », sont stockées sous le
répertoire « ../../assets/images » et le nom de chaque image est le titre de la randonnée.
(1 .5pts)
<div *ngFor="let r of 1 ; let i=index">
2 3 <button>Details</button>
</div>
……………………………………………………………………………………………………………………………………………………………
1
……………………………………………………………………………………………………………………………………………………………
2
……………………………………………………………………………………………………………………………………………………………
3
***************************************************************************
En cliquant sur le bouton « Details » de la Figure 1 :
• Le reste des informations de la randonnée courante s’affichent comme c’est indiqué
dans la Figure 2.
• Un nouveau composant ReservationComponant sera affiché par la suite. Voir Figure
3
5 /8
Figure 2
6- Sachant que en cliquant sur le bouton Details, une méthode ayant comme signature
showDetails(i :number) est appelée, écrivez alors le code de cette méthode et mettez
à jour, si c’est nécessaire, les propriétés de la classe RandonneComponent.(1 pt)
……………………………………
showDetails(i:number){
……………………….
7- Complétez le code html suivant du composant RandonneComponent pour aboutir
au résultat de la Figure 2. Il suffit de rajouter la condition nécessaire pour l’affichage
du reste des informations d’une randonnée. (1 pt)
<div *ngFor="let r of list; let i=index">
(Contenu déjà demandé dans la question 5)
<button (click)="showDetails(i)">Details</button>
<div * >
<ul>
6 /8
<li>{{r.description}}</li>
<li>{{r.price}} dt</li>
<li>{{r.date}}</li>
<li>{{r.nbPlaces}}</li>
</ul>
</div>
</div>
……………………………………………………………………………………………………………………………………………………….
*
***************************************************************************
Un nouveau composant appelé ReservationComponent est créé et ajouté dans la vue du
composant RandonneComponent. Ce composant contient un formulaire de réservation à la
randonnée correspondante et s’affiche aussi en cliquant sur le bouton Details. Voir Figure 3
Figure 3
8- Le champ « Identité » du formulaire de réservation est obligatoire. Si ce champ est vide
alors le message « Veuillez écrire votre nom et prénom » s’affiche. Complétez alors le code
HTML suivant : (2pt)
7 /8
<form #f="ngForm">
<label>Identité</label>
<input type="text" 1>
<div 2 >
1
Veuillez écrire votre nom et prénom
</div>
</form>
……………………………………………………………………………………………………………………………………………………………
1
12
……………………………………………………………………………………………………………………………………………………………
10- Le bouton « Réserver » de la Figure 3 est désactivé si le formulaire de réservation est
invalide. Mettez à jour le code html du composant ReservationComponent en ajoutant le
code nécessaire au niveau du bouton « Réserver » (1 pt)
<button type="submit" * > Réserver</button>
……………………………………………………………………………………………………………………………………………………….
*
11- En cliquant sur le bouton « Réserver », cette réservation est ajoutée dans une liste des
réservations définit dans le composant RandonneComponent, listReservations :
Reservation[]. Mettez à jour la classe du composant ReservationComponent en indiquant
uniquement le code utile pour répondre à cette question. (1,5 pts)
Bon Travail ☺
8 /8
