Questions d'entretien angulaires 2

Le cadre angulaire est l'une des solutions à privilégier pour les ZPS ou les demandes de page unique. Mais cela n'a pas commencé comme ça. La première version du cadre a été publiée en 2009 par nul autre que Google, mais en raison de problèmes de performance et d'autres lacunes, l'ensemble du cadre a été réécrit. Si vous avez une application Angular en ligne, vous aurez remarqué l'extension .ts au lieu de .js.

C'est exact, l'ensemble du cadre angulaire est écrit en TypeScript, qui est un sur-ensemble de Javascript assurant la sécurité typographique de votre application.

The job market for Angular is booming right now and if you’ve got an Angular interview coming up, you’re in the right place. The following Angular interview questions take you from the basics to some of the complex concepts that Angular has to offer.

Consultez la question Angular ci-dessous. Il y a plusieurs façons de la résoudre, de sorte que les choix du candidat peuvent révéler sa façon de coder. Comment la résoudriez-vous ? Cliquez sur l'onglet "Instructions" et essayez :

What are the differences between AngularJS and Angular?

C'est l'une des questions que tout développeur devrait connaître. En raison de l'historique confus des versions, il est très important de connaître les différences entre les deux. Angular n'est pas une mise à jour ou une amélioration par rapport à la première mais est complètement réécrite. Cela a irrité de nombreux développeurs, car ils ont dû réécrire complètement leurs applications web existantes. Angular est écrit en TypeScript qui est un sur-ensemble de Javascript. Vous n'avez pas le concept de $scope dans Angular qui était largement répandu dans AngularJS.

Angular propose ce que l'on appelle le compilateur AOT (Ahead-of-Time Compiler). Avec la compilation en avance, vous obtenez un rendu plus rapide car le navigateur reçoit du code précompilé. De plus, la taille du cadre de travail lui-même se réduit car vous n'avez pas besoin de télécharger le compilateur. Parmi les autres avantages, citons une meilleure sécurité et une détection plus rapide des erreurs de modèle

Bonnes réponses :

Une compréhension claire entre les deux
Les nouvelles fonctionnalités qui ont été ajoutées avec Angular
Les lacunes d'AngularJS

Drapeaux rouges :

Considère que les deux sont identiques

Comment une application Angular écrite en TypeScript fonctionne-t-elle sur un navigateur ?

Il y a un terme très important que vous devez comprendre ici et qui est la transpilation. Typescript est un langage de programmation à source ouverte développé et maintenu par Microsoft. Pour faire simple, les navigateurs ne supportent pas le TypeScript, ils supportent le Javascript. Donc, pour que le navigateur comprenne notre code, nous utilisons un transpondeur pour le convertir en Javascript. Nous savons tous que la compilation implique la conversion d'un langage de haut niveau en un code compréhensible par la machine. Dans la transpilation, nous convertissons un langage de haut niveau en un autre langage de haut niveau.

Votre projet contiendra généralement un fichier tsconfig.json qui contient les informations de configuration pour la transplantation.

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true } }

La première option cible spécifie la version d'ES, par défaut c'est ES5. Il peut y avoir une erreur si vous le réglez sur ES6 car tous les navigateurs ne sont pas encore totalement compatibles avec lui. Vous pouvez en savoir plus sur les options du compilateur ici.

Bonnes réponses :

Capacité à expliquer ce qu'est la transpilation
Exemples de quelques transpondeurs

Drapeaux rouges :

Confusion entre compilation et transposition

Expliquer le cycle d'exécution d'une demande angulaire

Chaque application Angular aura un arbre de composants. Le composant racine est connu sous le nom de composant d'application. Examinons les composants de l'arbre des composants et ce qui constitue un composant.

Les deux premiers fichiers contiennent le style et la structure du composant de l'application. L'ensemble du code utilise des déclarations d'importation pour rendre des parties du code disponibles et des déclarations d'exportation pour rendre le code disponible au reste de l'application.

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic; 

import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment'; 
 
if (environment.production) { 
enableProdMode(); 
 } 

platformBrowserDynamic().bootstrapModule(AppModule) 
.catch(err => console.log(err)); 
;

Le fichier app.component.ts contient le code relatif à l'app component. L'annotation @Component marque la classe comme un composant angulaire et nous avons quelques métadonnées supplémentaires avec elle. Le sélecteur détermine le nom de la balise qui doit être utilisée, pour rendre ce composant. Le templateUrl spécifie l'emplacement du fichier HTML cible et le styleUrls spécifie l'emplacement des fichiers CSS. Les composants sont les éléments constitutifs des applications angulaires et une arborescence de ces composants constitue l'ensemble de l'application.

import { BrowserModule from '@angular/platform-browser' ;
import { NgModule from '@angular/core'; 
 
import { AppComponent from './app.component'; 
 
@NgModule({ 
declarations: [ 
AppComponent 
], 
imports: [ 
BrowserModule 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 
export class AppModule { }

Le fichier suivant est app.module.ts. Chaque application Angular aura au moins un de ces fichiers. L'annotation @NgModule identifie l'AppModule comme un module Angulaire et prend en compte les métadonnées pour compiler et lancer l'application. Les importations sont constituées de tous les modules importés, par défaut, nous n'aurons que le BrowserModule qui spécifie que l'application doit s'exécuter dans un navigateur. La déclaration est constituée de tous les composants créés. Bootstrap détermine les composants qui doivent être créés et insérés dans index.html.

import { Component } from '@angular/core';

@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.cssl']
}) 
export class AppComponent { 
title = 'first-app'; 
}

Si vous pensiez que c'est l'application app.component.html qui est chargée sur le navigateur, vous vous trompez. Lors de l'exécution d'une application Angular, le fichier main.ts est exécuté. En parcourant le fichier, vous remarquerez que AppModule est amorcé dans main.ts, ce qui indique à l'application de vérifier l'AppModule pour plus d'informations. À l'intérieur de l'AppModule, vous pouvez voir un tableau d'amorçage, qui pointera vers l'AppComponent dont le sélecteur sera mentionné dans l'annotation @Component et son code associé dans le fichier TS. Le sélecteur se présentera sous la forme "app-component_name", par exemple app-root. Le fichier index.html contiendra uniquement ce sélecteur particulier sans aucun autre code. Vous pouvez le vérifier en consultant le source de l'application lorsqu'elle s'exécute sur le navigateur.

Bonnes réponses :

Doit connaître le cycle d'exécution d'une demande angulaire
Doit avoir une compréhension claire de la structure des composants
Expliquer clairement chaque partie de la composante

Drapeaux rouges :

Impossible de faire la différence entre les différentes parties d'un même élément

Qu'est-ce que la CLI angulaire ? Pouvez-vous expliquer certaines des commandes les plus couramment utilisées ?

Nous avons notre propre interface en ligne de commande (CLI) qui est fournie avec Angular et qui accélère le processus de développement web. La CLI aide à démarrer un projet. Une fois que vous créez un nouveau projet, il génère la structure initiale du projet avec un NgModule racine, un composant racine. Le projet utilisera le chargeur webpack pour regrouper, charger les modules et réduire le code dépendant. Une autre fonctionnalité intéressante est le serveur en direct qu'il peut démarrer. Il recherche automatiquement les modifications apportées aux fichiers et recharge la page instantanément.

Nous obtenons également des fichiers de spectres de test de jasmin bootstrapés. A partir du CLI, nous pouvons utiliser une seule commande pour effectuer tous les tests. De la même manière que la recharge en direct sur les changements, le CLI détectera les changements apportés à n'importe quel fichier et relancera tous les tests. Nous pouvons également empaqueter notre application pour la déployer sur un serveur.

Voici quelques-unes des commandes les plus importantes et les plus couramment utilisées :

ng nouveau nom de projet : un projet portant le nom spécifié sera démarré avec ng

ng servir : Cette commande regroupera tout le code, construira l'application et sera disponible à partir de localhost:4200.

ng generate component component-name : Cette fonction permet de générer un composant avec le nom spécifié

La commande ng generate peut être utilisée avec les composants, les directives, les tuyaux, les services, les classes, les interfaces et les énumérations

Bonnes réponses :

Expérience antérieure avec la CLI
Connaissance des commandes

Drapeaux rouges :

N'ont jamais utilisé la CLI
Impossible d'expliquer les commandes
Ne peut pas donner des représentations à main levée des commandes

Comparaison entre les données obligatoires à sens unique et les données obligatoires à double sens

Avant de commencer avec les liaisons de données bidirectionnelles, examinons les liaisons de données unilatérales. La liaison de données unidirectionnelle signifie que l'inversion des données ne se produit que dans une seule direction. Il peut s'agir d'un passage de l'angulaire au HTML ou du HTML à l'angulaire, mais pas l'inverse en même temps. La liaison de données bidirectionnelle ressemble davantage à une conversation téléphonique, où les deux personnes peuvent parler en même temps. De la même manière, l'enrichissement des données peut se produire dans les deux sens en même temps.

</p>
<div class="container"><input name="" type="text" /> <br />
<h1>Hello {{name}}</h1>
</div>
<p>

La syntaxe du modèle ngModel est connue sous le nom de "banane en boîte" et sa syntaxe réelle du sucre pour [ngModel] suivi de (ngModelChange). Grâce à la liaison de données bidirectionnelle, vous pouvez lier des données entre un contrôle de formulaire modèle et une variable de votre composant. L'avantage est que, si nous changeons la valeur de la variable dans le contrôle de formulaire, cela modifie automatiquement la valeur de la variable dans notre composant. Et si nous changeons la valeur de la variable dans le composant, cela change automatiquement la valeur présente dans le contrôle de formulaire.

Bonnes réponses :

Expliquer le concept à l'aide d'un exemple approprié
Expliquez également les obligations à sens unique

Drapeaux rouges :

N'ont jamais entendu parler d'une obligation à sens unique ou à double sens
Ne peut pas citer d'exemples

Contraste entre les attributs HTML et les éléments DOM

Ces deux termes peuvent ne pas sembler liés, mais il est très important de les comprendre pour comprendre le fonctionnement de la liaison en angulaire. Comme vous le savez, le HTML définit la structure de la page. Les divs, les paragraphes, les barres de navigation, les en-têtes et les pieds de page sont tous pris en charge par HTML. Le navigateur passe par le code HTML et crée un DOM (Document Object Model). La modification d'un attribut HTML ne met à jour la page web que lorsque vous la rafraîchissez, mais lorsque vous modifiez le DOM, cela se produit instantanément.

Prenons un exemple de l'attribut caché dans le HTML. Si vous ajoutez le mot-clé caché à un élément quelconque du HTML, le navigateur sera invité à cacher cet élément particulier. Même s'il est réglé sur true ou false, il cachera l'élément, car c'est le mot "caché" qui compte. Mais si nous utilisons la propriété [cachée] dans la liaison de propriété Angular through input, ce qu'elle fait, c'est qu'elle modifie les propriétés DOM et non l'attribut HTML. Le point essentiel à retenir ici est que Angular manipule les propriétés DOM plutôt que les attributs HTML.

Bonnes réponses :

Une compréhension claire de la question et une réponse rapide
Comprendre la différence entre les attributs HTML et les éléments DOM

Drapeaux rouges :

Ne peut pas comprendre la question

Que sont les directives en angulaire ? Expliquez à l'aide d'exemples

Une directive est un élément HTML personnalisé qui améliore les capacités existantes du HTML. Par défaut, nous avons deux directives qui sont fournies avec le BrowserModule. Il s'agit de ngFor et ngIf. NgFor est une directive structurelle, ce qui signifie qu'elle modifie la structure du DOM. C'est l'équivalent de ng-repeat à partir de Angular 1s.

</p>
<ul>
<li>{{ person.name }}</li>
</ul>
<p>

Imaginez que nous ayons une série de personnes avec un attribut de nom. Nous faisons une boucle sur chaque personne du tableau de personnes avec une variable de boucle "person" et nous imprimons ensuite le nom de la personne dans une liste.

NgIf est utilisé pour supprimer ou afficher un élément basé sur une expression. Si l'expression est vraie, l'élément est affiché, sinon non. La différence entre l'attribut HTML hidden et ngIf est que dans le premier, l'élément est toujours présent dans le DOM, mais n'est pas rendu. Mais avec ngIf, l'élément lui-même est supprimé.

</p>
<ul>
<li>{{ person.name }} ({{ person.age }})</li>
</ul>
<p>

Prenons l'exemple précédent, mais en plus de l'attribut du nom, nous avons maintenant l'âge. Une fois que nous aurons passé en revue chaque personne, seules les personnes de moins de 30 ans seront affichées avec la condition ngIf.

Bonnes réponses :

Donnez un exemple pour chacune des directives
Devrait avoir une prise sur la syntaxe

Drapeaux rouges :

Aucune idée de la syntaxe
Ne sait pas ce que sont les directives

Que sont les fonctions de la flèche grasse ? Expliquez à l'aide d'un exemple

Les fonctions de la flèche de la graisse sont des fonctions anonymes enrobées de sucre. Elles font exactement la même chose que les fonctions anonymes, mais la syntaxe est légèrement différente. Il faut peut-être s'y habituer un peu, mais une fois que vous avez compris cela, il devient extrêmement simple de les écrire. Faisons le contraste entre les deux. Ci-dessous, nous avons un exemple de fonction anonyme :

let add = function(a, b){ return a+b; };

La fonction ci-dessus s'explique d'elle-même. Voici un exemple d'une fonction de flèche grasse :

let add = (a, b) =&gt; a + b;

Que pensez-vous de cela ? Toute la fonction a été considérablement réduite et nous n'avons même pas besoin d'utiliser le mot-clé return s'il n'y a qu'une seule ligne de code.

Bonnes réponses :

Explication correcte des fonctions des flèches de graisse
Différence entre les fonctions anonymes en termes de syntaxe
Exemples

Drapeaux rouges :

N'ont jamais entendu parler des fonctions des flèches de graisse
Ne peut pas donner d'exemples

Que sont les tuyaux en angulaire et comment les utiliser ?

Si vous voulez que les données soient transformées uniquement dans le modèle, vous utilisez des tuyaux. Dans tous les autres scénarios, vous devez mettre en œuvre le formatage des données dans le modèle lui-même et non par des tuyaux. Le symbole de tuyau |, est utilisé pour mettre en œuvre les tuyaux. Angular fournit beaucoup de tuyaux intégrés. Il y a des tuyaux pour la monnaie, les majuscules, les minuscules, la date, la décimale, le pourcentage, le JSON, la tranche et l'asynchrone. Regardons quelques exemples pour voir comment nous utilisons les tuyaux dans Angular.

La première valeur est la valeur réelle que vous voulez formater. Elle est suivie du symbole de la pipe et du nom de la pipe, dans ce cas, de la monnaie. Ensuite, nous précisons la monnaie dans laquelle nous voulons la convertir. Vous remarquez la valeur booléenne à la fin ? C'est pour déterminer si la sortie doit avoir le symbole du dollar ou non. Par défaut, c'est vrai et vous verrez le symbole $ au lieu de USD.

Nous avons un autre exemple de la pipe à dattes qui est très largement utilisée. Considérons que nous avons un objet dateur dans l'un de nos composants. Par défaut, il s'agit de la sortie que nous obtenons :

Maintenant, si nous appliquons certains des tuyaux de date disponibles, la sortie change à :

La plupart des résultats s'expliquent d'eux-mêmes. L'année est représentée par un "yy" à deux chiffres et l'heure et les minutes actuelles par un "Hm" au format militaire.

Bonnes réponses :

Doit donner des exemples pour chaque tuyau
Comprendre ce que sont les tuyaux et où ils sont utilisés

Drapeaux rouges :

Ne sait pas pour les tuyaux
Ne peut pas donner d'exemples

Conclusion

Avec ces questions d'entretien, nous avons couvert certains des principes fondamentaux d'Angular et aussi quelques sujets que les gens négligent généralement. N'oubliez pas que la clarté avec laquelle vous expliquez les concepts et les exemples que vous pouvez citer à l'interviewer vous mènera jusqu'au bout.

Le guide ultime des questions d'entretien d'embauche

Questions d'entretien angulaires 2

What are the differences between AngularJS and Angular?

Comment une application Angular écrite en TypeScript fonctionne-t-elle sur un navigateur ?

Expliquer le cycle d'exécution d'une demande angulaire

Qu'est-ce que la CLI angulaire ? Pouvez-vous expliquer certaines des commandes les plus couramment utilisées ?

Comparaison entre les données obligatoires à sens unique et les données obligatoires à double sens

Contraste entre les attributs HTML et les éléments DOM

Que sont les directives en angulaire ? Expliquez à l'aide d'exemples

Que sont les fonctions de la flèche grasse ? Expliquez à l'aide d'un exemple

Que sont les tuyaux en angulaire et comment les utiliser ?

Conclusion

Le guide ultime des questions d'entretien d'embauche

Questions d'entretien angulaires 2

What are the differences between AngularJS and Angular?

Comment une application Angular écrite en TypeScript fonctionne-t-elle sur un navigateur ?

Expliquer le cycle d'exécution d'une demande angulaire

Qu'est-ce que la CLI angulaire ? Pouvez-vous expliquer certaines des commandes les plus couramment utilisées ?

Comparaison entre les données obligatoires à sens unique et les données obligatoires à double sens

Contraste entre les attributs HTML et les éléments DOM

Que sont les directives en angulaire ? Expliquez à l'aide d'exemples

Que sont les fonctions de la flèche grasse ? Expliquez à l'aide d'un exemple

Que sont les tuyaux en angulaire et comment les utiliser ?

Conclusion

Le guide ultime des questions d'entretien d'embauche

Questions d'entretien angulaires 2

What are the differences between AngularJS and Angular?

Comment une application Angular écrite en TypeScript fonctionne-t-elle sur un navigateur ?

Expliquer le cycle d'exécution d'une demande angulaire

Qu'est-ce que la CLI angulaire ? Pouvez-vous expliquer certaines des commandes les plus couramment utilisées ?

Comparaison entre les données obligatoires à sens unique et les données obligatoires à double sens

Contraste entre les attributs HTML et les éléments DOM

Que sont les directives en angulaire ? Expliquez à l'aide d'exemples

Que sont les fonctions de la flèche grasse ? Expliquez à l'aide d'un exemple

Que sont les tuyaux en angulaire et comment les utiliser ?

Conclusion

Le guide ultime des questions d'entretien d'embauche

Questions d'entretien angulaires 2

What are the differences between AngularJS and Angular?

Comment une application Angular écrite en TypeScript fonctionne-t-elle sur un navigateur ?

Expliquer le cycle d'exécution d'une demande angulaire

Qu'est-ce que la CLI angulaire ? Pouvez-vous expliquer certaines des commandes les plus couramment utilisées ?

Comparaison entre les données obligatoires à sens unique et les données obligatoires à double sens

Contraste entre les attributs HTML et les éléments DOM

Que sont les directives en angulaire ? Expliquez à l'aide d'exemples

Que sont les fonctions de la flèche grasse ? Expliquez à l'aide d'un exemple

Que sont les tuyaux en angulaire et comment les utiliser ?

Conclusion

Le guide ultime des questions d'entretien d'embauche

Questions d'entretien angulaires 2

What are the differences between AngularJS and Angular?

Comment une application Angular écrite en TypeScript fonctionne-t-elle sur un navigateur ?

Expliquer le cycle d'exécution d'une demande angulaire

Qu'est-ce que la CLI angulaire ? Pouvez-vous expliquer certaines des commandes les plus couramment utilisées ?

Comparaison entre les données obligatoires à sens unique et les données obligatoires à double sens

Contraste entre les attributs HTML et les éléments DOM

Que sont les directives en angulaire ? Expliquez à l'aide d'exemples

Que sont les fonctions de la flèche grasse ? Expliquez à l'aide d'un exemple

Que sont les tuyaux en angulaire et comment les utiliser ?

Conclusion

Le guide ultime des questions d'entretien d'embauche

Questions d'entretien angulaires 2

What are the differences between AngularJS and Angular?

Comment une application Angular écrite en TypeScript fonctionne-t-elle sur un navigateur ?

Expliquer le cycle d'exécution d'une demande angulaire

Qu'est-ce que la CLI angulaire ? Pouvez-vous expliquer certaines des commandes les plus couramment utilisées ?

Comparaison entre les données obligatoires à sens unique et les données obligatoires à double sens

Contraste entre les attributs HTML et les éléments DOM

Que sont les directives en angulaire ? Expliquez à l'aide d'exemples

Que sont les fonctions de la flèche grasse ? Expliquez à l'aide d'un exemple

Que sont les tuyaux en angulaire et comment les utiliser ?

Conclusion

Le guide ultime des questions d'entretien d'embauche

Questions d'entretien angulaires 2

What are the differences between AngularJS and Angular?

Comment une application Angular écrite en TypeScript fonctionne-t-elle sur un navigateur ?

Expliquer le cycle d'exécution d'une demande angulaire

Qu'est-ce que la CLI angulaire ? Pouvez-vous expliquer certaines des commandes les plus couramment utilisées ?

Comparaison entre les données obligatoires à sens unique et les données obligatoires à double sens

Contraste entre les attributs HTML et les éléments DOM