Afin d'éviter la fuite de questions, ce rapport ne doit pas être partagé avec les candidats.

Campagne : Angular 2+, AngularJS - Junior Domaine(s) : Angular 2+, AngularJS Langage : Français Date : 23/04/2023

MEILLEUR QUE

<1%
DURÉE 0h06 / 3h47

SCORE 113 / 5 770 (2%)

des professionnels

Angular 2+ 20 / 3 510pts (1%) MEILLEUR QUE <1% des professionnels

Connaissance du langage 20 / 3 395pts

Fiabilité 0 / 115pts

AngularJS 93 / 2 260pts (4%) MEILLEUR QUE <1% des professionnels

Connaissance du langage 93 / 2 260pts

Accéder au rapport détaillé

1 / 111
 Question 1: Mise à jour du modèle retardée
AngularJS 00:05 / 01:00 0 / 40 pts

Question
Quel attribut devrait être ajouté à un élément associé à la directive ng-model pour passer le délai de
mise à jour et validation à une seconde ?

Réponse

ng-model-options="{debounce: 1}"

ng-model-options="{delay: 1}"

ng-model-options="{delay: 1000}"

ng-model-options="{debounce: 1000}"

Résultat
Réponse incorrecte
Connaissance du langage +40pts

2 / 111
Question 2: Directive ou controller
AngularJS 00:03 / 02:00 40 / 40 pts

3 / 111
 Question
Les deux codes ci-dessous donnent le même résultat. Lequel est préférable ?

Code 1

Code 2

4 / 111
 Réponse

Code 1

Code 2

Résultat
Réponse correcte
Connaissance du langage +40pts

Question 3: Core directives

AngularJS 00:03 / 00:40 13 / 40 pts

Question
Parmi ces propositions, quelles sont celles qui désignent des directives du framework AngularJS ?

Plusieurs réponses attendues.

Réponse

ng-app

ng-model

ng-state

ng-bind

Résultat
Réponse partiellement correcte
Connaissance du langage +13/40pts

5 / 111
 Question 4: Scope bidirectionnel
AngularJS 00:03 / 00:40 40 / 40 pts

Question
Quelle valeur de propriété d'un scope isolé permet de créer une association bidirectionnelle entre le
scope local de la directive et son scope parent ?

Réponse

<

&

Résultat
Réponse correcte
Connaissance du langage +40pts

6 / 111
 Question 5: Requêtes $http correctes
AngularJS 00:03 / 00:45 0 / 40 pts

Question
Sélectionnez les requêtes $http valides parmi les propositions ci-contre.

Plusieurs réponses attendues.

Réponse

$http.get('/someUrl', config).then(successCallback, errorCallback);

$http.data('GET').then(successCallback, errorCallback);

$http.data('POST', '/someUrl', data).then(successCallback, errorCallback);

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

Résultat
Réponse incorrecte
Connaissance du langage +40pts

7 / 111
 Question 6: ngModel à chaque frappe de clavier
AngularJS 00:04 / 01:00 0 / 40 pts

Question
Par défaut, à quel moment la donnée du modèle associée à un champ <input ng-model="...">  est-
elle modifiée ?

Réponse

Quand le champ perd le focus

A chaque frappe de clavier

A chaque frappe de clavier et que la valeur saisie passe la validation

Quand le champ perd le focus et que la valeur saisie passe la validation

Résultat
Réponse incorrecte
Connaissance du langage +40pts

8 / 111
 Question 7: Scope isolé pour directive
AngularJS 00:04 / 01:00 0 / 40 pts

Question
Parmi les propositions ci-contre, quelle est celle qui permet de créer un scope isolé pour une directive ?

Réponse

scope: true

scope: isolate

scope: {}

scope: 0

Résultat
Réponse incorrecte
Connaissance du langage +40pts

9 / 111
 Question 8: Application de directives
AngularJS 00:04 / 01:00 0 / 40 pts

Question
Dans quels cas peut-on dire que la directive ngModel s'applique à l'élément <input> ?

Plusieurs réponses attendues.

Réponse

<input ng-model="name"/>

<input ngmodel="name"/>

<input data-ng-model="name"/>

<input ngModel="name"/>

Résultat
Réponse incorrecte
Connaissance du langage +40pts

10 / 111
 Question 9: Services internes AngularJS
AngularJS 00:04 / 00:30 0 / 40 pts

Question
Parmi les propositions suivantes, l'une d'elle n'est pas un service interne d'AngularJS. Laquelle ?

Réponse

$http

$view

$log

$cookies

Résultat
Réponse incorrecte
Connaissance du langage +40pts

11 / 111
 Question 10: Service $q
AngularJS 00:04 / 01:30 0 / 40 pts

Question
Le script ci-dessous affiche l'erreur “$q is not defined” à l'exécution.

Comment résoudre cette erreur si vous souhaitez utiliser le service built-in $q ?

Réponse

Créer une variable $q

Injecter le service $q

Ajouter une dépendance vers le module $q à la ligne 5

Déclarer $q en tant que variable du scope

12 / 111
 Résultat
Réponse incorrecte
Connaissance du langage +40pts

Question 11: $rootScope

AngularJS 00:04 / 00:40 0 / 20 pts

Question
$rootScope est attaché à :

Réponse

L'élément sur lequel la directive ng-app est présente

Aucun élément HTML

L'élément <html>

L'élément <body>

Résultat
Réponse incorrecte
Connaissance du langage +20pts

13 / 111
 Question 12: Expression valide
AngularJS 00:04 / 00:30 0 / 20 pts

Question
Parmi les propositions suivantes, l'une d'elle représente une expression AngularJS valide. Laquelle ?

Réponse

{{ 2 + 2 }}

{2 + 2}

[[ 2 + 2 ]]

(2 + 2)

Résultat
Réponse incorrecte
Connaissance du langage +20pts

14 / 111
 Question 13: Service d'appel asynchrone
AngularJS 00:04 / 00:30 0 / 60 pts

Question
Quel service AngularJS utiliseriez-vous si vous souhaitez exécuter une fonction de manière asynchrone ?

Réponse

$async

$q

$promise

$wait

Résultat
Réponse incorrecte
Connaissance du langage +60pts

15 / 111
 Question 14: Classes ngModel valides
AngularJS 00:04 / 00:40 0 / 60 pts

Question
Parmi ces propositions laquelle n'est pas une classe css ajoutée/enlevée en fonction de la validité de
ngModel ?

Réponse

ng-reset

ng-valid

ng-invalid

ng-pending

Résultat
Réponse incorrecte
Connaissance du langage +60pts

16 / 111
 Question 15: Supprimer du contenu HTML avec ng-if
AngularJS 00:04 / 00:40 0 / 60 pts

Question
Quelle directive AngularJS est utilisée pour enlever complétement un élément du DOM de manière
conditionnelle ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

Réponse(s) correcte(s)
ng-if
ngIf
(?).*ng-if.*

17 / 111
 Question 16: ngRequired
AngularJS 00:04 / 00:45 0 / 60 pts

Question
Qu'est-ce qui est vrai à propos de la directive ngRequired ?

Plusieurs réponses attendues.

Réponse

Elle ajoute au ngModel la validation des données requises

Elle fonctionne sur les champs <input> et &ltselect> et ne peut pas être
appliquée sur un champ personnalisé

Elle ajoute l'attribute required sur son élément si l'expression du

ngRequired est évaluée à "true"

Résultat
Réponse incorrecte
Connaissance du langage +60pts

18 / 111
 Question 17: Les services AngularJS
AngularJS 00:04 / 00:45 0 / 60 pts

Question
Les services AngularJS sont:

Plusieurs réponses attendues.

Réponse

Instanciés à la demande (lazily)

Instanciés au démarrage d'AngularJS (eagerly)

Des singletons

Cablés les uns les autres par DI (Dependency Injection = injection de

dépendances)

Résultat
Réponse incorrecte
Connaissance du langage +60pts

19 / 111
 Question 18: Scope d'un "component"
AngularJS 00:04 / 00:45 0 / 60 pts

Question
Qu'est-ce qui est vrai à propos du scope d'un component AngularJS ?

Réponse

Le scope d'un component AngularJS est toujours hérité du scope parent par
défaut

Le scope d'un component AngularJS est toujours isolé

Comme pour une directive AngularJS, les associations de scope sont définis
par la propriété scope du component AngularJS

Résultat
Réponse incorrecte
Connaissance du langage +60pts

20 / 111
 Question 19: ngModelController
AngularJS 00:03 / 00:45 0 / 60 pts

Question
Quelle propriété de ngModelController devrait être utilisée pour exécuter du code personnalisé à
chaque fois que le ngModel associé est modifié programmatiquement ?

Réponse

$formatters

$parsers

$validators

Résultat
Réponse incorrecte
Connaissance du langage +60pts

21 / 111
 Question 20: Élements correspondants aux directives
AngularJS 00:03 / 00:45 0 / 60 pts

Question
Sur quels items HTML les directives AngularJS peuvent-elles être appliquées ?

Plusieurs réponses attendues.

Réponse

Les élements HTML

Les noms de classes CSS

Les attributs HTML

Les commentaires HTML

Résultat
Réponse incorrecte
Connaissance du langage +60pts

22 / 111
 Question 21: Transclude
AngularJS 00:03 / 00:50 0 / 60 pts

Question
Comment déclare-t-on un contenu par défaut pour une directive ngTransclude si aucun contenu n'est
fourni à l'utilisation de la directive ?

Réponse

<ng-transclude="fallback content"/>

<ng-transclude fallback="fallback content"/>

<ng-transclude> fallback content </ng-transclude>

<ng-transclude> <fallback> fallback content </fallback> </ng-transclude>

Résultat
Réponse incorrecte
Connaissance du langage +60pts

23 / 111
 Question 22: Création d'un scope isolé
AngularJS 00:03 / 00:45 0 / 60 pts

Question
Quelle est la manière correcte de créer un nouveau scope isolé ?

Réponse

parentScope.$new()

parentScope.$new(true)

parentScope.$new(false, differentParentScope)

parentScope.$new(false, {isolated:true})

Résultat
Réponse incorrecte
Connaissance du langage +60pts

24 / 111
 Question 23: ngNonBindable
AngularJS 00:03 / 00:45 0 / 60 pts

Question
Quelle directive permet d'indiquer au compilateur AngularJS de ne pas compiler ou "binder" le contenu
de l'élément courant ?

Réponse

ngNoCompile

ngNoBind

ngNonBindable

ngNonCompilable

Résultat
Réponse incorrecte
Connaissance du langage +60pts

25 / 111
 Question 24: Filtres AngularJS
AngularJS 00:03 / 00:45 0 / 60 pts

Question
Qu'est-ce qui est vrai à propos des filtres AngularJS ?

Plusieurs réponses attendues.

Réponse

Les filtres sont utilisés pour formatter des données présentées à

l'utilisateur

Les filtres sont utilisés pour formatter des données présentées à l'utilisateur
et permettent également de mettre à jour ces données

Ils peuvent être utilisés dans des templates de la vue, des controlleurs et
des services

Vous pouvez écrire des filtres personalisés en plus des filtres fournis par le
framework AngularJS

Résultat
Réponse incorrecte
Connaissance du langage +60pts

26 / 111
 Question 25: Propagation d'événements
AngularJS 00:04 / 01:00 0 / 60 pts

Question
Quelle méthodes de $scope permet de propager un événement à tous les scopes fils et leurs enfants ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

Réponse(s) correcte(s)
$broadcast
$broadcast()
(?).*$broadcast.*

27 / 111
 Question 26: Service $location
AngularJS 00:04 / 01:00 0 / 60 pts

Question
Que fait le service $location ?

Plusieurs réponses attendues.

Réponse

Il parse l'URL de la barre d'adresse du navigateur et la rend disponible au

niveau de l'application

Il s'assure que les changements effectués au niveau de $location sont

reflétés au niveau de l'URL du navigateur

Il redirige automatiquement l'utilisateur vers une URL correcte

Il corrige automatiquement l'URL si une URL invalide est saisie par l'utilisateur

Résultat
Réponse incorrecte
Connaissance du langage +60pts

28 / 111
 Question 27: Raison d'être de $scope
AngularJS 00:05 / 01:00 0 / 60 pts

Question
Qu'est-ce qui est vrai à propos de $scope en AngularJS ?

Plusieurs réponses attendues.

Réponse

Il fournit l'API permettant de surveiller les changements du modèle

Une application n'a qu'un $scope partagé par tous les composants

Il peut être encapsulé (nested) pour isoler les fonctionalités et les

propriétés du modèle

Il fournit un contexte d'exécution dans lequel les expressions sont évaluées

Résultat
Réponse incorrecte
Connaissance du langage +60pts

29 / 111
 Question 28: Expression "track by"
AngularJS 00:10 / 01:00 0 / 60 pts

Question
Quest-ce qui est vrai à propos de l'expression track by de la directive ng-repeat ?

Plusieurs réponses attendues.

Réponse

Si vous avez des éléments en double dans un tableau, vous devez utiliser
votre propre expression track by

Quand aucune expression track by n'est fournie, l'expression par défaut

utilisée est la fonction built-in $id

On ne peut pas référencer une fonction du scope dans une expression

track by

Résultat
Réponse incorrecte
Connaissance du langage +60pts

30 / 111
 Question 29: $asyncValidators
AngularJS 00:04 / 01:00 0 / 60 pts

Question
Quelle classe la directive ngModel ajoute-t-elle tant que l'un de ses $asyncValidators n'a pas été
résolu ou rejeté.

Réponse

ng-dirty

ng-untouched

ng-invalid

ng-pending

Résultat
Réponse incorrecte
Connaissance du langage +60pts

31 / 111
 Question 30: Compilation
AngularJS 00:17 / 01:00 0 / 60 pts

Question
Qu'est-ce qui est vrai à propos du process de compilation AngularJS ?

Plusieurs réponses attendues.

Réponse

Il traverse le DOM à la recherche d'attributs

Il a seulement 3 phases : compile, link et unlink

Le résultat d'une phase de compilation est une fonction "link"

La fonction de compilation a accès aux scopes

Résultat
Réponse incorrecte
Connaissance du langage +60pts

32 / 111
 Question 31: Scope de directive
AngularJS 00:05 / 01:15 0 / 60 pts

Question
Pour qu'une directive puisse accéder à une donnée du scope de son parent, la valeur de son scope peut
être :

Plusieurs réponses attendues.

Réponse

scope:true

scope:false

scope:{}

Résultat
Réponse incorrecte
Connaissance du langage +60pts

33 / 111
 Question 32: ngShow dirty
AngularJS 00:06 / 01:30 0 / 60 pts

Question
Quelle devrait être la valeur de l'attribut ng-show à la ligne 4 si l'on souhaite afficher le bouton "Save"
quand le champ <input> "Message" est dans l'état "dirty" (non-sauvegardé).

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

Réponse(s) correcte(s)
form.msg.$dirty
(?i).*form.msg.$dirty.*

34 / 111
 Question 33: $watch
AngularJS 00:03 / 01:45 0 / 60 pts

Question
Vis-à-vis du code ci-dessous, sélectionnez le code qui permet de réagir aux changements des deux
propriétés ( currency et value ) de l'objet amount .

Réponse

$scope.$watch('amount', myListener)

$scope.$watch('amount.*', myListener)

$scope.$watch('amount', myListener, false)

$scope.$watch('amount', myListener, true)

Résultat
Réponse incorrecte
Connaissance du langage +60pts

35 / 111
 Question 34: Scope binding &
AngularJS 00:09 / 02:00 0 / 60 pts

Question
Quelle valeur de "scope binding" devrait remplacer "..." à la ligne 15 pour que la fonction  getName()  du
scope parent soit correctemment appelée depuis le template de la directive ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

36 / 111
 Réponse(s) correcte(s)
&
&?
'&'
'&?'
&name
'&name"

Question 35: Promise API

AngularJS 00:03 / 02:15 0 / 60 pts

Question
Le code ci-dessous affiche “SUCCESS: Saved data on file” sur la page.

Remplacez le code à la ligne 17 afin que “FAIL: Invalid Data” soit affiché sur la page.

37 / 111
 Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

Réponse(s) correcte(s)
deferred.reject('Invalid Data')
deferred.reject("Invalid Data")
deferred.reject('Invalid Data');
deferred.reject("Invalid Data");

38 / 111
 Question 36: Scope digest
AngularJS 00:03 / 02:00 0 / 60 pts

Question
Ajouter la ligne de code manquante ligne 11 afin qu'après un délai de 2 secondes, “Second message” soit
affiché sur la page.

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

Réponse(s) correcte(s)
$scope.$apply();
$scope.$apply()
$scope.$digest();
$scope.$digest()

39 / 111
 Question 37: Variables internes ng-repeat
AngularJS 00:03 / 02:00 0 / 60 pts

Question
Quelles valeurs sont affichées sur la page à l'exécution du code ci-dessous ?

Réponse

$name, realAge, $age, qualification

M, 90, 32, Graduate

90, Graduate

realAge, qualification

40 / 111
 Résultat
Réponse incorrecte
Connaissance du langage +60pts

Question 38: Scope binding unilatéral

AngularJS 00:03 / 02:00 0 / 60 pts

Question
Quest-ce qui est vrai à propos du code ci-dessous ?

Plusieurs réponses attendues.

41 / 111
 Réponse

Une modification de custName modifie la valeur de myName dans le scope

parent

Une modification de custCountry ne modifie pas la valeur de myCountry

dans le scope parent

Une modification de custCountry modifie la valeur de myCountry dans le

scope parent

Une modification de myCountry ne modifie pas la valeur de custCountry

Résultat
Réponse incorrecte
Connaissance du langage +60pts

42 / 111
 Question 39: Modules AngularJS de base
AngularJS 00:03 / 00:35 0 / 60 pts

Question
Parmi les propositions ci-contre, quelles sont celles qui désignent des modules AngularJS valides ?

Plusieurs réponses attendues.

 

Réponse

ngLocation

ngAria

ngScope

ngMock

Résultat
Réponse incorrecte
Connaissance du langage +60pts

43 / 111
 Question 40: Mise à jour du ngModel
AngularJS 00:03 / 02:00 0 / 40 pts

Question
Vis-à-vis du code ci-dessous, sélectionnez le code à ajouter à l'élement <input> afin que le ngModel
soit mis à jour après la perte de focus du champ et non pas à chaque frappe de clavier ?

Réponse

ng-model-options="{updateOn:'blur'}"

ng-model-options="{updateOn:'focusout'}"

ng-model-update="{on:'blur'}"

ng-model-update=”{on:'focusout')”

44 / 111
 Résultat
Réponse incorrecte
Connaissance du langage +40pts

Question 41: Bootstrap AngularJS

AngularJS 00:03 / 00:30 0 / 40 pts

Question
Quelle fonction doit être appelée pour lancer une application AngularJS manuellement ?

Réponse

angular.start

angular.init

angular.bootstrap

angular.load

Résultat
Réponse incorrecte
Connaissance du langage +40pts

45 / 111
 Question 42: setInterval wrapper
AngularJS 00:03 / 00:45 0 / 40 pts

Question
Quel est le remplacement AngularJS de la fonction window.setInterval ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +40pts

Réponse(s) correcte(s)
$interval
(?i).*$interval.*

46 / 111
 Question 43: Filtre currency
AngularJS 00:03 / 00:45 0 / 40 pts

Question
Par quelle façon peut-on afficher un montant exprimé dans la monnaie locale?

Exemple $100 aux États-Unis, ¥100 au Japon, etc?

Réponse

{{currency: 100}}

{{100 | locale}}

{{100 | currency}}

{{100 | lang}}

Résultat
Réponse incorrecte
Connaissance du langage +40pts

47 / 111
 Question 44: Restreindre une directive
AngularJS 00:03 / 00:40 0 / 40 pts

Question
Parmi les propositions ci-contre, quel valeur de l'option restrict permet de restreintre l'usage d'une
directive au niveau d'une classe, d'un élément ou d'un attribut ?

Réponse

ACE

ACB

ADC

BAC

Résultat
Réponse incorrecte
Connaissance du langage +40pts

48 / 111
 Question 45: Lazy loading avec loadChildren
Angular 2+ 00:03 / 01:00 0 / 60 pts

Question
Ligne 13 du code ci-dessous, par quoi doit-on remplacer ???? pour que le module users soit chargé à
la volée (lazy loading) ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

Réponse(s) correcte(s)
loadChildren

49 / 111
 Question 46: Syntaxe de propriété de sortie
Angular 2+ 00:03 / 01:15 0 / 60 pts

Question
On considère le composant <app-user> qui a une propriété de sortie appelée updated .

Ligne 7, par quoi doit-on remplacer  ????  pour obtenir la donnée à jour de la propriété  updated  ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

50 / 111
 Réponse(s) correcte(s)
(updated)
( updated )

51 / 111
 Question 47: Directive ngStyle
Angular 2+ 00:03 / 01:00 0 / 60 pts

Question
Quelle directive Angular built-in peut-on utiliser pour remplacer ???? à la ligne n°6 pour appliquer les
styles ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

Réponse(s) correcte(s)
[ngStyle]
[ ngStyle ]

52 / 111
 Question 48: Angular SEO
Angular 2+ 00:03 / 00:45 0 / 60 pts

Question
Comment peut-on rendre un app Angular plus SEO friendly ?

Réponse

En utilisant un rendu côté serveur

En utilisant un rendu côté client

Par défaut, Angular est déjà suffisamment "SEO friendly"

En utilisant un module SEO spécifique

Résultat
Réponse incorrecte
Connaissance du langage +60pts

53 / 111
 Question 49: ng eject
Angular 2+ 00:03 / 00:40 0 / 60 pts

Question
Quelle commande permet de découpler son application Angular de la CLI Angular, par exemple pour
vous permettre de configurer webpack manuellement ?

Réponse

ng eject

ng remove

ng delete

ng exit

ng webpack

ng decouple

Résultat
Réponse incorrecte
Connaissance du langage +60pts

54 / 111
 Question 50: Détection de modifications d'un composant
Angular 2+ 00:03 / 00:30 0 / 60 pts

Question
Quelle est la stratégie de détection de modifications par défaut pour un composant ?

Réponse

Component Change Detection

ChangeDetection

OnPush

Default

Résultat
Réponse incorrecte
Connaissance du langage +60pts

55 / 111
 Question 51: Affichage d'une liste (@Input, ngIf, ngFor)
Angular 2+ 00:08 / 25:00 20 / 150 pts

Question
On vous demande de créer un composant Angular nommé TestComponent avec test-component
pour sélecteur.
 
Le composant doit déclarer un input de type Array<string>  nommé inputData .
 
S'il n'y a pas de donnée en entrée ( inputData vide ou manquant) , vous devez écrire "No data" dans un
div avec id="noData" . Si le tableau inputData n'est pas vide, le div ne doit pas être présent dans le
DOM de la page.
 
Si le tableau contient au moins un élément, vous devez écrire les chaines de caractères de ce tableau
dans des divs séparés. Ces divs doivent être les fils d'un div avec id="dataList" . Si la longueur d'une
chaine est impaire, alors le texte doit être écrit en rouge red , sinon en vert green .
 
Une prévisulisation est mise à votre disposition, son rendu HTML devrait être le suivant :

<test-component>
<div id="noData">No data</div>
<div id="dataList"></div>
</test-component>
<test-component>
<div id="dataList">
<div style="color: red;">Odd</div>
<div style="color: green;">Even</div>
</div>
</test-component>

  Notes :  Un bloc de "Preview" est disponible pour vous permettre de débugguer votre code. Il affiche
votre composant ci-dessous. Vous pouvez l'ouvrir et le modifier à votre guise. Ce bloc de "Preview" n'est
pas pris en compte dans le calcul du score de votre code.

56 / 111
 Réponse

1 // Angular 15.x code

2 import { Component, NgModule, Input } from '@angular/core';
3 import { CommonModule } from '@angular/common';
4
5
6 @Component({
7 selector:'test-component',
8 template: `
9 `,
10 })
11 export class TestComponent {
12
13 constructor() {
14 }
15
16 }
17
18 // #region Preview
19 @Component({
20 template: `
21 <test-component></test-component>
22 <test-component [inputData]="['Odd','Even']"></test-component>
23 `
24 })
25 export class PreviewComponent { }
26 // #endregion Preview
27
28 // #region Module declaration - Do not Change
29 @NgModule({
30 imports: [CommonModule],
31 declarations: [PreviewComponent, TestComponent],
32 entryComponents: [PreviewComponent]
33 })
34 export class PreviewModule { }
35 // #endregion Module declaration

Voir le code playback

57 / 111
 Résultat
Compile
Connaissance du langage +0pts

Green
Connaissance du langage +20pts

Red
Connaissance du langage +20pts

Div noData supprimé si pas de donnée

Connaissance du langage +20pts

noData div présent

Connaissance du langage +40pts

Liste longue
Connaissance du langage +50pts

Question 52: "Router outlet" nommé

Angular 2+ 00:06 / 25:00 0 / 450 pts

Question
État initial :
Dans PreviewComponent vous pouvez voir deux liens.  Quand Menu1 est cliqué, Menu1Component
est chargé, quand Menu2 est cliqué, Menu2Component est chargé. Dans les deux cas <footer-
component> reste vide.
À faire :
Vous devez modifier le code pour charger FooterAComponent dans <footer-component> quand
Menu1Component est chargé. Idem avec FooterBComponent quand Menu2Component est chargé.
 
Vous pouvez modifier les classes et variables suivantes :
appRoutes FooterWrapperComponent Menu1Component Menu2Component
Si vous modifiez autre chose, les tests de validation échoueront.
 
Notes :  Un bloc de "Preview" est disponible pour vous permettre de débugguer votre code. Il affiche
votre composant ci-dessous. Vous pouvez l'ouvrir et le modifier à votre guise. Ce bloc de "Preview" n'est
pas pris en compte dans le calcul du score de votre code.

58 / 111
 Réponse

1 // Angular 15.x code

2 import { Component, Input, NgModule, Injectable } from '@angular/core';
3 import {APP_BASE_HREF} from '@angular/common';
4 import { RouterModule, Routes, Router } from '@angular/router';
5
6
7 @Component({
8 selector:'footer-a-component',
9 template: `
10 <div>You are at footer A.</div>
11 `
12 })
13 export class FooterAComponent {
14 }
15
16 @Component({
17 selector:'footer-b-component',
18 template: `
19 <div>You are at footer B</div>
20 `
21 })
22 export class FooterBComponent {
23 }
24
25 @Component({
26 selector:'menu1-component',
27 template: `
28 <div id="menuComp">You are at menu 1.</div>
29 `
30 })
31 export class Menu1Component {
32 }
33
34 @Component({
35 selector:'menu2-component',
36 template: `
37 <div id="menuComp">You are at menu 2.</div>
38 `
39 })
40 export class Menu2Component {
41 }
42
43 @Component({
44 selector: 'footer-component',
45 template: `<router-outlet name="footer"></router-outlet>`
46 })
47 export class FooterWrapperComponent {
48 }
49
50 export const appRoutes: Routes = [
51 { path: 'menu1', component: Menu1Component },
52 { path: 'menu2', component: Menu2Component },
53
54 { path: 'footer-a', component: FooterAComponent },
55 { path: 'footer-b', component: FooterBComponent }
56 ]
57
58 // #region Preview
59 @Component({
60 template: `
61 <nav>
62 <a id="menu1" routerLink="/menu1">Menu1</a>
63 </nav>

59 / 111
 64 <nav>
65 <a id="menu2" routerLink="/menu2">Menu2</a>
66 </nav>
67 <br>
68 <router-outlet></router-outlet>
69 <br>
70 <footer-component id="footer"></footer-component>
71 `
72 })
73 export class PreviewComponent {
74 }
75 // #endregion Preview
76
77
78 // #region Module declaration - Do not Change
79 @NgModule({
80 imports: [RouterModule.forRoot(appRoutes, {useHash: true})],
81 exports: [RouterModule]
82 })
83 export class AppRoutingModule {
84 }
85
86 @NgModule({
87 imports: [
88 RouterModule,
89 AppRoutingModule
90 ],
91 declarations: [
92 PreviewComponent,
93 Menu1Component,
94 Menu2Component,
95 FooterWrapperComponent,
96 FooterAComponent,
97 FooterBComponent
98 ],
99 entryComponents: [PreviewComponent],
100 providers: [{provide: APP_BASE_HREF, useValue : '/'}]
101 })
102 export class PreviewModule { }
103 // #endregion Module declaration

Voir le code playback

Résultat
Compile
Connaissance du langage +0pts

Bas de page 1
Connaissance du langage +150pts

Bas de page 2
Connaissance du langage +150pts

Bas de page 2 puis 1

Connaissance du langage +150pts

60 / 111
 Question 53: Directive ngFor
Angular 2+ 00:04 / 00:50 0 / 40 pts

Question
Ligne 7, par quoi doit-on remplacer ?? pour que la directive ngFor puisse fonctionner ?
 

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +40pts

Réponse(s) correcte(s)
of

61 / 111
 Question 54: Subscribe/Unsubscribe
Angular 2+ 00:03 / 00:45 0 / 40 pts

Question
Comment peut-on souscrire et se désabonner (Subscribe/Unsubscribe) automatiquement d'un
Observable en Angular ?

Réponse

avec un "sync pipe"

avec un "async pipe"

en utilisant le méthode ngOnDestroy du cycle de vie d'un composant

avec les instructions "async / await"

Résultat
Réponse incorrecte
Connaissance du langage +40pts

62 / 111
 Question 55: Écouter les événements de l'hôte
Angular 2+ 00:03 / 00:45 0 / 40 pts

Question
Quel décorateur peut-on utiliser pour écouter les événements de l'élément hôte depuis une directive
fille?

Réponse

@HostListener

@Listener

@Target

@Event

Résultat
Réponse incorrecte
Connaissance du langage +40pts

63 / 111
 Question 56: Symbole de référence locale
Angular 2+ 00:03 / 00:40 0 / 40 pts

Question
Angular vous permet de créer une référence locale pour des tags html/input dans les templates.

Quel symbole utilise-t-on pour cela ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +40pts

64 / 111
 Question 57: Cycle de vie Angular
Angular 2+ 00:03 / 00:40 0 / 40 pts

Question
Parmi les propositions suivantes, laquelle n'est pas une méthode du cycle de vie Angular ?

Réponse

ngOnChanges

ngOnDestroy

ngAfterViewInit

ngContentChange

Résultat
Réponse incorrecte
Connaissance du langage +40pts

65 / 111
 Question 58: Formulaires Angular
Angular 2+ 00:03 / 00:35 0 / 40 pts

Question
Quels types de formulaires peut-on créer avec Angular ?

Plusieurs réponses attendues.

Réponse

Template driven Forms

Reactive Forms

Component Forms

Directive Forms

Active Forms

Résultat
Réponse incorrecte
Connaissance du langage +40pts

66 / 111
 Question 59: Affichage par route
Angular 2+ 00:03 / 00:35 0 / 40 pts

Question
Quel tag est utilisé pour afficher du contenu différent en fonction de la route ?

Réponse

<router></router>

<router-output></router-output>

<route></route>

<router-outlet></router-outlet>

Résultat
Réponse incorrecte
Connaissance du langage +40pts

67 / 111
 Question 60: Extension Chrome pour debugging
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Parmi les propositions ci-contre, quelle est celle qui désigne une extension Chrome pour débugguer les
apps Angular ?

Réponse

ngrx

npx

npm

Angular DevTools

Résultat
Réponse incorrecte
Connaissance du langage +40pts

68 / 111
 Question 61: Affichage d'une propriété
Angular 2+ 00:03 / 00:35 0 / 40 pts

Question
Comment peut-on afficher une propriété définie dans un composant ?
 

Réponse

par injection de dépendance

par interpolation

en utilisant une "query string"

en utilisant un filtre

Résultat
Réponse incorrecte
Connaissance du langage +40pts

69 / 111
 Question 62: Type de retour HttpClient
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Que retourne chacun des services d'appel http (get, post, etc.) du service HttpClient  ?

Réponse

Un objet

Un observable

Une promise

Un callback

Résultat
Réponse incorrecte
Connaissance du langage +40pts

70 / 111
 Question 63: Routes non trouvées
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Quelle syntaxe peut-on utilser pour matcher et traiter les routes non-trouvées ?

Réponse

**

&&

Résultat
Réponse incorrecte
Connaissance du langage +40pts

71 / 111
 Question 64: Route avec accès non-autorisé
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Comment pouvez-vous protéger une certaine route contre les accès non-autorisés ?

Réponse

en utilisant un UrlMatcher

en utilisant des "route guards"

en utilisant un service spécifique

en traitant des événements de sécurité

Résultat
Réponse incorrecte
Connaissance du langage +40pts

72 / 111
 Question 65: Passage de données parent-enfant
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Quelle syntaxe permet de passer une donnée d'un composant parent à un parent fils ?

Réponse

@Input()

@Output()

Input

Output

Résultat
Réponse incorrecte
Connaissance du langage +40pts

73 / 111
 Question 66: Passage de données d'enfant vers parent
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Quelle syntaxe utiliseriez-vous pour passer une donnée d'un fils vers son composant parent ?

Réponse

Output

Input

@Output()

@Input()

Résultat
Réponse incorrecte
Connaissance du langage +40pts

74 / 111
 Question 67: Lazy routes
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Quelle propriété de l'objet Routes permet de définir des routes chargées à la volée (lazy loading) ?

Réponse

lazyRoutes

children

route

loadChildren

Résultat
Réponse incorrecte
Connaissance du langage +40pts

75 / 111
 Question 68: Accèder aux paramètres de route
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Quel service peut-on utiliser pour récupérer les paramètres de route depuis un composant ?

Réponse

Route

Router

ActivatedRoute

CurrentRoute

Résultat
Réponse incorrecte
Connaissance du langage +40pts

76 / 111
 Question 69: Définition des routes filles
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Au sein de l'objet de type Routes , quelle propriété permet de définir des routes filles ?

Réponse

loadChildren

route

children

childRoutes

Résultat
Réponse incorrecte
Connaissance du langage +40pts

77 / 111
 Question 70: Angular CLI
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Quelle commande ne fait pas partie de la CLI Angular ?

Réponse

ng test

ng lint

ng exit

ng deploy

Résultat
Réponse incorrecte
Connaissance du langage +40pts

78 / 111
 Question 71: [(ngModel)] import
Angular 2+ 00:03 / 00:30 0 / 40 pts

Question
Quel module doit-on importer pour pouvoir utiliser [(ngModel)]  ?

Réponse

NgModule

BrowserModule

FormsModule

InputModule

Résultat
Réponse incorrecte
Connaissance du langage +40pts

79 / 111
Question 72: Composant comptabilité : appels de services
Angular 2+ 00:10 / 30:00 0 / 400 pts

80 / 111
 Question
Dans cet exercice, on vous demande de créer un composant nommé  AccountComponent ayant pour
sélecteur account-component .
 
Le composant représente un page d'administration d'une application financière depuis laquelle
l'utilisateur peut 1) créer des comptes et 2) déposer (top up) de l'argent sur n'importe quel compte
existant..
 
Ce composant doit utiliser le service AccountingService pour implémenter ces 2 opérations. Une
solution qui modifierait ou n'utiliserait pas le service ne sera pas considérée comme correcte.
 
Pour chaque opération, vous devez:
Créez des inputs et des boutons pour permettre l'intéraction avec l'utilisateur. Définir un <div> avec
id='message' pour informer l'utilisateur. Ce champ est commun au deux opérations. Exemple HTML
d'un message :

<div id="message">Example message</div>

 
1. Création de comptes :
Vous devez créer:
un champ <input> avec id='createAccountInput' un bouton avec
id='createAccountButton' .
Vous ne devez pas implémenter de validation du champ. Le composant doit créer un compte avec le
nom donné en entrée quand l'utilisateur clique sur le bouton. Après une création réussie, le message
"Successfully added account" doit s'afficher.
2. Dépôt sur un compte:
Vous devez créer:
un <input> avec id='topupAccountInput' , un autre <input> avec id=
id='topupAmountInput' un bouton avec id='topupAccountButton' .
Si l'utilisateur fournit un compte et une somme valide, le montant doit être ajouté au compte après un
clic sur le bouton. Si l'opération réussit, le message "Current balance: x" doit s'afficher (x est le montant
disponible sur le compte après l'opération).
 
Quand un nombre négatif (ou 0) est saisi par l'utilisateur, vous ne devez pas appeler le service et vous
devez afficher le message INVALID_INPUT .
 
Notes :
Vous devez modifier le template ainsi que la classe du composant. Attention aux erreurs possible en
provenance du service. Les messages d'erreurs doivent être affichés à l'utilisateur sans modification. Un
bloc de "Preview" est disponible pour vous permettre de débugguer votre code. Il affiche votre
composant ci-dessous. Vous pouvez l'ouvrir et le modifier à votre guise. Ce bloc de "Preview" n'est pas
pris en compte dans le calcul du score de votre code.

81 / 111
 Réponse

1 // Angular 15.x code

2 import { Component, NgModule, Injectable, Inject, forwardRef } from '@angular/core';
3
4
5 // Do not modify the service as validation tests will not pass
6 @Injectable({ providedIn: 'root' })
7 export class AccountingService{
8 private accountsWithBalance: Map<string, number> = new Map();
9
10 public async createAccount(accountID: string): Promise<void> {
11 if (this.accountsWithBalance.has(accountID)){
12 throw Error("ACCOUNT_EXISTS");
13 }
14 this.accountsWithBalance.set(accountID, 0);
15 }
16
17 public async topUp(accountID: string, amount: number): Promise<number>{
18 if (!this.accountsWithBalance.has(accountID)){
19 throw Error("ACCOUNT_DOES_NOT_EXIST");
20 }
21 this.accountsWithBalance.set(accountID, this.accountsWithBalance.get(accountID)+
amount);
22 return this.accountsWithBalance.get(accountID);
23 }
24 }
25
26 // Implement the component here
27 @Component({
28 selector:'',
29 template: `
30 `,
31 })
32 export class AccountComponent {
33 constructor(){
34 }
35
36 }
37
38 // #region Preview
39 @Component({
40 template: `<account-component></account-component>`
41 })
42 export class PreviewComponent { }
43 // #endregion Preview
44
45 // #region Module declaration - Do not Change
46 @NgModule({
47 declarations: [PreviewComponent, AccountComponent],
48 entryComponents: [PreviewComponent]
49 })
50 export class PreviewModule { }
51 // #endregion Module declaration

Voir le code playback

82 / 111
 Résultat
S'exécute
Connaissance du langage +0pts

Affiche un erreur pour les comptes inexistants

Fiabilité +30pts

Affiche un erreur pour les comptes dupliqués

Fiabilité +30pts

Prend en compte les montants négatifs

Fiabilité +55pts

Crée un compte depuis le service

Connaissance du langage +145pts

Dépose un montant depuis le service

Connaissance du langage +140pts

83 / 111
 Question 73: Directive ngIf
Angular 2+ 00:04 / 01:00 0 / 20 pts

Question
Qu'arrivera-t-il si on clique plusieurs fois sur le bouton tel que défini à la ligne 6 ?

Réponse

La propriété name est affichée

La propriété name est cachée

La propriété name est affichée une fois sur deux

La propriété name est effacée

84 / 111
 Résultat
Réponse incorrecte
Connaissance du langage +20pts

Question 74: Data-binding bidirectionnel

Angular 2+ 00:03 / 00:35 0 / 20 pts

Question
Comment définit-on un data-binding bidirectionnel au niveau d'un champ <input>  ?

Réponse

[(ngModel)]

[ngModel]

(ngModel)

{{ngModel}}

Résultat
Réponse incorrecte
Connaissance du langage +20pts

85 / 111
 Question 75: Classe de formulaire valide
Angular 2+ 00:04 / 00:40 0 / 20 pts

Question
Quelle classe est ajoutée au niveau d'un formulaire quand celui-ci passe tous les contrôles de validation ?

Réponse

.ng-valid

.ng-invalid

.ng-dirty

.ng-pristine

Résultat
Réponse incorrecte
Connaissance du langage +20pts

86 / 111
 Question 76: Angular Material
Angular 2+ 00:04 / 00:40 0 / 20 pts

Question
Quelle librairie populaire permet de faire du "Material Design" d'interfaces en Angular ?

Réponse

Angular Material

Materialize

Bootstrap

Vuetr

Résultat
Réponse incorrecte
Connaissance du langage +20pts

87 / 111
 Question 77: Nouvelle application Angular
Angular 2+ 00:05 / 00:30 0 / 20 pts

Question
Quelle ligne de commande permet de créer une nouvelle application Angular ?

Réponse

ng new appName

ng start appName

npm start appName

npm create appName

Résultat
Réponse incorrecte
Connaissance du langage +20pts

88 / 111
 Question 78: Trouver le nom
Angular 2+ 00:03 / 01:00 0 / 20 pts

Question
Quel(s) nom(s) seront affichés par ce code ?

Réponse

Theresa

Morris

Duane

Theresa, Morris, Duane

Taz

Nothing will be printed

Morris, Duane

89 / 111
 Résultat
Réponse incorrecte
Connaissance du langage +20pts

90 / 111
 Question 79: Interpolation
Angular 2+ 00:04 / 00:50 0 / 20 pts

Question
Quelle concept Angular est mis en oeuvre dans le template ci-dessous à la ligne 6 pour afficher la
propriété name  ?

Réponse

string interpolation

template string

template literal

event binding

Résultat
Réponse incorrecte
Connaissance du langage +20pts

91 / 111
 Question 80: Ajout d'entête HTTP
Angular 2+ 00:17 / 00:40 0 / 40 pts

Question
Qu'utiliseriez-vous pour ajouter le même entête HTTP à tous vos appels HTTP ?

Réponse

Un Injector

Un Interceptor

Par injection de dépendances

L'entête doit être ajouté à chaque appel manuellement

Résultat
Réponse incorrecte
Connaissance du langage +40pts

92 / 111
 Question 81: Pipe currency
Angular 2+ 00:03 / 00:50 0 / 40 pts

Question
On suppose que la locale par défaut est en-US . Qu'affichera l'expression de la ligne n°6 ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +40pts

Réponse(s) correcte(s)
$200.13

93 / 111
 Question 82: Angular app pour la prod
Angular 2+ 00:03 / 00:45 0 / 20 pts

Question
Quelle ligne de commande permet de construire une application Angular pour l'environnement de
production ?
 
Sélectionner toutes les bonnes réponses.

Réponse

ng build --configuration production

ng build production

ng build

ng build prod

Résultat
Réponse incorrecte
Connaissance du langage +20pts

94 / 111
 Question 83: @Input et événements @Output
Angular 2+ 00:05 / 20:00 0 / 150 pts

Question
On vous demande de créer un composant Angular simple nommé CounterComponent ayant
counter-component pour sélecteur.
 
L'objectif de ce composant est de :
Prendre un message en "input" Lire une valeur d'intervalle saisie par l'utilisateur (entier, en
millisecondes) Envoyer le message en tant qu'événements de manière périodique vers son "output"
Au niveau HTML, le composant est composé d'un champ <input> avec id="intervalInput" et d'un
bouton <button> avec id="intervalSetButton" . L'utilisateur peut modifier l'intervalle en
saisissant une valeur dans le champ puis en cliquant sur le bouton.
Le composant doit avoir un @Input nommé message et un @Output nommé tick . Il doit générer
des événements de type "string" vers tick à intervalle régulier correspondant à la valeur saisie par
l'utilisateur. La chaîne de caractère utilisée pour générer les événements provient de l"input" message .
Le composant doit être capable de gérer les changements du message et les changements de la valeur
de l'intervalle. Notes : Vous devez modifier le template ainsi que la classe du composant. Un bloc de
"Preview" est disponible pour vous permettre de débugguer votre code. Il affiche votre composant ci-
dessous. Vous pouvez l'ouvrir et le modifier à votre guise. Pour vous aider, ce bloc contient un
composant parent qui manipule le composant que vous devez créer (affichage d'un compteur à côté du
message) Ce bloc de "Preview" n'est pas pris en compte dans le calcul du score de votre code.

95 / 111
 Réponse

1 // Angular 15.x code

2 import { Component, NgModule } from '@angular/core';
3
4
5 @Component({
6 selector:'counter-component',
7 template: `
8 <input id="intervalInput"/>
9 <button id="intervalSetButton">Set interval</button>
10 `
11 })
12 export class CounterComponent {
13 }
14
15 // #region Preview
16 @Component({
17 selector:'display-component',
18 template: `
19 <counter-component [message]="'Hello world'" (tick)=counterTick($event)></counter-
component>
20 <div>{{message}} {{counter}}</div>
21 `
22 })
23 export class DisplayComponent {
24 public counter: number = 0;
25 public message: string;
26
27 public counterTick(message: string): void {
28 this.message = message;
29 this.counter++;
30 }
31 }
32
33 @Component({
34 template: `<display-component></display-component>`
35 })
36 export class PreviewComponent { }
37 // #endregion Preview
38
39 // #region Module declaration - Do not Change
40 @NgModule({
41 declarations: [PreviewComponent, DisplayComponent, CounterComponent],
42 entryComponents: [PreviewComponent]
43 })
44 export class PreviewModule { }
45 // #endregion Module declaration

Voir le code playback

96 / 111
 Résultat
Compile
Connaissance du langage +0pts

Prend en compte les changements d'input

Connaissance du langage +30pts

Prend en compte les changements d'intervalle

Connaissance du langage +30pts

Envoie les événements toutes les 10ms

Connaissance du langage +90pts

97 / 111
 Question 84: Utilisation des pipes (percent, currency, date)
Angular 2+ 00:05 / 20:00 0 / 300 pts

Question
On vous demande de terminer le composant  TransactionDetailsComponent . Vous devez
uniquement modifier la partie template du composant.
 
L'objectif de ce composant est d'afficher la date, le montant, la devise et les frais associés à une
transaction, chacun dans un format spécifique.
 
Vous devez afficher 3 divs :
Le div "Fee" (frais)
L'id de ce div doit être fee . Il affiche les frais fee associés à la transaction sous forme de pourcentage :
S'il y a moins de 2 chiffres pour la partie entière de la valeur en pourcentage, vous devez combler avec
des zéros à gauche. S'il y a moins de 2 chiffres dans la partie décimale, vous devez comblez avec zéros à
droite. S'il y a plus de 3 chiffres dans la partie décimale, vous devez arrondir à 3 chiffres. On utilise un
point . en tant que séparateur décimal.
Par exemple 0.031234 s'affiche 03.123% .
Le div "Amount" (montant)
L'id de ce div doit être amount . Il affiche les frais amount et la devise currency de la transaction. Le
symbole de la devise associée au code currency (par exemple € pour EUR ) est affiché avant les frais.
Les frais sont formattés comme suit :
S'il y a moins de 9 chiffres pour la partie entière, vous devez combler avec des zéros à gauche. Le
séparateur des milliers doit être une virgule , . S'il y a moins de 2 chiffres dans la partie décimale, vous
devez comblez avec zéros à droite. S'il y a plus de 2 chiffres dans la partie décimale, vous devez arrondir
à 2 chiffres.
Par exemple currency=EUR , amount=312.562 s'affiche €000,000,312.56 .
Le div "Time" (date)
L'id de ce div doit être time . La date et l'heure de la transaction doivent être affiché dans ce format
inhabituel : 'ww: yyyy MMMMM dd hh-mm-ss'
 
Notes :  Un bloc de "Preview" est disponible pour vous permettre de débugguer votre code. Il affiche
votre composant ci-dessous. Vous pouvez ouvrir ce bloc et le modifier à votre guise. Le bloc de "Preview"
n'est pas pris en compte dans le calcul du score de votre code.

98 / 111
 Réponse

1 // Angular 15.x code

2 import { Component, Input, NgModule } from '@angular/core';
3 import { CommonModule } from '@angular/common';
4
5 @Component({
6 selector:'transaction-component',
7 template: `
8 <!-- Your code goes here -->
9 `
10 })
11 export class TransactionDetailsComponent {
12
13 @Input()
14 public currency: string;
15
16 @Input()
17 public timeOfTransaction: Date;
18
19 @Input()
20 public amount: number;
21
22 @Input()
23 public fee: number;
24
25 }
26
27 // #region Preview
28 @Component({
29 template: `<transaction-component [fee]=0.02 [amount]=123.45 [currency]="'EUR'"
[timeOfTransaction]='getPresetDate()'></transaction-component>`
30 })
31 export class PreviewComponent {
32 public getPresetDate(){
33 return new Date(1997,6,1,12,32);
34 }
35 }
36 // #endregion Preview
37
38 // #region Module declaration - Do not Change
39 @NgModule({
40 imports: [CommonModule],
41 declarations: [PreviewComponent, TransactionDetailsComponent],
42 entryComponents: [PreviewComponent]
43 })
44 export class PreviewModule { }
45 // #endregion Module declaration

Voir le code playback

99 / 111
 Résultat
Compile
Connaissance du langage +0pts

Affichage pourcentage
Connaissance du langage +60pts

Affichage de date
Connaissance du langage +60pts

Affichage EUR
Connaissance du langage +60pts

Affichage JPY
Connaissance du langage +60pts

3 décimales pour le pourcentage

Connaissance du langage +60pts

100 / 111
 Question 85: Import de HttpClientModule
Angular 2+ 00:04 / 00:30 0 / 20 pts

Question
Quel module doit-on importer pour utiliser le service HttpClient  ?

Réponse

HttpClientModule

HttpModule

RequestModule

TransportModule

ClientModule

Résultat
Réponse incorrecte
Connaissance du langage +20pts

101 / 111
 Question 86: Directive structurelle
Angular 2+ 00:04 / 00:30 0 / 20 pts

Question
Parmi les propositions suivantes, laquelle n'est pas un directive structurelle d'Angular ?

Réponse

ngIf

ngFor

ngSwitch

ngUnless

Résultat
Réponse incorrecte
Connaissance du langage +20pts

102 / 111
 Question 87: Directive ngClass
Angular 2+ 00:04 / 01:30 0 / 60 pts

Question
Quelle directive built-in Angular peut-on utiliser pour remplacer ???? à la ligne 6 pour d'appliquer la
classe  blue  de manière conditionnelle ?

Réponse

Résultat
Réponse incorrecte
Connaissance du langage +60pts

103 / 111
 Réponse(s) correcte(s)
[ngClass]
[ ngClass ]

Question 88: @Input/@Output composant parent

Angular 2+ 00:04 / 15:00 0 / 150 pts

Question
On vous demande de créer un composant Angular nommé   DisplayComponent et ayant display-
component pour sélecteur.
 
Il doit utiliser le composant VoterComponent (sélecteur = voter-component ) dont le code est fourni.
 
DisplayComponent a 3 champs public nommés question , yesAnswer et noAnswer . Ils
représentent une question posée à l'utilisateur et les choix de réponse possibles affichés dans
VoterComponent .
 
DisplayComponent doit utiliser VoterComponent en tant qu'enfant et doit lui passer question ,
yesAnswer et noAnswer en entrée.
 
Quand l'utilisateur vote, VoterComponent créé un événement de type boolean vers un @Output
nommé output .
 
Vous devez afficher le résultat du vote dans DisplayComponent dans un <div> avec id=lastVote :
si output est vrai, alors on affiche la valeur de yesAnswer , sinon on affiche la valeur de noAnswer .
 
Notes :  Un bloc de "Preview" est disponible pour vous permettre de débugguer votre code. Il affiche
votre composant ci-dessous. Vous pouvez l'ouvrir et le modifier à votre guise. Ce bloc de "Preview" n'est
pas pris en compte dans le calcul du score de votre code.

104 / 111
Réponse

105 / 111
 1 // Angular 15.x code
2 import { Component, Input, NgModule, Output, EventEmitter } from '@angular/core';
3
4 @Component({
5 selector:'display-component',
6 template: `
7 `
8 })
9 export class DisplayComponent {
10 public question = "Too easy?"
11 public yesAnswer = "Yes";
12 public noAnswer = "No";
13 }
14
15 // VoterComponent: do not change
16 @Component({
17 selector:'voter-component',
18 template: `
19 {{question}}
20 <button (click)="vote(true)">{{yesAnswer}}</button>
21 <button (click)="vote(false)">{{noAnswer}}</button>
22 `
23 })
24 export class VoterComponent {
25 @Input()
26 public question: string;
27
28 @Input()
29 public yesAnswer: string;
30
31 @Input()
32 public noAnswer: string;
33
34 @Output()
35 public output = new EventEmitter<boolean>();
36
37 public vote(vote: boolean): void{
38 this.output.emit(vote);
39 }
40 }
41
42
43
44 // #region Preview
45
46 @Component({
47 template: `<display-component></display-component>`
48 })
49 export class PreviewComponent { }
50 // #endregion Preview
51
52 // #region Module declaration - Do not Change
53 @NgModule({
54 declarations: [PreviewComponent, DisplayComponent, VoterComponent],
55 entryComponents: [PreviewComponent]
56 })
57 export class PreviewModule { }
58 // #endregion Module declaration

Voir le code playback

106 / 111
 Résultat
Compile
Connaissance du langage +0pts

Gère l'événement
Connaissance du langage +75pts

Les entrées sont bien propagées

Connaissance du langage +75pts

Question 89: Connaissance des pipes personalisés

Angular 2+ 00:05 / 20:00 0 / 450 pts

Question
On considère la variable person ayant l'interface suivante :

{firstName: string, lastName: string}

 
Elle est initialisée par :

this.person = {firstName: 'First', lastName: 'Last'}

 
On vous demande de trouver comment obtenir les couples templates / résultats suivants pour toute
variable person implémentant l'interface ci-dessus.
 
Comportement :
Si le paramètre du pipe name est true , les propriétés firstName et lastName seront retournées
dans un ordre inversé (ex : Last First ). Si le paramètre est false , ou non fourni, l'ordre reste le
même. Si le paramètre du pipe sort est 'same' , les propriétés firstName et lastName seront
retournées sans modification (ex : First Last) . Si le paramètre est 'backwards' ou n'est pas
fourni, les lettres de la chaîne seront retournées dans l'ordre inverse (ex : tsaL tsriF ). 
 
Exemples :
 

107 / 111
Template Résultat affiché

{{ person | name | sort }}

tsaL tsriF

{{ person | name : true | sort }}

tsriF tsaL

{{ person | name : false | sort }}

tsaL tsriF

{{ person | name | sort : 'same' }}

First Last

{{ person | name | sort : 'backwards' }}

tsaL tsriF

{{ person | name : true | sort : 'same' }}

Last First

 
Notes:
Modifier les classes Name et Sort pour implémenter le comportement requis. Le nom de ces classes
ne doit pas être modifé. Un bloc de "Preview" est disponible pour vous permettre de débugguer votre
code. Il affiche votre composant ci-dessous. Vous pouvez l'ouvrir et le modifier à votre guise. Ce bloc de
"Preview" n'est pas pris en compte dans le calcul du score de votre code.  

108 / 111
 Réponse

1 // Angular 15.x code

2 import { Component, NgModule } from '@angular/core';
3
4 // Fix classes Name and Sort
5
6 export class Name {
7 }
8
9 export class Sort {
10 }
11
12 // #region Preview
13 @Component({
14 template: `{{ person | name | sort }}`
15 })
16 export class PreviewComponent {
17 public person = {firstName: 'First', lastName:'Last'};
18 }
19 // #endregion Preview
20
21 // #region Module declaration - Do not Change
22 @NgModule({
23 declarations: [PreviewComponent, Name, Sort],
24 entryComponents: [PreviewComponent]
25 })
26 export class PreviewModule { }
27 // #endregion Module declaration

Voir le code playback

109 / 111
 Résultat
S'exécute
Connaissance du langage +0pts

Affiche les modifications par défaut

Connaissance du langage +75pts

Affiche correctement pour name= false

Connaissance du langage +75pts

Affiche correctement pour name= true

Connaissance du langage +75pts

Affiche correctement pour name= true, sort = same

Connaissance du langage +75pts

Affiche correctement pour sort = backwards

Connaissance du langage +75pts

Affiche correctement pour sort = same

Connaissance du langage +75pts

110 / 111
 Glossaire

Connaissance du langage

La mesure de cette compétence permet de déterminer l'expérience du candidat dans la pratique d'un langage de
programmation. Privilégiez cette compétence si, par exemple, vous recherchez un développeur qui devra être
rapidement opérationnel.

Modélisation

Cette mesure fournit une indication sur la capacité du candidat à appliquer des solutions standard pour résoudre des
problèmes récurrents. Un développeur ayant un bon niveau dans cette compétence augmentera la qualité
(maintenabilité, évolutivité) de vos applications. Cette compétence ne dépend pas spécifiquement d'une technologie.
Privilégiez cette compétence si, par exemple, vous recherchez un développeur qui sera amené à travailler sur les
briques qui structurent vos applications, à anticiper les besoins de demain pour développer des solutions pérennes.

Résolution de problèmes

Cette compétence correspond aux aptitudes du candidat à comprendre et à structurer son raisonnement pour trouver
des solutions à des problèmes complexes. Cette compétence ne dépend pas spécifiquement d'une technologie.
Privilégiez cette compétence si, par exemple, vos applications ont une composante technique importante (R&D,
innovation).

Fiabilité

La fiabilité caractérise la capacité du candidat à réaliser des solutions qui prennent en compte les cas particuliers. Plus
cette compétence est élevée, plus vos applications sont robustes (moins de bugs).

111 / 111