C++ Basics > Angular > Flashcards

Angular Flashcards

(45 cards)

Study These Flashcards
1
Q

Utilisation Angular jusqu’à Angular 14

A

Interface utilisateur
Consommer API REST
Naviguer entre les pages (routing)
Faire des formulaires intelligents
Structurer code de manière modulaire

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

@Input

A

Decorateur
@Input() cat!: CatInterface;
Indique une propriété que le composant va recevoir depuis un parent
Le parent va passer un objet cat de type CatInterface à ce composant Cat

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

@Component

A

Encapsule la logique, le template HTML et le style CSS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Service

A

Classe réutilisable qui contient de la logique métier (exemple communication API, appel HTTP)
Il est injectés là ou on en a besoin (composants, autre service)
Le service pour être injecté il doit avoir @Injectable({ providedIn: ‘root’ })
Sont injectés dans le composant via le constructeur pour angular 15
et via inject() dans angular 20
private catService = inject(CatService);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

API

A

Ensemble de règles ou contrat qui permet a un logiciel d’interagir avec un autre

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

@Injectable({
providedIn: ‘root’
})

A

Dit que le service peut être injecté dans tous les autres composants de l’application

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

NgModule (jusqu’à angular 14)

A

Organiser les composants, les pipes, les services et les directives.

Le point d’entrée de l’app est AppModule

Permet d’organiser ton code par fonctionnalité

peut-être remplacé par bootstrapApplication(AppComponent, {
providers: [/* … */]
});
si utilisation de standalone component

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Observable

A

getCats(): Observable<CatInterface[]> {
return this.http.get<CatInterface[]>(this.apiUrl);
}

Type de donnée qui permet de gérer les données asynchrones
Les évènements utilisateurs

Un flux de donnee auquel on peut subscrire pour recevoir des valeurs des erreurs ou un flux de donnee
Récupération de données depuis l’api

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Injection de dépendance

A

C’est un design pattern
Fournir automatiquement a une classe les objets dont elle a besoin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Avantages d’angular

A

Framework tout-en-un
Inclus nativement :
- Routing (@angular/router)
- HTTP Client
- Formulaire reactifs
Moins flexible mais donc plus uniforme + robuste

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Quelles sont les choses à mettre en place des le début d’un projet angular ?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Formulaire réactifs
(ReactForms)

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Internationalisation

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

CLI de scaffolding (Angular CLI)

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

2 types de formulaires puissants

A
  • Template-driven
  • Reactive Forms
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

DI (injection de dépendance) intégrée

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Le test est déjà opérationnel

A

Karma, Jasmine, TestBed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

RxJS

A

Bibliothèque JavaScript pour gérer des flux de données asynchrones
(à travailler)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Détection de changement

Study These Flashcards
A

Mettre à jour le DOM automatiquement quand les données changent dans l’application

20
Q

2 modes de détection de changement dans Angular

Study These Flashcards
A

Default
ou
OnPush

21
Q

Default
(Détection de changement)

Study These Flashcards
A

Chaque fois qu’on interagi avec un composant (event), Angular va parcourir l’ensemble de l’arbre des composants et pour chacun d’entre eux il va vérifier s’il y a une modification

22
Q

OnPush
(Détection de changement)

Study These Flashcards
A

Limiter le nombre de modification fait par Angular

23
Q

Signal

Study These Flashcards
A

Remplace OnPush & Default
Type qui va permettre de stocker une valeur
Notifié à chaque fois que la valeur va être modifié
Plus besoin de parcourir l’arbre des composants

24
Q

Les pipes

Study These Flashcards
A

Les pipes transforment l’affichage d’une valeur sans la modifier dans le code TypeScript.

Exemple :
<!-- Affiche "ALICE" -->
{{ ‘alice’ | uppercase }}

<!-- Affiche "12/07/2025" (selon la locale) -->

{{ myDate | date }}

<!-- Affiche "1 234,56 €" -->

{{ 1234.56 | currency:’EUR’ }}

<!-- Affiche "25.3%" -->

{{ 0.253 | percent }}

25
Qu'est-ce que le databinding? Et quelles sont les 4 types de databinding
Permet de synchroniser le code et l'interface utilisateur (DOM) 1. Interpolation 2. Property binding 3. Event Binding 4. Two-way binding
26
Interpolation
Affichage d'une variable/donnée Exemple : // component.ts title = 'Bienvenue';

{{ title }}

affiche : Bienvenue
27
Property binding
28
Event binding
On lie une méthode du composant à un élément du template (html) exemple : html .ts onClick() { console.log('Bouton cliqué'); }
29
Two-way binding (ngModel)

Bonjour {{ username }}

username est mis à jour à chaque saisie et l'affiche aussi
30
FromsModule
Module d'angular qui permet d'utiliser le two-way data binding ([(ngModel)]) et les formulaires template-driven dans ton application.
31
Routing
Permet la navigation entre les différentes pages sans recharger On définit les routes dans app.routes.ts
32
Lazyloading
C'est une technique pour améliorer les performances de ton applications, en changeant certains morceaux de code uniquement quand on en a besoin Ex: Le module AdminModule est chargé uniquement quand l’utilisateur va sur /admin.
33
DOM
Modèle Objet du Document Une représentation en mémoire de ta page HTML
34
TrackBy
Fonction d'optimisation pour *ngFor
35
ngFor*
Répéter un élément HTML pour chaque élément d'une liste
  • {{ chat.name }}
Nouvelle syntaxe : @for (chat of chats; track chat.id) {
  • {{ chat.name }}
    • }
    36
    Les hooks principaux de Angular
    ngOnChanges() ngOnInit() ngDoCheck() ngAfterContentInit() nghAfterContentCheck() ngAfterViewInit() ngAfterViewChecked() ngOnDestroy()
    37
    38
    Api Rest
    Api web qui suit les principes du REST qui permet a un client de communiquer a un serveur via HTTP
    39
    Méthodes HTTP standard
    GET → Lire des données POST → Créer des données PUT → Modifier des données DELETE → Supprimer des données
    40
    Design pattern
    Sigleton = classe une seule instance (service) Observer = notifie immediatement les objets dependant lorsque quun objet change detat (observer\rxJs) Factory = defini une interface pour creer un objet (injection dependnace)
    41
    Classe abstraite
    Contient des methodes implementée Peut contenir des attributs Pas dheritage multiple
    42
    Interface
    Definit ce qu'une classe heriter doit faire mais pas comment le faire Pas d'attribut Pas d implementarion de fonction
    43
    Type de test
    Test d'intégration Test end to end Test unitaire
    44
    Test end to end
    Tests qui permettent de tester toute l'application, dans un navigateur comme un utilisateur final
    45
    Test d'intégration
    Faire des tests sur les bouts de code qui intéragissent entre eux
    C++ Basics
    flashcards
    Decks in class (4)
    # Cards
    Brainscape helps you reach your goals faster, through stronger study habits.
    © 2026 Bold Learning Solutions. Terms and Conditions