Académique Documents
Professionnel Documents
Culture Documents
Semestre : 1 2
Session : Principale Rattrapage
2- Dans quel fichier sont déclarées les dépendances d’une application Angular ?
A) angular.json
B) packages.json
C) tsconfig.json
D) tsLint.json
1
6- Comment utiliser le HttpClient pour envoyer une requête POST à un endpoint (Order.url) à
partir d'une fonction addOrder dans cet OrderService ?
A) return this.httpClient.url(order.url).post(order);
B) return this.httpClient.send(order.url, order);
C) return this.httpClient.post(order.url, order);
D) return this.httpClient.post(order.url, order).subscribe();
7- Quelle est la différence entre ces deux exemples de balises pour le traitement conditionnel de
l'affichage ?
A) Le ngIf est un raccourci pour l'autre exemple. Lorsque Angular traite cette directive, il écrit un
élément div dans le DOM avec la propriété hidden.
B) Ils sont fondamentalement les mêmes.
C) La directive ngIf ne rend pas le div dans le DOM si l'expression est fausse. L'utilisation de la
propriété hidden masque le contenu du div dans la fenêtre du navigateur, mais le div est toujours
dans le DOM.
D) La directive ngIf est valide, mais l'utilisation de la propriété hidden est incorrecte et entraînera
une erreur.
8- Comment désactiver le bouton d'envoi lorsque le formulaire comporte des erreurs dans cet
exemple de formulaire template-driven ?
2
10- Quelle syntaxe de template-driven pouvez-vous utiliser sur ce champ de formulaire pour
accéder aux propriétés du champ et vérifier sa validité ?
A) Vous pouvez utiliser une variable référence de template exportant la directive ngModel et utilisez
cette variable par la suite pour accéder aux propriétés du champ.
B) Vous pouvez utiliser le name du champ d'entrée.
C) Vous pouvez utiliser une variable référence de template pour l'élément de saisie HTML, puis
vérifier la validité de la propriété à partir de cette variable.
D) Il n'est pas possible d'accéder aux propriétés du champ avec des formulaires template driven.
Vous devez utiliser des formulaires réactifs pour cela.
A) /user/15
B) /user?id=15
C) /user:15
D) /user;id=15
A) Il enregistre un fournisseur « provider » pour le service qui n'est disponible qu'au niveau du
module racine, et non pour les modules enfants.
B) Il enregistre un fournisseur « provider » pour le service dans l'injecteur de l'application racine,
rendant une seule instance de ce service disponible dans toute l'application.
C) Il fait en sorte que le service ne puisse être injecté que dans le composant d'amorçage
(bootstrapped) de l'application.
D) Il établit une règle de compilation qui vous permet de placer le type de service uniquement dans
la propriété des métadonnées des fournisseurs du NgModule racine.
13- Quelle est la directive utilisée pour lier une balise <a> au routage ?
A) routeTo
B) routerLink
C) routePath
D) appLink
3
14- Quelle est la syntaxe correcte pour utiliser la directive structurelle intégrée ngFor afin de
rendre une liste de noms de produits ?
A) <li [ngFor]="let productName of productNames">{{ productName }}</li>
B) <li ngFor="let productName of productNames">{{ productName }}</li>
C) <li *ngFor="let productName of productNames">{{ productName }}</li>
D) <? for productName in productNames { ?><li>{{ productName }}</li><? } ?>
15- Dans les formulaires réactifs, lequel des éléments suivants permet de créer un formulaire avec
un nombre d’éléments inconnu ?
A) FormArray
B) FormControl
C) FormGroup
D) Toutes les réponses
Exercice 2 : (1 pt)
…….[1]……. est le moyen de partager les données entre une classe de composant et sa vue.
…….[2]……..sont des attributs qui permettent à l'utilisateur d'écrire une nouvelle syntaxe HTML
spécifique à ses applications
…….[3]…… .identifie les composants, les directives et les modules interne et externe d’un module.
…….[4]……est une méthode hook appelée chaque fois qu'une ou plusieurs propriétés d'entrée du
composant changent.
app.component.ts app.component.html
export class AppComponent {
……………………………………………
……………………………………….
………………………………………
}
4
Exercice 4 : (9.5 pt)
Soit une application Angular contenant, un module racine et un module nommé AppLibrary.
Le composant LibraryComponent récupère la liste des « book » dans une propriété appelé listOfBooks
à partir de la méthode getAllBooks d’un service BookService.
Veuillez prendre en considération que la liste des livres est rendue par un REST Api sous format json
(http://localhost:3000/books).
1- Quelle est la commande qui permet de créer le module AppLibrary avec son module de
routing associé et de l’attacher au module racine ? (0.25 pt)
……………………………………………………………………………………….………
2- Pour appliquer le Lazy Loading, le module AppLibrary doit il exister dans la liste des
imports du module racine ? Pourquoi ? (0.75 pt)
………………………………………………………………………………………………...
Au chargement de l’application, la page affichée contient deux liens : Home et Library. En cliquant sur
le lien « Home », le composant HomeComponent est chargé. En cliquant sur le lien « Libray » le
composant LibraryComponent est chargé en mode « lazy loaded ». Si l’utilisateur tape un path non
valide, un composant NotFoundComponent est chargé.
@NgModule({
declarations: [
AppComponent,
…... [1] …...,
…... [2] …...
],
imports: [
…... [3] …...,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [……[4]……..]
})
5
export class AppModule { }
b. app-routing.module.ts (1 pt)
@NgModule({
imports: [RouterModule.forRoot(…... [8] …...)],
exports: [RouterModule]
})
export class AppRoutingModule { }
<fieldset>
<legend>Reference: …... [9] …...</legend>
<ul>
<li>Title : …... [10] …... </li>
<li>Author: …... [11] …... </li>
</ul>
</fieldset>
e. book.service.ts (1 pt)
@Injectable({
providedIn : 'root'
})
export class BookService {
bookUrl : string = "http://localhost:3000/books";
constructor(…...[12] …...) { }
getAllBooks():……..[13]……{
return this……..[14]……..get<……..[15]……>(this.bookUrl);
}
}
6
export class LibraryComponent implements OnInit {
listOfBooks : Book[]=[];
ngOnInit(): void {
……..[17]…… (res=>this.listOfBooks=res)
}
4- Pour chaque « Book » dans listOfBooks, un composant BookComponent est créé et lui
sont envoyés les informations relatives au « Book » en question pour qu’il les affiche par
la suite dans sa vue. Ecrivez alors le contenu de la vue du composant LibraryComponent
Library.component.html (0.75 pt)
5- Soit un champ de recherche au-dessous de la liste des « books » comme indiqué dans la
figure ci-dessous.
Si rien n’est saisie au niveau du champ alors tous les livres sont affichés. Si exactement le
« title » du « book » est écrit dans la zone de recherche, alors uniquement le livre
correspondant est affiché.
Ecrivez alors la condition nécessaire pour avoir le traitement décrit ci-dessus en tenant
compte de votre réponse dans la question précédente. (0.5 pt)
6- Nous allons créer maintenant un formulaire réactive pour ajouter un « book ». Complétez
le code nécessaire pour créer le formulaire dans la classe du composant
LibraryComponent. Vous êtes libre d’utiliser FormBuilder ou non. (1 pt)
7
this.formBook = ……..[18]…… ({
id : ……..[19]……,
title : ……..[20]……,
author : ……..[21]……
})
<form ……..[22]……>
<table>
<tr>
<td>id</td>
<td><input type="number" ……..[23]……></td>
</tr>
<tr>
<td>Title</td>
<td><input type="text" ……..[24]……></td>
</tr>
<tr>
<td>Author</td>
<td><input type="text" ……..[25]……></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="addBook"></td>
</tr>
</table>
</form>
……………………………………………………………………………………………………………