wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

Devoir d'Angular M2

Total questions: 65

Worksheet time: 3hrs 15mins

Name
Class
Date
1.

Quelle est l’architecture principale utilisée par Angular ?

a)

A. MVC

b)

B. MVVM

c)

C. Architecture basée sur les composants

d)

D. Architecture monolithique

2.

Quel langage est utilisé par Angular pour le développement principal ?

a)

Java

b)

JavaScript

c)

TypeScript

d)

Python

3.

Quel fichier est le point d’entrée principal d’une application Angular ?

a)

index.html

b)

main.ts

c)

app.component.ts

d)

angular.json

4.

À quoi sert un composant Angular ?

a)

À gérer la base de données

b)

À afficher et gérer une partie de l’interface utilisateur

c)

À compiler le code

d)

À configurer le serveur

5.

Quel décorateur permet de définir un composant ?

a)

@NgModule

b)

@Injectable

c)

@Component

d)

@Directive

6.

Quel fichier contient la vue HTML d'un composant ?

a)

.ts

b)

.css

c)

.html

d)

.json

7.

Quelle directive permet de faire une boucle dans un template ?

a)

ngIf

b)

ngSwitch

c)

ngFor

d)

ngModel

8.

Quelle directive permet d’afficher ou masquer un élément selon une condition ?

a)

ngFor

b)

ngIf

c)

ngSwitchCase

d)

ngModel

9.

Quel symbole est utilisé pour l’interpolation ?

a)

[[]]

b)

{{ }}

c)

()

d)

[]

10.

Le data binding à sens unique (One-way binding) permet :

a)

Une synchronisation bidirectionnelle

b)

Une communication du composant vers la vue uniquement

c)

Une communication de la vue vers le composant uniquement

d)

Une communication serveur-client

11.

Quelle syntaxe correspond au property binding ?

a)

(click)="action()"

b)

{{ value }}

c)

[property]="value"

d)

[ngModel]="value"

12.

Quelle syntaxe correspond à l’event binding ?

a)

[value]="x"

b)

(event)="method()"

c)

{{ x }}

d)

[(ngModel)]="x"

13.

Quelle directive permet le two-way binding ?

a)

ngIf

b)

ngFor

c)

ngModel

d)

ngClass

14.

Quelle est la syntaxe du two-way binding ?

a)

{{ value }}

b)

[value]="x"

c)

(value)="x"

d)

[(ngModel)]="x"

15.

À quoi sert un service Angular ?

a)

À créer des composants

b)

À partager la logique métier et les données

c)

À gérer le HTML

d)

À compiler l'application

16.

Quel décorateur permet de définir un service injectable ?

a)

@Component

b)

@Directive

c)

@Injectable

d)

@NgModule

17.

Qu’est-ce que l’injection de dépendances ?

a)

Une boucle automatique

b)

Un mécanisme pour fournir des services aux composants

c)

Une directive structurelle

d)

Une fonctionnalité Firebase

18.

Où peut-on fournir un service globalement ?

a)

Dans le composant

b)

Dans le template HTML

c)

Dans @Injectable({ providedIn: 'root' })

d)

Dans index.html

19.

Angular utilise quel type de compilation ?

a)

Interprétée

b)

Compilation côté serveur

c)

AOT et JIT

d)

Compilation Python

20.

Firebase est principalement utilisé pour :

a)

Le design UI

b)

Le versioning Git

c)

Backend-as-a-Service

d)

Compiler Angular

21.

Quel module Angular est nécessaire pour utiliser ngModel ?

a)

HttpClientModule

b)

BrowserModule

c)

FormsModule

d)

ReactiveFormsModule

22.

Quel type de base de données propose Firebase ?

a)

SQL

b)

NoSQL

c)

XML

d)

CSV

23.

Quel outil permet de créer un projet Angular ?

a)

npm start

b)

angular-cli

c)

ng new

d)

node init

24.

Quel fichier contient la configuration globale du projet Angular ?

a)

package.json

b)

angular.json

c)

tsconfig.json

d)

main.ts

25.

Quel est le rôle de tsconfig.json ?

a)

Gérer le HTML

b)

Configurer TypeScript

c)

Gérer les services

d)

Lancer Firebase

26.

Quel type de directive modifie la structure du DOM ?

a)

Directive d'attribut

b)

Directive structurelle

c)

Service

d)

Pipe

27.

Quelle directive est une directive d'attribut ?

a)

ngIf

b)

ngFor

c)

ngClass

d)

*ngSwitch

28.

Quelle commande lance le serveur Angular ?

a)

npm run build

b)

ng serve

c)

ng build serve

d)

npm start angular

29.

Quel hook est appelé lors de l'initialisation d’un composant ?

a)

ngOnDestroy

b)

ngAfterViewInit

c)

ngOnInit

d)

ngOnChanges

30.

Angular est principalement utilisé pour :

a)

Le backend

b)

Les applications mobiles natives

c)

Les applications web SPA

d)

Les scripts système

31.

Quel est le problème dans ce code ?

<p *ngFor="let item of items">{{item}}</p>

a)

items doit être une string

b)

ngFor est mal orthographié

c)

items doit être un tableau

d)

Interpolation incorrecte

32.

Erreur dans ce composant :

@Component({ selector: 'app-test' })

export class TestComponent {}

a)

Il manque templateUrl ou template

b)

selector est incorrect

c)

export est interdit

d)

Classe mal nommée

33.

Quel est le problème ?

<input [(ngModel)]="name">

a)

ngModel interdit

b)

FormsModule non importé

c)

name doit être une fonction

d)

Syntaxe incorrecte

34.

Quelle est l'erreur ?

<button (click)="save">Save</button>

a)

click incorrect

b)

save doit être une propriété

c)

save doit être appelée avec ()

d)

button interdit

35.

Erreur dans ce code :

{{ user.name }}

a)

Mauvaise interpolation

b)

user doit être public dans le composant

c)

name interdit

d)

HTML invalide

36.

Quelle ligne manque ?

 constructor(private service: DataService) {}

a)

import DataService

b)

export service

c)

new DataService()

d)

extends DataService

37.

Interpretez la syntaxe ci-dessous.

<li *ngFor="item in items">{{item}}</li>

a)

ngFor mal écrit

b)

Mauvaise syntaxe

c)

items interdit

d)

li incorrect

38.

Quel est le problème ?

this.count = '10';

a)

count doit être private

b)

Type incorrect si count est number

c)

Syntaxe invalide

d)

Affectation interdite

39.

Quelle est la meilleure écriture Angular ?

a)

<img src="imageUrl">

b)

<img [src]="imageUrl">

c)

<img src="{{imageUrl}}">

d)

<img (src)="imageUrl">

40.

Quelle est l'erreur ?

ngOnInit() {

    console.log('init')

  }

a)

ngOnInit interdit

b)

Il faut implémenter OnInit

c)

console.log interdit

d)

Mauvaise syntaxe

41.

Interpretez la syntaxe ci-dessous.

initializeApp = firebaseConfig;

a)

Mauvaise affectation

b)

Mauvais appel de fonction initializeApp(firebaseConfig)

c)

firebaseConfig interdit

d)

Syntaxe valide

42.

Problème dans le template :

<p *ngIf="age">Age</p>

a)

ngIf interdit

b)

age doit être booléen

c)

p interdit

d)

Mauvaise interpolation

43.

Interpretez la syntaxe ci-dessous.

@Input name: string;

a)

Erreur de syntaxe

b)

Il manque les parenthèses @Input()

c)

name interdit

d)

string interdit

44.

Interpretez la syntaxe ci-dessous.

<button (click)="increment">+</button>

a)

increment doit être appelée avec ()

b)

click incorrect

c)

button interdit

d)

HTML invalide

45.

Problème TypeScript :

let user;

a)

user interdit

b)

Type any implicite (mauvaise pratique)

c)

Syntaxe invalide

d)

let interdit

46.

Interpretez la syntaxe ci-dessous.

@Injectable()

export class ApiService {}

a)

A. Injectable interdit

b)

B. providedIn manquant (recommandé)

c)

C. export interdit

d)

D. Classe incorrecte

47.

Problème dans ce code :

this.users.push(user)

a)

push interdit

b)

users doit être un tableau

c)

Syntaxe invalide

d)

user interdit

48.

Erreur Angular :

<div *ngIf="isLoggedIn = true">OK</div>

a)

A. Affectation au lieu de comparaison

b)

B. ngIf interdit

c)

C. true interdit

d)

D. HTML invalide

49.

Problème avec ce binding :

<input [ngModel]="name">

a)

Mauvais binding, il faut [(ngModel)]

b)

name interdit

c)

Syntaxe valide

d)

FormsModule inutile

50.

Erreur dans ce composant :

selector: 'app Test'

a)

Espace interdit dans le selector

b)

selector interdit

c)

Mauvais type

d)

Syntaxe valide

51.

Erreur Firebase :

auth.signIn(email, password)

a)

Méthode inexistante (utiliser signInWithEmailAndPassword)

b)

auth interdit

c)

email interdit

d)

Syntaxe valide

52.

Code incorrect car :

<p *ngFor="let i = 0; i < items.length; i++">{{i}}</p>

a)

ngFor n'accepte pas cette syntaxe

b)

items interdit

c)

i interdit

d)

HTML invalide

53.

Problème dans ce code :

this.title = undefined;

a)

undefined interdit

b)

Mauvaise pratique si title est string non optionnel

c)

Syntaxe invalide

d)

Affectation interdite

54.

Erreur Angular :

<p [value]="name">Test</p>

a)

value n'est pas une propriété valide pour

b)

Syntaxe invalide

c)

name interdit

d)

HTML valide

55.

Problème d'injection :

constructor(service: DataService) {}

a)

Manque private/public pour l'injection automatique

b)

Syntaxe invalide

c)

DataService interdit

d)

constructor interdit

56.

Code Angular incorrect car :

@Component({})

export class AppComponent {}

a)

Syntaxe incomplete (au moins selector + template requis)

b)

export interdit

c)

Component interdit

d)

Classe incorrecte

57.

Si numbers = [1,2,3,4], que s’affiche ?

<li *ngFor="let n of numbers">

  <span *ngIf="n % 2 === 0">{{ n }}</span>

</li>

a)

1 2 3 4

b)

2 4

c)

1 3

d)

Rien

58.

Si count = 0, après 3 clics, que s’affiche ?

<button (click)="count = count + 1">+</button>

<p>{{ count }}</p>

a)

0

b)

1

c)

2

d)

3

59.

Si isLoggedIn = false, que s’affiche ?

<p *ngIf="isLoggedIn; else guest">

  Bienvenue utilisateur

</p>

<ng-template #guest>

  <p>Veuillez vous connecter</p>

</ng-template>

a)

Rien

b)

Bienvenue utilisateur

c)

Veuillez vous connecter

d)

Erreur de compilation

60.

Pourquoi ce code peut échouer ?

<li *ngFor="let user of users; index as i">

  {{ i }} - {{ user.name }}

</li>

a)

index as i est invalide

b)

user.name doit être entre crochets

c)

users doit être un Observable

d)

*ngFor ne supporte pas let

61.

Si users vaut undefined au chargement :

<li *ngFor="let u of users">

  {{ u.name }}

</li>

a)

Angular ignore la boucle

b)

Erreur runtime

c)

Rien ne s’affiche sans erreur

d)

null est affiché

62.

Pourquoi ce code est invalide ?

<div *ngIf="show" *ngFor="let item of items">

  {{ item }}

</div>

a)

*ngIf doit être après *ngFor

b)

Deux directives structurelles sur le même élément

c)

*ngFor ne fonctionne pas sur <div>

d)

show doit être un Observable

63.

Quel type de directive est appHighlight ?

<p appHighlight>Texte</p>

a)

Structurelle

b)

Composant

c)

Attribut

d)

Pipe

64.

Que signifie *appIf ?

<p *appIf="condition">Message</p>

a)

Une directive attribut

b)

Un composant

c)

Une directive structurelle

d)

syntaxe invalide

65.

Si show passe de false à true, que se passe-t-il ?

<app-child *ngIf="show"></app-child>

a)

Le composant est simplement affiché

b)

Le composant est créé à nouveau

c)

Rien ne se passe

d)

Une erreur est levée