29 questions et réponses d'entrevue AngularJS les plus fréquemment posées [Pour les débutants et les expérimentés]

AngularJS est l'un des frameworks Web les plus populaires sur la scène technologique moderne. Bien qu'initialement, AngularJS était un projet Google, plus tard, il est devenu un framework open source. AngularJS est un framework JavaScript Model-View-Controller côté client qui est principalement utilisé pour créer et dynamiser des applications Web, en particulier des applications à page unique.

Étant donné qu'AngularJS est entièrement basé sur HTML et JavaScript, il vous permet d'utiliser HTML comme langage de modèle. Il transforme non seulement le HTML statique en HTML dynamique, mais aide également à étendre les capacités du HTML en ajoutant des attributs intégrés. Mais juste cela, AngularJS étend également la capacité de HTML à créer des attributs personnalisés à l'aide de JavaScript. Ce qu'il y a de mieux avec AngularJS, c'est que ses fonctionnalités de liaison de données et d'injection de dépendances aident à éliminer le besoin d'écrire du code redondant.

La popularité d'AngularJS est devenue si répandue que la demande de compétences AngularJS dans l'industrie monte en flèche. Cependant, si vous souhaitez décrocher un emploi qui exige des compétences AngularJS, vous devez d'abord casser l'entretien AngularJS. Pour vous aider à réussir l'entretien AngularJS, nous avons créé une liste complète de questions et réponses d'entretien AngularJS.

Voici!

Principales questions et réponses des entretiens avec AngularJS

1. Qu'est-ce qu'AngularJS ? Quelles sont les principales fonctionnalités d'AngularJS ?

AngularJS est un framework JavaScript développé par Google. Il est utilisé pour créer des applications Web dynamiques et extensibles. Il est basé sur le modèle MVC (Model View Controller) avec HTML comme langage de modèle. Comme nous l'avons mentionné dans l'introduction, AngularJS s'exécute sur du JavaScript et du HTML simples, ce qui signifie que vous n'avez pas besoin de vous fier à d'autres dépendances externes pour l'utiliser. AngularJS aide à lier des objets JavaScript avec des éléments d'interface utilisateur HTML.

Les principales fonctionnalités d'AngularJS sont :

• Modèle
• Portée
• Manette
• Prestations de service
• Modèle
• Voir
• Liaison de données
• Filtres

En savoir plus sur : Angular 7.0 – Quoi de neuf dans son Avatar ?

2. Définir la portée dans AngularJS.

Dans AngularJS, Scope est un modèle d'application qui fonctionne comme un lien entre le glue entre le contrôleur d'application et la vue. L'étendue est conçue pour surveiller les expressions et propager les événements. Habituellement, les portées sont organisées dans une structure hiérarchique reproduisant la structure DOM (Document Object Model) d'une application. Il peut surveiller des expressions et propager des événements.

3. Définissez la liaison de données dans AngularJS.

Dans AngularJS, la liaison de données fait référence au processus dans lequel les données entre les composants de modèle et de vue sont automatiquement synchronisées. La liaison de données permet de simplifier le processus de définition d'applications interactives sans se soucier de pousser ou d'extraire des données entre la vue/le modèle et le composant. Il existe quatre formes de liaison de données :

• Liaison d'événement
• Liaison de propriété
• Interpolation de chaîne
• Liaison de données bidirectionnelle

4. Définir l'expression angulaire. Quelle est la différence entre les expressions angulaires et les expressions JavaScript ?

Les expressions angulaires sont des extraits de code qui sont placés dans la liaison (un peu comme le style de JavaScript), comme ceci :

{{ angulaire }}

Les expressions angulaires aident à lier les données d'application au HTML.

La principale différence entre les expressions JavaScript et les expressions angulaires est :

• Alors que les expressions JavaScript sont évaluées par rapport à une fenêtre globale, les expressions angulaires sont évaluées par rapport à un objet de portée.
• L'évaluation des expressions angulaires pardonne null et undefined, mais en JavaScript, les propriétés undefined produisent généralement TypeError ou ReferenceError.
• Contrairement à JavaScript, les expressions angulaires ne permettent pas l'utilisation de boucles, de conditions ou d'exceptions.
• Alors qu'AngularJS prend en charge les filtres, JavaScript ne le fait pas.

5. Nommez les IDE courants utilisés pour le développement d'applications AngularJS.

Voici les IDE (Integrated Development Environment) les plus couramment utilisés pour AngularJS :

• Eclipse - C'est l'un des IDE préférés des développeurs Java/JavaScript. Il prend en charge les plug-ins AngularJS.
• Visual Studio - Il s'agit d'un IDE Microsoft conçu pour développer facilement et rapidement des applications Web.
• WebStorm - C'est sans aucun doute l'un des IDE les plus puissants pour le développement JavaScript moderne. Il permet une intégration facile des dépendances à l'aide de la CLI angulaire.
• Aptana - Il s'agit d'une version open-source et personnalisée d'Eclipse. Il est livré avec les derniers outils et normes Web requis pour le développement Web.
• Sublime Text - Il s'agit d'un IDE fortement recommandé pour HTML, CSS et JavaScript. Naturellement, il est compatible avec AngularJS.

Vérifiez également : AngularJS est-il le bon choix pour votre prochain développement d'applications mobiles ?

6. Que sont les directives dans AngularJS ?

Les directives dans AngularJS ne sont rien d'autre que des attributs HTML étendus ayant le préfixe "ng". Il existe trois directives principales d'AngularJS :

• ng-app - Le but de cette directive est de marquer l'élément HTML qui doit être considéré comme l'élément racine d'une application Angular. Alors qu'Angular applique le spinal-case pour les attributs personnalisés, il utilise le filtre camelCase pour les directives correspondantes qui les implémentent.
• ng-model - Cette directive permet de lier les valeurs des contrôles HTML (input, select, textarea) aux données de l'application. Dans un modèle ng, non seulement la portée reflétée dans la vue change, mais même les modifications de la vue sont reflétées dans la portée.
• ng-bind - Cette directive est utilisée pour lier les données d'application modales à la vue HTML.

7. A quoi servent les routes AngularJS ?

L'utilisation des routes AngularJS vous permet de créer différentes URL pour différents contenus dans une application Angular. Ce faisant, vous pouvez ajouter des URL à leur contenu spécifique, et chaque URL de ce type qui est mise en signet est appelée une route dans AngularJS.

8. Définissez l'interpolation de chaîne dans AngularJS.

Dans AngularJS, l'interpolation de chaîne fait référence à une syntaxe unique qui utilise des expressions de modèle entre accolades {{ }} pour afficher les données du composant. L'interpolation de chaîne est souvent appelée "syntaxe Moustache". Lorsque vous utilisez cette syntaxe, vous devez d'abord inclure les expressions JavaScript (qui doivent être exécutées) dans les doubles accolades, puis intégrer la sortie relative dans un code HTML.

9. Définissez le "cycle de résumé" d'AngularJS.

Le cycle de digestion fait essentiellement référence au processus de liaison de données dans AngularJS. Au cours de ce processus, les anciennes et nouvelles versions des valeurs du modèle de portée sont confrontées les unes aux autres et comparées. Bien que le cycle de digestion soit déclenché automatiquement, vous pouvez également utiliser « $apply() » pour démarrer manuellement le processus.

10. Quelle est la différence entre la reliure unidirectionnelle et la reliure bidirectionnelle ?

La liaison unidirectionnelle est utilisée pour lier les données du modèle à afficher sans mettre automatiquement à jour le modèle ou la vue HTML. Ainsi, dans cette approche, vous devez écrire un code personnalisé pour mettre à jour le modèle HTML, qui mettra à jour davantage la vue chaque fois que les données sont liées du modèle à la vue.

Contrairement à cela, la liaison bidirectionnelle lie les données du modèle à la vue et vice versa en mettant à jour automatiquement le modèle HTML sans que vous ayez à écrire de code personnalisé.

11. Définir la fonction de liaison. Nommez les types de fonctions de liaison.

Un lien combine les directives avec une portée pour produire une vue en direct. La fonction de lien est utilisée pour enregistrer les écouteurs DOM et pour mettre à jour le DOM. Cette fonction est exécutée immédiatement après le clonage du modèle.

Il existe deux types de fonction de liaison :

• Fonction de pré-liaison - Cette fonction est exécutée avant que les éléments enfants ne soient liés et n'est généralement pas une approche sûre pour la transformation DOM.
• Fonction de post-liaison – Cette fonction est exécutée une fois que les éléments enfants sont liés.

12. Qu'est-ce qu'un injecteur dans AngularJS ?

Un injecteur est un localisateur de service dans AngularJS. L'objectif principal de l'injecteur est de recevoir des instances d'objet définies par les fournisseurs, d'invoquer des méthodes, de charger des modules et d'instancier des types. Chaque application angulaire comprend un injecteur qui permet de rechercher des instances d'objet par leur nom.

13. Nommez les différentes formes de style que ng-model ajoute aux classes CSS.

Un modèle ng ajoute les formes de style suivantes aux classes CSS :

• ng- valide
• ng- invalide
• ng-prime
• ng-sale

14. Définir l'injection de dépendance. Comment un objet ou une fonction peut-il accéder à ses dépendances ?

L'injection de dépendances (DI) est un modèle de conception de logiciel qui détermine comment le code peut récupérer ses dépendances. Il permet aux composants d'accéder à leurs dépendances au lieu de les coder en dur dans un composant. Pour récupérer les éléments devant être configurés lors du chargement d'un module dans une application, l'opération « config » utilise DI.

Un objet ou une fonction peut accéder à ses dépendances des manières suivantes :

• Une dépendance peut être créée à l'aide d'un nouvel opérateur.
• Une dépendance peut être recherchée en se référant à une variable globale.

15. Nommez les composants qui peuvent être injectés en tant que dépendance dans AngularJS.

Dans AngularJS, vous pouvez injecter les composants suivants les uns dans les autres en tant que dépendances :

• Évaluer
• Service
• Usine
• Constant
• Fournisseur

Trouvez également les réponses à cette question : Pourquoi devenir développeur full stack ?

16. Quelles sont les étapes impliquées dans le processus de compilation de HTML ?

Le processus de compilation de HTML implique les étapes suivantes :

• Tout d'abord, le HTML est analysé dans le DOM à l'aide de l'API de navigateur standard.
• Dans l'étape suivante, l'appel à la méthode $compile() est utilisé pour effectuer la compilation du DOM. La méthode traverse le DOM pour correspondre aux directives.
• La dernière étape consiste à lier le modèle à une portée en appelant la fonction de liaison renvoyée à l'étape précédente.

17. Qu'est-ce qu'un service dans AngularJS ?

Les services sont des fonctions JavaScript conçues pour effectuer des tâches spécifiques. Par exemple, la fonction $https: est utilisée pour effectuer un appel AJAX pour obtenir les données du serveur tandis que la fonction $route est utilisée pour définir les informations de routage. Il existe de nombreux autres services de ce type qui peuvent effectuer des tâches spécifiques.

18. Définir la directive dans AngularJS. Nommez les différents types de directives.

Dans AngularJS, une directive est un comportement ou une fonction déclenchée pendant le processus de compilation lorsque des constructions HTML spécifiques sont rencontrées. Les directives sont des marqueurs sur les éléments DOM (tels que les éléments, les attributs, CSS, etc.). Vous pouvez également les utiliser pour créer des balises HTML personnalisées qui agissent comme de nouveaux widgets personnalisés.

Les quatre principaux types de directives sont :

• Directives d'élément
• Directives d'attribut
• Directives de commentaire
• Directives de classe CSS

19. Différencier une annotation et un décorateur dans AngularJS.

Dans Angular, les annotations sont le seul ensemble de métadonnées de la classe qui utilise la bibliothèque Reflect Metadata pour créer un tableau "annotation". Les décorateurs, quant à eux, sont des modèles de conception utilisés pour séparer la décoration ou la modification d'une classe sans altérer le code source d'origine d'une application.

20. Définir les contrôleurs.

Les contrôleurs sont des fonctions JavaScript liées à une portée particulière. Leur objectif principal est de fournir des données et une logique à l'interface utilisateur HTML. Ce sont les principaux acteurs du framework AngularJS qui contrôlent la façon dont les données circulent du serveur vers l'interface utilisateur HTML. De plus, les contrôleurs ont également des fonctions pour opérer sur les données et déterminer quelle vue doit être mise à jour pour afficher les données basées sur le modèle mises à jour.

21. Comment les logs sont-ils conservés dans AngularJS ?

Pour maintenir les journaux, le service $log est utilisé dans AngularJS. L'objectif principal du service $log est d'aider au débogage et au dépannage via les méthodes mentionnées ci-dessous :

• log () - Il est utilisé pour écrire un message de journal dans la console.
• info()- Il est utilisé pour écrire un message d'information.
• warn() - Il est utilisé pour écrire un message d'avertissement.
• error() - Il est utilisé pour écrire un message d'erreur.
• debug() - Il est utilisé pour écrire un message de débogage.

22. Définissez $rootscope dans AngularJS. En quoi diffère-t-il de Scope ?

Dans AngularJS, $rootscope et $scope sont des objets généralement utilisés pour partager des données du contrôleur à afficher. Cependant, les deux sont assez différents. La principale différence entre $rootscope et $scope est que, bien que le premier soit globalement disponible sur tous les contrôleurs, $scope n'est disponible que dans les contrôleurs qui l'ont créé avec leurs contrôleurs enfants.

23. Nommez quelques navigateurs pris en charge par AngularJS.

Voici quelques-uns des navigateurs pris en charge par AngularJS :

• MozillaFirefox
• Google Chrome
• Microsoft Edge
• IE Mobile
• Safari (iOS)
• IE 10,11

24. Comment activer le mode HTML5 dans Angular 1.x ?

Pour activer le mode HTML5 dans Angular 1.x, vous devez exécuter le code ci-dessous :

angular.module('monApp', [ ])

.config(fonction($routeProvider, $locationProvider) {

$routeProvider

.lorsque('/', {

templateUrl : 'partiels/home.html',

contrôleur : mainController

})

// utilise l'API d'historique HTML5

$locationProvider.html5Mode(true);

});

25. Nommez les validateurs intégrés dans AngularJS.

AngularJS prend en charge tous les attributs HTML5 standard pour valider les entrées. Voici quelques-uns des validateurs intégrés dans AngularJS :

• Min
• Max
• Obligatoire
• Tapez = "numéro" OU tapez = "e-mail"

26. Comment passer un appel AJAX avec AngularJS ?

Vous pouvez utiliser le service $https: dans AngularJS pour effectuer un appel AJAX afin de lire les données du serveur. AngularJS nécessite que les données soient au format JSON. Le serveur crée un appel de base de données pour récupérer les enregistrements souhaités. Une fois les données prêtes, le service $https: peut être utilisé pour récupérer les données du serveur, comme ceci :

function étudiantContrôleur($scope,$https:) {

var url = "données.txt" ;

$https:.get(url).success( fonction(réponse) {

$scope.students = réponse ;

});

}

27. Qu'est-ce que l'internalisation dans AngularJS ?

Dans AngularJS, l'internationalisation fait référence à la méthode utilisée pour afficher des informations spécifiques aux paramètres régionaux sur un site Web. Par exemple, un site Web affichant du contenu en anglais aux États-Unis et en danois en France doit être internalisé en fonction de la localisation.

AngularJS offre une prise en charge intégrée de l'internationalisation pour trois types de filtres :

• Date
• Nombres
• Monnaie

28. Décrivez les étapes du processus de démarrage d'AngularJS.

Lorsque vous chargez une page dans un navigateur, le processus de démarrage AngularJS démarre. Les étapes impliquées sont les suivantes :

• Le fichier de document HTML est chargé et évalué par le navigateur. Ensuite, le fichier JavaScript AngularJS est chargé et un objet global est créé.
• Dans l'étape suivante, le fichier JavaScript responsable de l'enregistrement des fonctions du contrôleur est exécuté.
• AngularJS analyse le HTML pour trouver des applications et des vues AngularJS. Lorsqu'il réussit à trouver une vue, il connecte cette vue particulière à la fonction de contrôleur correspondante.
• Enfin, AngularJS exécute les fonctions du contrôleur et restitue les vues avec les données du modèle rempli par le contrôleur, et la page est prête à être visualisée par l'utilisateur.

29. À quoi servent les filtres dans AngularJS ?

Les filtres sont utilisés pour formater la valeur d'une expression et l'afficher à l'utilisateur. Dans AngularJS, des filtres sont ajoutés aux modèles, directives, contrôleurs et services. Vous pouvez également créer des filtres personnalisés. En utilisant des filtres, vous pouvez organiser les données de manière à ce que la valeur des données ne s'affiche que lorsqu'elle remplit un critère particulier. Les filtres sont ajoutés aux expressions angulaires en utilisant le "|" caractère suivi d'un filtre

Conclusion

Voici donc les 29 questions et réponses les plus fréquemment posées pour les entretiens avec AngularJS qui vous aideront à briser la glace avec AngularJS.

Si vous souhaitez en savoir plus sur AngularJS, le développement de la pile complète, consultez le diplôme PG upGrad & IIIT-B en développement de logiciels à pile complète qui est conçu pour les professionnels et offre plus de 500 heures de formation rigoureuse, plus de 9 projets et affectations, statut d'anciens élèves de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.

Bon apprentissage!