NEW
Font size
WorksheetsDevoir d'Angular M2
Total questions: 65
Worksheet time: 3hrs 15mins
Quelle est l’architecture principale utilisée par Angular ?
A. MVC
B. MVVM
C. Architecture basée sur les composants
D. Architecture monolithique
Quel langage est utilisé par Angular pour le développement principal ?
Java
JavaScript
TypeScript
Python
Quel fichier est le point d’entrée principal d’une application Angular ?
index.html
main.ts
app.component.ts
angular.json
À quoi sert un composant Angular ?
À gérer la base de données
À afficher et gérer une partie de l’interface utilisateur
À compiler le code
À configurer le serveur
Quel décorateur permet de définir un composant ?
@NgModule
@Injectable
@Component
@Directive
Quel fichier contient la vue HTML d'un composant ?
.ts
.css
.html
.json
Quelle directive permet de faire une boucle dans un template ?
ngIf
ngSwitch
ngFor
ngModel
Quelle directive permet d’afficher ou masquer un élément selon une condition ?
ngFor
ngIf
ngSwitchCase
ngModel
Quel symbole est utilisé pour l’interpolation ?
[[]]
{{ }}
()
[]
Le data binding à sens unique (One-way binding) permet :
Une synchronisation bidirectionnelle
Une communication du composant vers la vue uniquement
Une communication de la vue vers le composant uniquement
Une communication serveur-client
Quelle syntaxe correspond au property binding ?
(click)="action()"
{{ value }}
[property]="value"
[ngModel]="value"
Quelle syntaxe correspond à l’event binding ?
[value]="x"
(event)="method()"
{{ x }}
[(ngModel)]="x"
Quelle directive permet le two-way binding ?
ngIf
ngFor
ngModel
ngClass
Quelle est la syntaxe du two-way binding ?
{{ value }}
[value]="x"
(value)="x"
[(ngModel)]="x"
À quoi sert un service Angular ?
À créer des composants
À partager la logique métier et les données
À gérer le HTML
À compiler l'application
Quel décorateur permet de définir un service injectable ?
@Component
@Directive
@Injectable
@NgModule
Qu’est-ce que l’injection de dépendances ?
Une boucle automatique
Un mécanisme pour fournir des services aux composants
Une directive structurelle
Une fonctionnalité Firebase
Où peut-on fournir un service globalement ?
Dans le composant
Dans le template HTML
Dans @Injectable({ providedIn: 'root' })
Dans index.html
Angular utilise quel type de compilation ?
Interprétée
Compilation côté serveur
AOT et JIT
Compilation Python
Firebase est principalement utilisé pour :
Le design UI
Le versioning Git
Backend-as-a-Service
Compiler Angular
Quel module Angular est nécessaire pour utiliser ngModel ?
HttpClientModule
BrowserModule
FormsModule
ReactiveFormsModule
Quel type de base de données propose Firebase ?
SQL
NoSQL
XML
CSV
Quel outil permet de créer un projet Angular ?
npm start
angular-cli
ng new
node init
Quel fichier contient la configuration globale du projet Angular ?
package.json
angular.json
tsconfig.json
main.ts
Quel est le rôle de tsconfig.json ?
Gérer le HTML
Configurer TypeScript
Gérer les services
Lancer Firebase
Quel type de directive modifie la structure du DOM ?
Directive d'attribut
Directive structurelle
Service
Pipe
Quelle directive est une directive d'attribut ?
ngIf
ngFor
ngClass
*ngSwitch
Quelle commande lance le serveur Angular ?
npm run build
ng serve
ng build serve
npm start angular
Quel hook est appelé lors de l'initialisation d’un composant ?
ngOnDestroy
ngAfterViewInit
ngOnInit
ngOnChanges
Angular est principalement utilisé pour :
Le backend
Les applications mobiles natives
Les applications web SPA
Les scripts système
Quel est le problème dans ce code ?
<p *ngFor="let item of items">{{item}}</p>
items doit être une string
ngFor est mal orthographié
items doit être un tableau
Interpolation incorrecte
Erreur dans ce composant :
@Component({ selector: 'app-test' })
export class TestComponent {}
Il manque templateUrl ou template
selector est incorrect
export est interdit
Classe mal nommée
Quel est le problème ?
<input [(ngModel)]="name">
ngModel interdit
FormsModule non importé
name doit être une fonction
Syntaxe incorrecte
Quelle est l'erreur ?
<button (click)="save">Save</button>
click incorrect
save doit être une propriété
save doit être appelée avec ()
button interdit
Erreur dans ce code :
{{ user.name }}
Mauvaise interpolation
user doit être public dans le composant
name interdit
HTML invalide
Quelle ligne manque ?
constructor(private service: DataService) {}
import DataService
export service
new DataService()
extends DataService
Interpretez la syntaxe ci-dessous.
<li *ngFor="item in items">{{item}}</li>
ngFor mal écrit
Mauvaise syntaxe
items interdit
li incorrect
Quel est le problème ?
this.count = '10';
count doit être private
Type incorrect si count est number
Syntaxe invalide
Affectation interdite
Quelle est la meilleure écriture Angular ?
<img src="imageUrl">
<img [src]="imageUrl">
<img src="{{imageUrl}}">
<img (src)="imageUrl">
Quelle est l'erreur ?
ngOnInit() {
console.log('init')
}
ngOnInit interdit
Il faut implémenter OnInit
console.log interdit
Mauvaise syntaxe
Interpretez la syntaxe ci-dessous.
initializeApp = firebaseConfig;
Mauvaise affectation
Mauvais appel de fonction initializeApp(firebaseConfig)
firebaseConfig interdit
Syntaxe valide
Problème dans le template :
<p *ngIf="age">Age</p>
ngIf interdit
age doit être booléen
p interdit
Mauvaise interpolation
Interpretez la syntaxe ci-dessous.
@Input name: string;
Erreur de syntaxe
Il manque les parenthèses @Input()
name interdit
string interdit
Interpretez la syntaxe ci-dessous.
<button (click)="increment">+</button>
increment doit être appelée avec ()
click incorrect
button interdit
HTML invalide
Problème TypeScript :
let user;
user interdit
Type any implicite (mauvaise pratique)
Syntaxe invalide
let interdit
Interpretez la syntaxe ci-dessous.
@Injectable()
export class ApiService {}
A. Injectable interdit
B. providedIn manquant (recommandé)
C. export interdit
D. Classe incorrecte
Problème dans ce code :
this.users.push(user)
push interdit
users doit être un tableau
Syntaxe invalide
user interdit
Erreur Angular :
<div *ngIf="isLoggedIn = true">OK</div>
A. Affectation au lieu de comparaison
B. ngIf interdit
C. true interdit
D. HTML invalide
Problème avec ce binding :
<input [ngModel]="name">
Mauvais binding, il faut [(ngModel)]
name interdit
Syntaxe valide
FormsModule inutile
Erreur dans ce composant :
selector: 'app Test'
Espace interdit dans le selector
selector interdit
Mauvais type
Syntaxe valide
Erreur Firebase :
auth.signIn(email, password)
Méthode inexistante (utiliser signInWithEmailAndPassword)
auth interdit
email interdit
Syntaxe valide
Code incorrect car :
<p *ngFor="let i = 0; i < items.length; i++">{{i}}</p>
ngFor n'accepte pas cette syntaxe
items interdit
i interdit
HTML invalide
Problème dans ce code :
this.title = undefined;
undefined interdit
Mauvaise pratique si title est string non optionnel
Syntaxe invalide
Affectation interdite
Erreur Angular :
<p [value]="name">Test</p>
value n'est pas une propriété valide pour
Syntaxe invalide
name interdit
HTML valide
Problème d'injection :
constructor(service: DataService) {}
Manque private/public pour l'injection automatique
Syntaxe invalide
DataService interdit
constructor interdit
Code Angular incorrect car :
@Component({})
export class AppComponent {}
Syntaxe incomplete (au moins selector + template requis)
export interdit
Component interdit
Classe incorrecte
Si numbers = [1,2,3,4], que s’affiche ?
<li *ngFor="let n of numbers">
<span *ngIf="n % 2 === 0">{{ n }}</span>
</li>
1 2 3 4
2 4
1 3
Rien
Si count = 0, après 3 clics, que s’affiche ?
<button (click)="count = count + 1">+</button>
<p>{{ count }}</p>
0
1
2
3
Si isLoggedIn = false, que s’affiche ?
<p *ngIf="isLoggedIn; else guest">
Bienvenue utilisateur
</p>
<ng-template #guest>
<p>Veuillez vous connecter</p>
</ng-template>
Rien
Bienvenue utilisateur
Veuillez vous connecter
Erreur de compilation
Pourquoi ce code peut échouer ?
<li *ngFor="let user of users; index as i">
{{ i }} - {{ user.name }}
</li>
index as i est invalide
user.name doit être entre crochets
users doit être un Observable
*ngFor ne supporte pas let
Si users vaut undefined au chargement :
<li *ngFor="let u of users">
{{ u.name }}
</li>
Angular ignore la boucle
Erreur runtime
Rien ne s’affiche sans erreur
null est affiché
Pourquoi ce code est invalide ?
<div *ngIf="show" *ngFor="let item of items">
{{ item }}
</div>
*ngIf doit être après *ngFor
Deux directives structurelles sur le même élément
*ngFor ne fonctionne pas sur <div>
show doit être un Observable
Quel type de directive est appHighlight ?
<p appHighlight>Texte</p>
Structurelle
Composant
Attribut
Pipe
Que signifie *appIf ?
<p *appIf="condition">Message</p>
Une directive attribut
Un composant
Une directive structurelle
syntaxe invalide
Si show passe de false à true, que se passe-t-il ?
<app-child *ngIf="show"></app-child>
Le composant est simplement affiché
Le composant est créé à nouveau
Rien ne se passe
Une erreur est levée
