EXAMEN
Semestre : 1 2
Session : Principale Rattrapage
Module : Initiation Application Côté Client
Enseignant(s): UP web
Classes : 4ARCTIC – 4SE
Documents autorisés : OUI NON Nombre de pages : 5
Calculatrice autorisée : OUI NON Internet autorisée : OUI NON
Date : 01/06/2023 Heure : 9H Durée : 1h30
Exercice1 : QCU (6pts)
1- Quelle est la différence entre les modules Angular et les composants Angular ?
A) Les modules Angular gèrent les routes, tandis que les composants Angular gèrent
l'interface utilisateur.
B) Les modules Angular regroupent des composants et d'autres fonctionnalités connexes,
les composants définissent la structure et le comportement des éléments de l'interface
utilisateur.
C) Les modules Angular gèrent l'état de l'application, les composants gèrent les interactions
utilisateur.
D) Les modules Angular et les composants Angular sont deux termes différents désignant la
même chose.
2- Quelle est la signification de l'expression suivante : [(ngModel)]="username" ?
A) L'expression [(ngModel)] est utilisée pour définir une liaison bidirectionnelle entre une
propriété du composant et un élément de formulaire.
B) L'expression [(ngModel)] est utilisée pour définir une liaison unidirectionnelle depuis une
propriété du composant vers un élément de formulaire.
C) L'expression [(ngModel)] est utilisée pour définir une liaison unidirectionnelle depuis un
élément de formulaire vers une propriété du composant.
D) L'expression [(ngModel)] est utilisée pour définir une liaison entre deux propriétés du
composant.
3- Quelle est la fonction principale d'un service dans Angular ?
A) Les services sont utilisés pour définir des modèles de données dans Angular.
B) Les services sont utilisés pour effectuer des appels HTTP dans Angular.
C) Les services sont utilisés pour partager des données et des fonctionnalités entre plusieurs
composants dans Angular.
D) Les réponses B) et C) sont correctes
4- Quelle est la méthode utilisée pour envoyer des données vers un serveur en utilisant une
requête HTTP dans Angular ?
A) send()
B) post()
C) put()
D) Les réponses B) et C)
1
5- Quelle est la méthode utilisée pour s'abonner à un flux de données asynchrone dans
Angular ?
A) subscribe()
B) connect()
C) observe()
D) fetch()
6- Quelle est la méthode utilisée pour naviguer vers une autre page dans Angular ?
A) navigateTo()
B) redirect()
C) go()
D) navigate()
Exercice 2 : (3pts)
1- Qu'est-ce qu'une route en Angular et comment est-elle définie dans une application
Angular ?
2- Expliquez la méthode ngOnInit() dans un composant Angular.
3- Qu'est-ce qu'un EventBinding en Angular et comment est-il utilisé ?
Exercice 3 : Etude de cas (11pts)
Nous allons réaliser la partie frontend d’une application de réservation des salles pour des
évènements en utilisant Angular 13.
L’application permet de réaliser le scénario suivant :
Accueil liste des salles détailles d’une salle Réserver salle si non réservée Remplir
Formulaire événement Accueil
Une salle est définie par un id, un nom, une adresse et un état pour vérifier si la salle est réservée ou
non.
Un évènement doit contenir un id, un nom, une salle, une date de début et une date de fin.
1- Déclarer les classes modèle Event et Salle [1] (0.5pt)
2- La liste des salles s’affiche dans un composant home. Compléter le code suivant afin
d’afficher les salles : (1pt)
salle.component.html
Home.component.html salle.component.ts
<div class="container mt-3 col-md-3">
<divclass="card"
<div *ngFor="letstyle="width:400px">
…[2]…. of salles" > export class SalleComponent {
<div class="raw">
<img class="card-img-top" src="../../assets/conf.jpeg" alt="Card image" style="width:100%">
…[4]… salle!:Salle;
<app-salle [..[3]…]="s"></app-salle>
<div class="card-body">
</div>
<h4 class="card-title" id="name" >..[5]...</h4> }
</div>
<p class="card-text" id="address" >..[6]…</p>
</div>
</div>
</div>
3- L’application respecte les scénarios de routage suivants :
- Au démarrage, l’application se redirige vers le composant HomeComponent,
- Le clic sur une salle montre les détails d’une salle dans le composant
DetailsSalleComponent en passant son id en paramètre.
2
- Le clic sur le bouton « réserver » depuis le composant DetailsSalleComponent vous
dirige vers le composant EventComponent pour réserver la salle en question.
- Après la création d’un évènement, l’application affiche le composant
HomeComponent.
- Toute url non reconnue, vous redirige vers un composant NotFoundComponent
3.1- Quel module faut-il importer au app.module.ts afin d’activer le routage ? (0.5pt)
[7]
3.2- Compléter le fichier app-routing.module.ts par le nécessaire afin de réaliser les scénarios
mentionnés : (1.75pts)
import { …[8]…. } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
3.3-
import { EventComponent } from './event/event.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { DetailleSalleComponent } from './details-salle/details-salle.component';
const routes: Routes = [
{path:'', ……[9]….., ……[10]………},
{path:"home", component:HomeComponent},
{path:"..[11]…. ", component:DetailsSalleComponent},
{path:"..[12]..", component:EventComponent},
{path:".. [13]..", component: NotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: […[14]……]
})
export class AppRoutingModule { }
Ajouter le nécessaire au salle.component.html pour que le clic sur l’image affiche les détails de la
salle (0.75pt)
[15] <img class="card-img-top" src="../../assets/conf.jpeg" alt="Card image" style="width:100%">
3.4- Veuillez compléter le code de DetailsSalleComponent.ts afin de récupérer l’id de la salle depuis
l’url (0.5pt)
export class DetailsSalleComponent implements OnInit {
id!:number;
constructor( …[16]…){}
ngOnInit(): void {
…….[17]………. }
}
4- Le formulaire d’ajout d’un événement en réservant une salle suit l’approche Template
Driven. Veuillez réaliser le contrôle de saisie suivant :
3
- Le nom de l’événement est obligatoire avec une longueur minimale de 3 caractères
- La date de début doit être supérieure à la date système,
- La date de fin doit être supérieure à la date début,
- Le Button « Create » est non cliquable si le formulaire est invalide.
Les données du formulaires sont récupérer après le remplissage ( c.à.d. sans two ways
binding) (3pts)
<h2 class="container mt-3">
<form #addEvent="…[18]……">
<div class="form-group">
<label for="">Event Name</label>
<input type="text" class="form-control" name="nEvent" …[19]…. #nameEvent="ngModel" required
……[20]……….>
<span style="color: red;" *ngIf="….[21] ">Name Must be at least 3</span>
<span style="color: red;" *ngIf="…[22].. ">Event Name is Required</span>
</div>
<div class="form-group">
<label for="">Start Date</label>
<input type="date" class="form-control" name="start" …[23]…. #startDate="ngModel" >
<!-- currentDate est une variable définit en ts qui récupère la date courante -- >
<span style="color: red;" *ngIf="..[24]…. ">Wrong Start Date!!</span>
</div>
<div class="form-group">
<label for="">End Date</label>
<input type="date" class="form-control" name="end" #endDate="ngModel" …[25]… >
<span style="color:red" *ngIf="..[26].. ">Wrong End Date</span>
</div>
<button (click)="reserveSalle(……[27]...)" class="btn btn-primary" [disabled]="..[28].. ">Create</button>
</form>
</h2>
5- Les données des salles et des événements ajoutés sont stockés dans un fichier appelé
data.json
L’url des salles : http://localhost:3000/salles,
L’url des événements : http://localhost:3000/events
Sachant que l’ajout d’un événement change l’état de la salle à réserver de « false » à
« true ». Compléter les scripts suivants pour ajouter un événement :
5.1-Event.ts (0.75pt)
//imports here
……[29]… ({
providedIn: 'root'
})
export class EventService {
url="http://localhost:3000/events";
constructor(private http:..[30]..) { }
4
addEvent(E:Event){
5.2- Salle.ts (0.75pt)
……
getSalles(){
return this.http.get<Salle[]>(this.url);
}
getSalleById(id:number){
return this.http.get<Salle>(this.url+'/'+id);
}
reserveSalle(salle : Salle){
…[32]….
}
}
5.3- Event.ts: Compléter seulement la fonction reserverSalle() permettant de récupérer les données
du formulaire, réserver une salle et créer un évènement puis redirige l’utilisateur au home. (1.5pt)
export class EventComponent implements OnInit{
constructor(private eventS:EventService, private route:Router, private salleS:SalleService){}
…
reserveSalle(..[33]..){
..[34]..
}
}
