49 Questions d'entretien sur Angular et réponses [2023]

Vous prévoyez de passer un entretien pour le poste de développeur Angular ? Il est préférable de vous préparer avec ces questions d'entretien sur Angular.

Si vous êtes un développeur JavaScript, vous connaissez peut-être le framework Angular pour le développement front-end. Il est devenu l'une des compétences les plus demandées par les développeurs dans le monde actuel.

Cependant, il peut être difficile de bien comprendre le framework Angular. Dans ce cas, il est essentiel d'être préparé à tout ce qu'un intervieweur peut vous proposer. Des directives aux frameworks, cela vous aidera à réussir un entretien et à obtenir le poste qui peut faire passer votre carrière à un autre niveau.

Nous avons trié quelques-unes des questions d'entretien Angular les plus populaires auxquelles vous devez être préparé pour obtenir le poste de vos rêves.

Qu'est-ce qu'Angular et pourquoi a-t-il été introduit ?

Angular est un framework JavaScript open-source permettant de créer des applications à page unique. Angular est construit à l'aide de TypeScript et est conçu pour étendre la syntaxe du HTML.

Angular a été créé en 2009 par Miško Hevery, un ingénieur de Google. Il a créé ce framework comme un projet personnel et l'a appelé AngularJS, mais Google l'a repris plus tard. Après que Google a repris le développement et la maintenance de ce framework, il a été renommé Angular 2.0, ou simplement Angular.

Mentionnez les avantages d'Angular.

Architecture modulaire : Le code dans Angular est regroupé en composants, ce qui facilite la réutilisation et la réécriture du code sans modifier l'ensemble du code source. Vous pouvez ainsi construire une application complexe divisée en composants avec un code facile à lire et organisé.
Construit sur TypeScript : TypeScript est un exposant de JavaScript. TypeScript est réputé pour la qualité de son code, ce qui facilite la détection précoce des problèmes de code.
Soutenu par Google : Google est l'un des grands noms du monde de la technologie et compte certains des meilleurs ingénieurs.
Interface utilisateur déclarative : Angular étend les fonctionnalités du HTML, qui est un langage facile à utiliser.
Prise en charge des applications Web progressives (PWA) : Les développeurs Angular peuvent créer des Progressive Web Apps qui fonctionnent comme des applications mobiles, réduisant ainsi les coûts associés au développement.

Discutez des différences entre Angular et Angular JS

La plupart des gens utilisent AngularJS et Angular de manière interchangeable. Cependant, il s'agit de deux frameworks différents.

AngularJS a été le premier à être créé, et il a été construit en utilisant JavaScript. Miško Hevery a créé AngularJS, mais Google a fini par en assurer la maintenance. Google a cessé d'assurer la maintenance d'AngularJS en janvier 2022.

Après avoir repris AngularJS, Google a tout recréé à partir de zéro et a utilisé TypeScript pour créer un nouveau framework appelé Angular 2.0 ou simplement Angulaire. Le nouveau framework a introduit une architecture basée sur les composants et d'autres fonctionnalités améliorées.

Qu'est-ce que l'expression Angular ? En quoi sont-elles différentes de l'expression JavaScript ?

L'expression Angular est un extrait de code que les codeurs placent dans la liaison {{ expression }}. Les différences significatives entre les expressions Angular et JavaScript sont les suivantes :

Il est facile d'utiliser des filtres avant d'afficher des données de format.
L'évaluation est indulgente pour undefined et null au lieu de JavaScript undefined qui génère ReferenceError et TypeError.
L'évaluation se fait par rapport à un objet de portée.
Les expressions Angular incluent les exceptions, les conditionnelles et les boucles.

Donnez un aperçu des différents crochets du cycle de vie d'Angular.

Les crochets du cycle de vie d'Angular sont très utilisés pour vérifier les déclencheurs et les changements de phase pendant toute la durée d'une phase spécifique. Le composant du cycle de vie comprend le Constructeur, qui est divisé en quatre parties principales : ngOchanges, ngOnInit, ngDoCheck, et ngOnDestroy. ngOchanges est également divisé en ngAfterViewInit, ngAfterContentInit, ngAfterViewChecked, et ngAfterContentChecked.

ngOnchanges( ) - Cette méthode est appelée lorsqu'une (ou plusieurs) propriété(s) d'entrée est (sont) modifiée(s) dans les composants. Les valeurs précédentes et actuelles des propriétés sont reçues dans le crochet SimpleChanges.
ngOnInit( ) - Cette méthode intervient après ngOchanges pour initialiser les propriétés d'entrée et les composants.
ngDoCheck( ) - Il vient à la troisième étape pour agir et détecter les changements qui sont impossibles avec Angular. On peut rapidement mettre en place un algorithme de détection des changements en utilisant ce crochet.
ngAfterContentInit( ) - Un autre hook permet de réagir après avoir obtenu des projets de contenu dans le composant.
ngAfterContentChecked( ) - Ensuite, ngAfterContentChecked est appelé après chaque ngDoCheck et ngAftercontentInit qui répondent après la projection du contenu.
ngAfterViewInit( ) - Le crochet suivant à appeler est ngAfterViewInit pour répondre à la vue du composant enfant après que la vue du composant a été vérifiée.
ngOnDestroy( ) - Il permet de détacher les gestionnaires d'événements et de nettoyer le code avant qu'Angular ne détruise le composant.

Quelle est la différence entre AOT et JIT dans Angular ?

Nombreux sont ceux qui confondent les compilateurs AOT et JIT dans Angular, et il est donc essentiel d'en connaître les bases :

Le compilateur AOT (Ahead-of-Time) compile le code sur le serveur au moment de la construction. Dans le même temps, le compilateur Just-in-Time (JIT) est au moment de l'exécution dans le navigateur pour l'application.
AOT est idéal pour le mode production, tandis que JIT est pour le mode développement qui peut compiler le code dans le projet Angular.
La compilation AOT inclut les commandes ng serve et ng build, tandis que la compilation JIT inclut les commandes CLI ng serve et ng build.
AOT peut réduire la taille du bundle pour un rendu plus rapide, tandis que JIT est livré avec le débogage et la mise en œuvre des principales fonctionnalités pour les fichiers de mappage.

Plongée dans les différents types de filtres Angular.

Angular utilise un filtre pour montrer aux utilisateurs le formatage de la valeur de l'expression qui peut être ajoutée aux modèles, directives, services et contrôleurs. Il est possible de créer des filtres personnalisés en fonction des besoins, ce qui permet aux utilisateurs d'organiser les données en fonction de critères. Après le symbole du tuyau ( | ), les filtres sont placés dans l'expression. Les principaux filtres utilisés dans Angular sont les suivants

nombre - Pour convertir la valeur en chaîne de caractères
monnaie - Pour convertir les nombres en format monétaire
json - Pour convertir n'importe quel objet en chaîne JSON
date - Pour la convertir dans n'importe quel format de date
limitTo - Limite le tableau ou la chaîne à des chaînes ou éléments particuliers
orderBy - Classe le tableau dans l'expression
majuscules - Convertit une chaîne en majuscules
minuscule - Convertit une chaîne en minuscules
filtre - Sélectionne un sous-ensemble à partir d'un tableau donné

Qu'est-ce que l'encapsulation de vues dans Angular ?

L'encapsulation des vues décrit l'encapsulation des modèles et des styles. Angular dispose de trois types d'encapsulation de vue : Emulated, None et Shadow DOM. Emulated est le style par défaut, où Angular ajoute un attribut unique aux éléments HTML du composant. Cette approche fait en sorte que le style ne s'applique qu'à la vue du composant.

Expliquez la CLI d'Angular

L'interface de ligne de commande Angular, ou simplement Angular CLI, est un outil de ligne de commande que vous pouvez utiliser pour créer, développer et maintenir des applications Angular. Vous pouvez également créer et gérer des espaces de travail avec cet outil. Vous pouvez également générer de la documentation en utilisant Angular CLI.

Qu'est-ce que Schematics CLI ?

Schematics CLI est construit au-dessus d'Angular CLI et est utilisé pour générer et mettre à jour le code et effectuer d'autres tâches connexes pour une application Angular. Schematics CLI aide à réduire les tâches répétitives et possède des modèles prédéfinis qui assurent la cohérence du code et les meilleures pratiques.

Qu'est-ce que Angular Universal ?

Cette fonctionnalité permet aux applications Angular d'être rendues sur le serveur. Cette technologie permet à une application Angular d'être pré-rendue avant d'être envoyée au client/à la vue.

Que sont les éléments Angular ?

Cette fonctionnalité permet aux développeurs d'empaqueter les composants Angular en tant qu'éléments web ou personnalisés. Lorsque vous transformez un composant en élément personnalisé, vous mettez toute l'infrastructure Angular requise à la disposition du navigateur.

Discutez de l'authentification et de l'autorisation Angular

L'authentification vérifie l'identité de l'utilisateur. L'utilisateur doit fournir un email/nom d'utilisateur et un mot de passe. Si l'authentification est réussie, l'utilisateur a accès à l'application.

L'autorisation est le processus qui consiste à refuser ou à accorder l'accès aux ressources de l'application en fonction des informations d'identification présentées.

Définissez le bootstrapping.

Le bootstrapping est une façon de démarrer ou d'initialiser l'application dans Angular, que ce soit automatiquement ou manuellement. Laissez-nous vous aider à mieux le comprendre :

Le bootstrapping automatique est inclus lors de l'ajout de directives ng-app sur la balise si nécessaire. Angular compile le DOM et l'associe au module qui trouve la directive ng-app.
Le bootstrapping manuel permet d'initialiser l'application Angular et d'offrir le contrôle aux développeurs pour effectuer des opérations et des tâches significatives afin de compiler la page.

Un peu de lumière sur les directives Angular.

En ce qui concerne les directives Angular, il en existe trois types principaux :

Attribut - En l'utilisant, on peut modifier le comportement et l'apparence des éléments, d'une autre directive et des composants. Elle utilise ngStyle et ngClass comme attributs des éléments.
Composants - Il s'agit de modèles qui permettent de définir une interface utilisateur unique à l'aide de styles CSS, de code TypeScript et de modèles HTML. Il est généralement décoré du symbole @, ce qui permet au compilateur angulaire de le remplacer par les modèles de composants.
Structurel - Il modifie la structure de la vue pour masquer ou afficher certaines données à l'aide de différentes directives telles que les directives ngIf.

Qu'est-ce que TypeScript ?

TypeScript est un langage de programmation fortement typé. Il s'agit d'un superscript de JavaScript construit au-dessus de JavaScript. Il offre donc toutes les fonctionnalités de JavaScript et introduit des types, ce qui permet aux développeurs de détecter les bogues avant qu'ils ne passent à la production.

Qu'est-ce qu'une application monopage ?

Les applications à page unique sont des applications qui ne comportent qu'une seule page HTML. Les SPA mettent à jour dynamiquement le contenu de la page web lorsque l'utilisateur interagit avec l'application, sans recharger l'ensemble de l'application. Angular est un exemple de framework qui crée des SPA.

Que sont les annotations ?

Les annotations sont des blocs de texte qui peuvent être affichés au-dessus d'un connecteur ou d'un nœud. Ces fonctions peuvent être attachées à des méthodes, des propriétés ou des classes pour fournir une configuration supplémentaire ou modifier leur comportement. Pour écrire une annotation, commencez par le symbole @ devant l'élément cible que vous décorez.

Que sont les composants ?

Les composants sont les éléments de base de l'interface utilisateur d'une application Angular. Ces composants comportent du HTML, du CSS et du TypeScript qui définissent l'apparence et le comportement d'une partie de l'interface utilisateur.

Expliquez RxJS.

Reactive Extensions for JavaScript (RxJS) utilise des observables permettant aux développeurs d'effectuer de la programmation réactive. L'objectif est de composer du code basé sur des rappels ou des opérations asynchrones à l'aide du cadre RxJS dans Angular.

Il peut aider à diffuser des données aux abonnés en émettant des valeurs à partir des éditeurs. Si vous n'utilisez pas Angular, d'autres langages de programmation, tels que Python et Java, peuvent utiliser des observables avec du code réactif.

Qu'est-ce qu'un composant dynamique ?

Les composants dynamiques sont des composants qui peuvent être créés et rendus au moment de l'exécution. Les composants dynamiques sont créés dynamiquement, contrairement aux composants statiques qui sont déclarés dans le balisage ou définis dans des modèles. Vous pouvez utiliser des composants dynamiques pour créer des systèmes de menus dynamiques, des systèmes de chat dynamiques et bien plus encore.

Expliquez la liaison de données.

La liaison de données est considérée comme l'une des caractéristiques les plus influentes et les plus essentielles pour établir une connexion entre les composants et le DOM. Il est simple de définir le processus des applications interactives sans se soucier de tirer et de pousser les modèles et les composants. Plusieurs types de liaison de données sont utilisés dans Angular, tels que

Liaison de propriété,
La liaison de données bidirectionnelle,
La liaison d'événements, et
L'interpolation de chaînes de caractères.

Qu'est-ce qu'un pipe ?

Les pipes sont des fonctions qui prennent une valeur en entrée et renvoient une valeur transformée. Vous pouvez utiliser les pipes pour transformer des montants en devises, des dates ou des chaînes de caractères.

Que sont les tuyaux purs et les tuyaux impurs ?

Les tuyauxpoursuites sont des tuyaux dont la sortie est déterminée par les entrées. Les pipes Angular sont purs par défaut et ne sont appelés que lorsqu'un changement est noté dans les entrées.

Lestuyaux impurs sont appelés à chaque fois qu'il y a un changement dans le cycle. Cependant, ce changement ne doit pas nécessairement se situer au niveau des entrées. Les tuyaux impurs dépendent de l'état externe, tel que votre emplacement ou l'heure.

Qu'est-ce que l'interface PipeTransform ?

Une interface PipeTransform est une interface intégrée qui accepte une valeur d'entrée et renvoie une valeur transformée. Dans Angular, la méthode de transformation, transform(), est invoquée avec la valeur du binding comme premier argument et d'autres paramètres comme second argument sous forme de liste.

Que sont les promesses et les observables ?

Lespromesses dans Angular sont unicast, ce qui signifie qu'elles ne seront exécutées qu'une seule fois, même si vous les appelez plusieurs fois.

Lesobservables dans Angular sont multicast, ce qui signifie qu'ils seront exécutés chaque fois que vous vous abonnez à un observable.

Que sont les contrôleurs ?

Les contrôleurs ne sont disponibles que dans AngularJS. Cependant, Angular utilise des composants. Les contrôleurs sont l'une des parties de l'architecture MVC d'AngularJS. Les contrôleurs d'AngularJS définissent le comportement et la logique de certaines parties de l'interface utilisateur.

Qu'est-ce que l'interpolation de chaînes de caractères ?

L'interpolation de chaînes de caractères permet d'afficher des données dynamiques à l'utilisateur final (sur le modèle HTML). Cette technique de liaison à sens unique transfère les données du code TypeScript vers un modèle ou une vue HTML. L'interpolation de chaînes utilise des accolades doubles ({{}}) pour afficher les données du composant vers la vue.

Qu'est-ce que le chargement paresseux ?

Cette fonctionnalité vous permet de charger des composants JavaScript lorsqu'une route spécifique est activée. Cette approche peut améliorer les performances de votre application car elle ne charge pas tout en même temps.

Qu'est-ce qu'un FormBuilder ?

FormBuilder est une classe utilitaire qui offre différentes façons de créer un FormControl, un FormGroup ou un FormArray. Cette classe utilitaire réduit la quantité de gabarit Angular nécessaire pour créer des formulaires complexes.

Qu'est-ce qu'un formulaire réactif ?

Les formulaires réactifs sont des formulaires dont l'état est géré de manière programmatique. Ces formulaires permettent d'accéder à des informations sur un contrôle donné par le biais de méthodes et de propriétés fournies par chaque instance. Les formulaires réactifs sont flexibles, puissants et faciles à tester.

Que sont les décorateurs ?

Les décorateurs sont des fonctions qui permettent d'ajouter des métadonnées à une méthode, une classe, un paramètre ou une propriété. Les décorateurs peuvent modifier ou améliorer le comportement d'une méthode, d'une classe, d'un paramètre ou d'une propriété au moment de la conception. Nous utilisons le symbole @ avant le décorateur.

Qu'est-ce qu'un décorateur de propriété ?

Les décorateurs de propriétés sont appliqués aux propriétés des classes afin de modifier leur comportement ou leurs métadonnées. Un exemple parfait de décorateur de propriété est le décorateur @Input, qui permet à la propriété d'obtenir/de recevoir des valeurs du parent.

Que sont les décorateurs de classe et de méthode ?

Les décorateursde classe sont appliqués aux classes dans Angular. Les exemples de décorateurs de classe sont @Component, @NgModule et @Directive.

Les décorateursde méthode sont appliqués aux méthodes d'une classe. Les exemples de décorateurs de méthode sont @HostListener et @ViewChild.

Qu'est-ce que la liaison de propriétés ?

Il s'agit d'un mécanisme à sens unique qui permet aux utilisateurs de définir la vue des propriétés d'un élément. La liaison de propriétés vous permet de contrôler le comportement et l'apparence des composants de manière dynamique.

Qu'est-ce que la liaison bidirectionnelle ?

Ce mécanisme permet aux utilisateurs de lier une propriété de composant et une propriété d'élément HTML. la liaison bidirectionnelle permet à vos composants d'écouter les événements et de mettre à jour les valeurs de manière dynamique entre les composants enfants et parents.

Qu'est-ce qu'une expression de modèle ?

Il s'agit d'expressions qui sont évaluées et affichées dans le modèle. Les expressions de modèle sont utilisées pour afficher un contenu dynamique, tel que le résultat d'un calcul ou la valeur d'une propriété.

Qu'est-ce qu'une instruction de modèle ?

Les instructions de modèle sont des propriétés/méthodes que vous pouvez utiliser dans votre code HTML pour répondre aux événements de l'utilisateur. Ces événements comprennent le déplacement de la souris, la soumission d'un formulaire ou le clic sur un bouton.

Qu'est-ce qu'un module ?

Dans Angular, un module est un conteneur qui regroupe des composants, des services, des tuyaux et des directives connexes qui fonctionnent ensemble dans une application. Le système de modularité d'Angular est connu sous le nom de NgModule.

Qu'est-ce que la fonction state ?

Vous pouvez utiliser la fonction state() pour définir différents états que vous pouvez appeler à la fin de chaque transition. Une fonction state() prend deux arguments : un nom unique, c'est-à-dire fermé ou ouvert, et une fonction style().

Qu'est-ce que la fonction de style ?

Une fonction de style déclare un objet valeur/clé contenant des styles/propriétés CSS qui peuvent être utilisés pour un état d'animation au sein d'une séquence d'animation.

Qu'est-ce que la multidiffusion ?

Il s'agit de la pratique consistant à utiliser une seule exécution pour diffuser une liste à plusieurs abonnés. Pour ce faire, vous utilisez un observable multicast, ce qui signifie que vous n'avez pas besoin d'enregistrer plusieurs listeners sur votre document, car vous pouvez réutiliser le premier listener et envoyer des valeurs à tous les abonnés.

Quels sont les différents types d'événements qui peuvent être déclenchés dans le routeur Angular ?

Il existe différents événements, mais nous n'en mentionnerons que quelques-uns.

NavigationStart : Déclenché lorsque le routeur commence à naviguer sur une nouvelle route.

NavigationEnd : Déclenché lorsque le routeur Angular termine la navigation d'une nouvelle route.

NavigationError : Déclenché lorsque le routeur rencontre une erreur pendant la navigation.

Qu'est-ce qu'un lien de routeur ?

Les liens de routeur dans Angular sont utilisés pour naviguer entre différents composants ou vues dans une application en utilisant le module Angular Router.

Vous pouvez avoir une route qui navigue vers la route "home" comme suit ;

<a routerlink="/home">Accueil</a&gt>

Expliquez l'injection de dépendance

L'injection de dépendances est un concept d'Angular qui permet aux classes dotées de décorateurs Angular tels que les Injectables, les Directives, les Composants et les Pipes de configurer les dépendances dont elles ont besoin. Ce concept facilite l'interaction entre les fournisseurs et les consommateurs de dépendances grâce à l'abstraction de l'injecteur.

Expliquez l'architecture MVVM

MVVM est l'abréviation de Model-View-ViewModel (Modèle-Vue-Modèle).

Modèle : Il représente les données et la logique métier de l'application Angular.
Vue: Elle représente l'interface utilisateur.
Modèle de vue: Il sert d'intermédiaire entre le modèle et la vue. Les composants d'une application Angular correspondent au ViewModel.

Discutez des différences entre les directives structurelles et les directives d'attributs

Lesdirectives structurelles sont utilisées pour ajouter ou supprimer des éléments du DOM. Les directives structurelles ont un symbole * devant leur nom. Les exemples sont *ngFor, *ngIf et *NgSwitch.

Lesdirectives d'attributs sont utilisées pour modifier l'apparence ou le comportement des éléments du DOM. Pour utiliser ces directives, vous devez les faire précéder de crochets [].

Expliquez le fonctionnement des éléments personnalisés

La fonctionnalité des éléments personnalisés vous permet de créer un composant Angular réutilisable et de le réutiliser dans d'autres frameworks prenant en charge les composants web. Par exemple, vous pouvez créer un élément personnalisé nommé home-button qui rend un bouton avec des fonctionnalités Angular. Par la suite, vous pouvez réutiliser ce bouton dans votre code HTML comme du HTML normal.

De parent à enfant : Utilisez le décorateur @Input() pour partager des données de parent à enfant.
D'enfant à parent : Utilisez le décorateur @output() pour partager des données d'un composant enfant à un autre.
Service partagé : Vous pouvez injecter un service dans les composants parent et enfant, puis l'utiliser pour partager des données.
ViewChild : Vous pouvez accéder à un composant enfant à partir du composant parent en utilisant le décorateur ViewChild.

Conclusion

Voici les questions et réponses essentielles qui sont généralement posées lors des entretiens sur Angular. Elles vous aideront à vous préparer à l'entretien, à le réussir et à décrocher l'emploi de vos rêves.

Si vous avez terminé, apprenez-en plus sur AngularJS.