EXAMEN
Semestre : 1 2
Session : Principale Rattrapage
Unité d’enseignement : Analyse et applications web avancées, Full stack, Développement FrontEnd
Module (s) : Initiation Application Côté Client
Classe(s) : 4SE, 4Erp-bi, 4Arctic
Nombre des exercices : 3 Nombre de pages : 7 pages
Date : 27/05/2024 Heure : 13h Durée : 1h30
QCU (5 pts)
1- Comment importer des modules externes dans un composant Angular ?
a) En utilisant l'instruction "import" dans le fichier TypeScript du composant
b) En utilisant l'attribut "import" dans la balise HTML du composant
c) En utilisant la directive "import" dans le fichier de style du composant
d) En utilisant la commande "ng import" dans la console
2- Quel est le rôle de la directive *ngIf ?
a) Afficher ou masquer un élément HTML en fonction d'une condition booléenne.
b) Contrôler l'itération des éléments dans une liste.
c) Gérer les événements de basculement entre différents états d'un élément.
d) Appliquer une classe CSS conditionnelle à un élément en fonction d'une condition.
3- Dans une application SPA laquelle des directives suivantes remplace l’attribut ‘href’ ?
a) routerOutlet
b) hrefDirective
c) routerLink
d) routerHref
4- Quelle méthode du cycle de vie du composant Angular est appelée lors de sa création ?
a) constructor()
b) ngAfterContentChecked()
c) ngOnInit()
d) ngAfterContentInit ()
5- Pour utiliser la directive « FormControlName», quel est le package à importer dans le
fichier app.module.ts ?
a) ReactiveFormsModule
b) FormsModule
c) BrowserModule
d) FormsControlModule
1
6- Comment peut-on émettre un événement d'un composant enfant à un composant
parent en Angular ?
a) En utilisant le décorateur @Input
b) En utilisant le décorateur @Output et EventEmitter
c) En utilisant une méthode publique dans l'enfant
d) En utilisant le service HttpClient
7- Quel décorateur est utilisé pour indiquer qu'une classe peut être injectée en tant que
service dans Angular ?
a) @Inject
b) @Injectable
c) @Service
d) @Provided
8- Quelle est la syntaxe correcte pour two-way data binding en Angular ?
a) [(ngModel)]="propertyName"
b) [ngModel]="propertyName"
c) (ngModel)="propertyName"
d) {{ ngModel }}
9- Quel est le rôle de la méthode emit() dans un composant Angular ?
a) Elle lie une propriété à un attribut HTML
b) Elle initialise une propriété dans un composant
c) Elle déclenche un événement personnalisé pour notifier le composant parent
d) Elle souscrit à un observable
10- Quel est le rôle principal du module FormsModule dans Angular ?
a) Gère la navigation entre les composants
b) Intercèpte les requêtes HTTP sortantes
c) Effectue des requêtes HTTP vers un serveur distant
d) Facilite la gestion des formulaires et la liaison de données bidirectionnelle
Exercice 2 : (3 pts)
1. Pour installer CLI (command Line Interface), quelle est la commande à exécuter ? (0.5
pt)
2. Donner deux noms de fichiers de configuration dans un projet angular en précisant le
rôle de chacun. (1 pt)
3. Ci-dessous une partie de la structure d’un projet angular intitulé «AngularProject »,
mentionner les noms des dossiers/fichiers manquants. (1 pt)
2
4. Quel est le rôle de l’élément [4] de la figure ci-dessus ? (0.5 pt)
Exercice 3 : Eude de cas (12 pts)
Nous allons réaliser la partie frontend d’une application en ligne intitulée CoachFit qui permet
aux utilisateurs de réserver un coach de sport qualifié à domicile en utilisant Angular 15
Cette application permet aux utilisateurs de :
- Parcourir une liste de coachs de sport.
- Consulter le profil détaillé de chaque coach, y compris leurs spécialités et leurs tarifs.
- Réserver des séances d'entraînement en remplissant un formulaire.
Soient les classes des modèles « Coach » et « Reservation » suivants :
export class Coach{ export class Reservation{
id!:number; id!:number;
name!:string; idUser!:number;
email!:string; idCoach!:number;
image!:string; date!:Date;
tel!:number; duration!:number;
price !:number; startTime!:Time;
speciality!:string comments!:string
} }
1. Quel fichier sera mis à jour directement suite à la création du composant Coach. Donner le
nom de la section qui sera modifiée. (0.5 pt)
2. Identifier et corriger l'erreur dans la configuration du composant CoachComponent
suivante : (0.75 pt)
3
@NgComponent({
selector: 'app-coach',
template: './coach.component.html',
styles: ' [./coach.component.css]'
})
export class CoachComponent {
}
Les informations des coachs sont stockées dans le fichier db.json avec une adresse
« http://localhost:3000/coachs»
3. Quelle est l’utilité de l’utilisation de JSON server dans le développement frontend ? (0.25
pt)
4. Pour consommer un web service, quel module doit être importé ? (0.25 pt)
5. A partir de quel package ce module est importé ? (0.25 pt)
6. Dans le service coachService implémentez une méthode fetchCoach() et
fetchCoachById(id :number) qui permettent, respectivement, de récupérer la liste des
coachs depuis db.json et de récupérer un coach à partir du fichier db.json par son id. (2 pts)
export class CoachService {
api:string =” http://localhost:3000/coachs ”
Constructor (............. [1]............) { }
fetchCoach(){
..................... [2].......................
}
fetchCoachById(id:number){
..................... [3].......................
}
La liste des coachs s’affiche dans le composant Coach sous forme des cards représentés par le
}}
composant coachCardComponent. Ce dernier décrit les informations d’un seul coach
7. Compléter le code suivant afin d’afficher tous les coachs. (0.75pt)
coach.component.html coach-card.component.ts
<p>coach list</p> export class CoachCardComponent {
<div > ………..[4]………..!:Coach;
<div ……. [5]…… ="let …….[6]………. of coachList"> }
<app-coach-card… [7] .….="co"></app-coach-card>
</div>
</div>
4
8. Comment appeler la relation entre les deux composants CoachComponent et
CoachCardComponent ? Préciser le rôle de chaque composant dans cette relation. (1 pt)
En cliquant sur le bouton « details » dans CoachCardComponent, une redirection se fait vers
le composant CoachDetailsComponent qui affiche les détails d’un coach dont l’id est envoyé
dans l’url.
9. Compléter le code suivant pour assurer une redirection correcte. (0.75pt)
coach-card.component.html
<button …………[8]………….. ="…………[9]………….." >details</button>
const routes: Routes = [
{ path: '', redirectTo: 'coach', pathMatch: 'full' },
{ path: 'coach', component: CoachComponent },
{ path: '….[10]….', component: CoachDetailsComponent },
{ path: '**', component: NotfoundComponent },
{ path: 'reservation', component: ReservationComponent },
];
10. Que se passe-t’il en tapant le path « reservation » ? (0.25 pt)
11. Pour afficher le profil détaillé d’un coach sélectionné, la méthode fetchCoachById(id
:number) est appelée dans le composant CoachDetailsComponent, compléter le code
source suivant : (1.5 pts)
export class CoachDetailsComponent {
id!: any;
constructor(........[11]......) {}
ngOnInit(): void {
..............[12]...............
..............[13]...............
}
En cliquant sur le bouton « réserver » qui se trouve dans le composant
CoachDetailsComponent, une redirection se fait vers le composant ReservationComponent
qui contient un formulaire d'ajout d’une réservation comme le montre la figure ci-dessous :
5
Les contraintes suivantes doivent être prises en compte :
- date : obligatoire et sous la forme "year:m:j".
- duration : obligatoire et positif différent de zéro
- Le bouton « Add » est désactivé si le formulaire est invalide
NB : pour assurer que la date suit le forme "year:m:j". il faut respecter l’expression régulière
suivante : (/^\d{4}:\d{2}:\d{2}$/)
Les messages d’erreurs s’affichent si les champs correspondants sont invalides.
12. Compléter le code de la classe ReservationComponent: (0.75 pt)
this.AddForm = new ….............. [14]……………… ({
date: ….............. [15]……………… ,
startTime: // À ne pas compléter
duration: ….............. [16]……………… ,
comments: // à ne pas completer
})
13. Compléter la portion du code html du composant ReservationComponent. (1.5 pt)
<form …….[17]…… ="AddForm" style="width: 35rem;margin-left: 5rem;">
<label> Duration </label>
<input class="form-control" type="text" …….[18]…… ="date"/>
<div class="alert alert-danger" *ngIf="…….[19]…….">
<div *ngIf="…….[20]…… "> date is required</div>
<div *ngIf="…….[21]……."> date must be greater than todate </div>
</div>
…………………………. Le reste du formulaire à ne pas terminer
<input type="submit" value="Add" [disabled] =".…….[22]……." (click)=”add()”>
</form>
6
14. Compléter la méthode Add() sachant que la valeur de l’id du coach concerné par la
réservation est stocké dans la propriété coachId , et en supposant que l’id de l’utilisateur qui
va réserver égal à 3. La méthode addReservation est supposée déjà implémentée dans le
service coachService.
NB : Aucun ajout n’est effectué si le formulaire est invalid .(1.5pt)
reservation!: Reservation;
coachId !:number
Add (){
// this.coachId = supposé récupéré depuis l’url
if (….............. [23]………………) {
….............. [24]………………
this.CoachService.addReservation(this.reservation).subscribe(
response => {
this.router.navigate(['/success']);
},
error => {
console.error('Error adding reservation', error);
}
);
}
}
Bonne Chance 😊
