Directives et Pipes dans Angular
48 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Quel est l'objectif principal des directives structurelles dans Angular ?

  • Modifier le DOM (correct)
  • Contrôler les événements utilisateurs
  • Récupérer des données d'une API
  • Modifier le style d'un élément

Quels paramètres le *ngIf prend-il en entrée ?

  • Une liste d'éléments
  • Un booléen (correct)
  • Un entier
  • Une chaîne de caractères

Quel est le préfixe souvent utilisé pour les directives structurelles ?

  • #
  • @
  • * (correct)
  • %

Quelle directive serait appropriée pour afficher une liste d'éléments dans Angular ?

<p>*ngFor (A)</p> Signup and view all the answers

Quelle propriété fournit l'index de l'élément courant lors de l'utilisation de *ngFor ?

<p>index (C)</p> Signup and view all the answers

Comment peut-on rendre une directive paramétrable dans Angular ?

<p>En utilisant le décorateur @Input() (D)</p> Signup and view all the answers

Quelle directive structurelle est utilisée pour afficher un élément conditionnellement ?

<p>*ngIf (D)</p> Signup and view all the answers

Quel est le rôle de la valeur 'first' dans une boucle *ngFor ?

<p>Vrai si c'est le premier élément (D)</p> Signup and view all the answers

Quel est le but principal d'un pipe dans Angular ?

<p>Transformer des valeurs dans les templates. (A)</p> Signup and view all the answers

Quelle est la caractéristique d'un pipe pur ?

<p>Il renvoie la même valeur pour les mêmes paramètres. (D)</p> Signup and view all the answers

Comment créer un pipe dans Angular en utilisant le CLI ?

<p>ng g p nomPipe (D)</p> Signup and view all the answers

Que décrit la fonction f(x) = 2f(x-1) + 3f(x-2) avec n > 1 ?

<p>Une fonction de récursivité. (C)</p> Signup and view all the answers

Quel est le but de la bibliothèque memo-decorator mentionnée ?

<p>Mémoriser les résultats des fonctions pures. (C)</p> Signup and view all the answers

Quel est l'effet d'une fonction pure lors de son utilisation dans un pipe ?

<p>Elle ne produit pas d'effets secondaires. (C)</p> Signup and view all the answers

Quelle valeur sera affichée par le TeamPipe pour 'barca' ?

<p>blaugrana (C)</p> Signup and view all the answers

Quel est le type d'entrée pour la méthode transform() d'un pipe ?

<p>N'importe quel type de valeur. (A)</p> Signup and view all the answers

Quel est l'objectif principal des directives dans Angular?

<p>Attacher un comportement aux éléments du DOM (D)</p> Signup and view all the answers

Comment se crée une directive dans Angular?

<p>ng g directive nomDirective (B)</p> Signup and view all the answers

Quels types de directives Angular la documentation officielle identifie-t-elle?

<p>Directives structurelles, directives d'attributs et composants (A)</p> Signup and view all the answers

Quelle fonctionnalité les directives structurelles offrent-elles?

<p>Ajouter et supprimer des éléments dans le DOM (B)</p> Signup and view all the answers

Quel est l'usage de l'annotation @Directive dans Angular?

<p>Identifier une classe comme directive (C)</p> Signup and view all the answers

Quel est le rôle d'une directive d'attribut dans Angular?

<p>Attach to an element's behavior (A)</p> Signup and view all the answers

Qu'est-ce qu'un composant dans Angular?

<p>Une directive avec son propre template (B)</p> Signup and view all the answers

Quel élément est une caractéristique d'un CV dans l'exercice?

<p>Cin (C)</p> Signup and view all the answers

Quel est le rôle de l'event loop dans la gestion du code asynchrone ?

<p>Il exécute des traitements sans bloquer le moteur JS. (A)</p> Signup and view all the answers

Qu'est-ce qui a permis l'exécution de JavaScript en dehors du navigateur ?

<p>Le développement de Node.js. (A)</p> Signup and view all the answers

Quelle bibliothèque est utilisée par Node.js pour gérer les I/O asynchrones ?

<p>Libuv (D)</p> Signup and view all the answers

Comment Node.js est-il généralement décrit par rapport à l'exécution de code ?

<p>Comme un environnement asynchrone et dirigé par les événements. (A)</p> Signup and view all the answers

Quel est le moteur JavaScript utilisé par Node.js ?

<p>V8 (D)</p> Signup and view all the answers

Quelle est la caractéristique principale d'un code asynchrone ?

<p>Il ne bloque pas l'exécution du programme. (D)</p> Signup and view all the answers

Quel modèle de traitement Node.js suit-il par défaut ?

<p>Un modèle basé sur les événements. (A)</p> Signup and view all the answers

Quelle affirmation est vraie au sujet du multithreading dans Node.js ?

<p>Node.js est monothread avec une option pour le multithreading. (A)</p> Signup and view all the answers

Quel est le principal avantage des propriétés computed en termes de performance?

<p>Elles n'effectuent des calculs que lorsqu'elles sont lues. (D)</p> Signup and view all the answers

Que se passe-t-il lorsque la référence d'un signal computed devient hors de portée?

<p>Le signal est automatiquement supprimé. (A)</p> Signup and view all the answers

Comment peut-on rendre un signal de type WritableSignal non modifiable?

<p>En utilisant la méthode asReadonly(). (B)</p> Signup and view all the answers

Quelle est la fonction de l'API effect()?

<p>Effectuer un traitement en réponse à un changement de signal. (D)</p> Signup and view all the answers

Quel type de remise est appliqué lorsqu'une quantité de pièces est comprise entre 10 et 15?

<p>Remise de 20%. (B)</p> Signup and view all the answers

Qu'est-ce qui déclenche la réexécution d'un effet dans l'API effect()?

<p>Un changement dans l'un des signaux utilisés. (B)</p> Signup and view all the answers

Quelle valeur est par défaut pour la TVA dans l'exercice proposé?

<p>18%. (B)</p> Signup and view all the answers

Quelle est la caractéristique des computed en termes de leur statut de lecture?

<p>Elles sont toujours en lecture seule. (A)</p> Signup and view all the answers

Quel est le rôle principal d'un service dans une application ?

<p>Interagir avec les données et effectuer des traitements métiers (B)</p> Signup and view all the answers

Quelle commande est utilisée pour créer un service via la CLI Angular ?

<p>ng generate service nomDuService (B)</p> Signup and view all the answers

Quelle est l'utilité de l'injection de dépendance dans un service ?

<p>Déléguer l'instanciation des dépendances à un injecteur (D)</p> Signup and view all the answers

Que se passe-t-il si une dépendance est modifiée dans le constructeur ?

<p>Il faut modifier manuellement chaque classe qui utilise cette dépendance (B)</p> Signup and view all the answers

Quelles étapes sont nécessaires pour injecter une dépendance ?

<p>Déclarer la dépendance dans le provider et passer comme paramètre dans le constructeur (A)</p> Signup and view all the answers

Quel patron de conception est associé à l'injection de dépendance ?

<p>Patron de fabrication (B)</p> Signup and view all the answers

Lorsqu'une classe A1 dépend d'une classe B, quelle est la méthode recommandée pour gérer cette dépendance ?

<p>Utiliser l'injection de dépendance pour passer une instance de B à A1 (B)</p> Signup and view all the answers

Quelle annotation est utilisée pour déclarer un service injectable dans Angular ?

<p>@Injectable() (A)</p> Signup and view all the answers

Flashcards

Fonctionnement asynchrone en JavaScript

L'ajout à JavaScript d'une boucle d'événements et d'une file d'attente de rappels permet de gérer les opérations asynchrones, sans bloquer le moteur JavaScript.

API DOM dans le navigateur

L'API DOM (Document Object Model) offre un moyen de manipuler les éléments et le contenu des pages web dans le navigateur.

JavaScript dans le navigateur

L'exécution du code JavaScript était initialement limitée au navigateur web.

Node.js : Exécution côté serveur

L'objectif initial de Node.js était de permettre l'exécution du code JavaScript en dehors du navigateur, sur le serveur.

Signup and view all the flashcards

Environnement d'exécution Node.js

Node.js est un environnement d'exécution pour le langage JavaScript. Il inclut le moteur V8 de Google Chrome, les API Node, Libuv pour la gestion asynchrone, et des liaisons vers les appels système.

Signup and view all the flashcards

Gestion des threads dans Node.js

Node.js est initialement monothread, mais des mécanismes multithread ont été introduits plus tard.

Signup and view all the flashcards

Nature asynchrone de Node.js

Node.js est un environnement d'exécution JavaScript asynchrone et dirigé par les événements, ce qui signifie qu'il peut gérer plusieurs tâches simultanément sans bloquer le programme principal.

Signup and view all the flashcards

Avantages du modèle asynchrone

Le modèle asynchrone évite de bloquer le programme principal pendant les opérations de longue durée, ce qui permet d'améliorer les performances et la réactivité.

Signup and view all the flashcards

Directive

Une directive est un élément du DOM qui permet d'ajouter des comportements à des éléments du DOM en utilisant l'annotation @Directive.

Signup and view all the flashcards

Directive d'attributs

Les directives d'attributs modifient l'apparence d'un élément DOM en ajoutant ou supprimant des attributs. Elles sont définies avec le sélecteur '[appHighlight]'.

Signup and view all the flashcards

Directive structurelle

Les directives structurelles modifient la structure du DOM en ajoutant, supprimant ou modifiant des éléments. Elles peuvent être définies avec le sélecteur '*ngIf' ou '*ngFor'.

Signup and view all the flashcards

Créer une directive

La commande ng g d nomDirective permet de créer une nouvelle directive dans un projet Angular.

Signup and view all the flashcards

Directive

Une directive est un élément du DOM qui permet d'ajouter des comportements à des éléments du DOM en utilisant l'annotation @Directive.

Signup and view all the flashcards

Directive d'attributs

Les directives d'attributs modifient l'apparence d'un élément DOM en ajoutant ou supprimant des attributs. Elles sont définies avec le sélecteur '[appHighlight]'.

Signup and view all the flashcards

Directive structurelle

Les directives structurelles modifient la structure du DOM en ajoutant, supprimant ou modifiant des éléments. Elles peuvent être définies avec le sélecteur '*ngIf' ou '*ngFor'.

Signup and view all the flashcards

Créer une directive

La commande ng g d nomDirective permet de créer une nouvelle directive dans un projet Angular.

Signup and view all the flashcards

Directive *ngIf

Permet de rendre un élément visible ou invisible selon une condition booléenne.

Signup and view all the flashcards

Directive *ngFor

Une directive structurelle qui répète un élément plusieurs fois dans le DOM en fonction d'un tableau de données.

Signup and view all the flashcards

Directive [ngSwitch]

Une directive structurelle qui permet d'afficher différents éléments en fonction d'une condition.

Signup and view all the flashcards

Pipe

Un outil d'Angular qui permet de transformer une valeur d'entrée en une nouvelle valeur.

Signup and view all the flashcards

Pipe Date

Permet de formater les dates en différents formats.

Signup and view all the flashcards

Pipe Uppercase

Permet de transformer une valeur en majuscules.

Signup and view all the flashcards

Pipe Lowercase

Permet de transformer une valeur en minuscules.

Signup and view all the flashcards

Computed

Ce sont des propriétés calculées qui sont automatiquement mises à jour lorsque les signaux dont elles dépendent changent. Ils sont paresseux, ce qui signifie qu'ils ne sont évalués que lorsqu'ils sont utilisés. Ils sont également automatiquement nettoyés lorsqu'ils ne sont plus utilisés, ce qui garantit une gestion efficace des ressources.

Signup and view all the flashcards

Signal Read Only

Une variable qui est de lecture seule, c'est-à-dire qu'elle ne peut pas être modifiée directement une fois qu'elle a été définie. Cela est utile pour garantir que la valeur d'un signal ne soit pas modifiée par erreur.

Signup and view all the flashcards

Effect

Une fonction qui est exécutée chaque fois qu'un signal dont elle dépend change. Elle est utile pour réaliser des actions secondaires, comme modifier d'autres signaux, enregistrer des données ou effectuer des effets de bord.

Signup and view all the flashcards

Signal

Un signal est un conteneur de données qui peut être observé et dont la valeur peut changer. C'est le cœur de Reactivity, et il permet de synchroniser les UI avec les changements de données.

Signup and view all the flashcards

Weak Reference

Une référence faible est un type de référence qui ne maintient pas un objet en vie. Cela signifie que l'objet peut être supprimé de la mémoire même s'il est toujours référencé par une référence faible. Les signaux utilisent des références faibles pour être automatiquement supprimés lorsque plus personne ne les utilise.

Signup and view all the flashcards

Writable Signal

Un signal qui peut être modifié après sa création. C'est le type de signal le plus utilisé lorsque vous avez besoin de mettre à jour la valeur d'un signal directement.

Signup and view all the flashcards

Qu'est-ce qu'un service en Angular ?

Un service est une classe en Angular qui représente un bloc de code réutilisable pour effectuer des tâches spécifiques, comme interagir avec les données, gérer les interactions inter-composants, ou effectuer des traitements métier.

Signup and view all the flashcards

Quel est le but d'un service ?

Le but d'un service est de fournir une abstraction logique des données et des interactions avec les données, permettant aux composants de se concentrer sur la présentation et les interactions avec l'utilisateur.

Signup and view all the flashcards

Comment créer un service en Angular ?

La commande ng generate service nomDuService (ou ng g s nomDuService) permet de générer un service dans votre projet Angular.

Signup and view all the flashcards

Qu'est-ce que l'injection de dépendance (DI) ?

L'injection de dépendance (DI) est un mécanisme qui permet aux classes d'Angular de recevoir les instances des services dont elles ont besoin sans avoir à les instancier elles-mêmes.

Signup and view all the flashcards

Quel est le rôle de l'injecteur ?

L'injecteur est un objet qui gère la création et la fourniture des instances de services aux classes qui en ont besoin.

Signup and view all the flashcards

Comment déclarer une dépendance à un service ?

Pour déclarer une dépendance à un service, vous devez l'ajouter au provider du module ou du composant qui l'utilise.

Signup and view all the flashcards

Comment recevoir un service ?

Pour recevoir le service, vous devez l'ajouter comme paramètre du constructeur de la classe qui en a besoin.

Signup and view all the flashcards

Quels sont les avantages de l'injection de dépendance ?

L'injection de dépendance permet de découpler les classes et de les rendre plus faciles à tester.

Signup and view all the flashcards

Fonction pure

Une fonction pure est une fonction qui ne modifie pas l'état externe et qui renvoie toujours le même résultat pour les mêmes arguments.

Signup and view all the flashcards

Pipe pur

Un pipe qui est considéré comme une fonction pure est évalué uniquement lorsque ses arguments changent. Cela permet d'optimiser les performances.

Signup and view all the flashcards

Cache dans les pipes

Lorsqu'un pipe est considéré comme une fonction pure, son résultat est mis en cache. Cela signifie que le résultat est stocké pour être réutilisé si les mêmes arguments sont fournis à nouveau. Cela permet d'optimiser les performances.

Signup and view all the flashcards

Pipe impur

Un pipe impur est un pipe qui n'est pas considéré comme une fonction pure. Il peut modifier l'état externe ou renvoyer des résultats différents pour les mêmes arguments.

Signup and view all the flashcards

ngModel

ngModel est une directive Angular qui lie une valeur d'entrée (input) à une propriété du composant.

Signup and view all the flashcards

Mémorisation

C'est un processus qui stocke les valeurs retournées par les fonctions pures pour les réutiliser plus tard. Cela permet d'améliorer les performances en évitant des calculs inutiles.

Signup and view all the flashcards

memo-decorator

La bibliothèque memo-decorator permet de mémoriser les résultats de fonctions pures pour les réutiliser plus tard.

Signup and view all the flashcards

Suite récursive

Une suite récursive se définit par une formule qui s'applique aux termes successifs en fonction des termes précédents. Le calcul des termes de la suite dépend des termes précédents.

Signup and view all the flashcards

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser