Maison >interface Web >js tutoriel >50 questions d'entretien angulaires que vous devez maîtriser (Collection)
50 questions d'entretien angulaires que vous devez maîtriser (Collection)
- 青灯夜游avant
- 2021-07-23 10:12:509786parcourir
Cet article partagera avec vous 50 questions d'entretien Angulaires que vous devez maîtriser. Ces 50 questions d'entretien seront analysées en trois parties : débutant-intermédiaire-avancé, et vous aideront à bien les comprendre !
Nous avons compilé une liste des principales questions d'entretien angulaire divisées en trois parties :
- Questions d'entretien angulaires – Niveau débutant
- Questions d'entretien angulaires – Intermédiaire
- Questions d'entretien angulaires – Avancé
[Recommandations de tutoriel associées : "Tutoriel angulaire"]
Niveau débutant – Questions d'entretien
1. Faites la distinction entre Angular et AngularJS.
|
AngularJS | Angulaire | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Architecture | Prise en charge de la conception MVC Modèle | Utiliser les composants et les directives | ||||||||||||||||||||||||||||||
| Langue | Langue recommandée : JavaScript | Langage recommandé : TypeScript | ||||||||||||||||||||||||||||||
| Syntaxe d'expression | Image / Les attributs et les événements nécessitent des instructions ng spécifiques | Utilisez () pour lier des événements et [] pour la liaison d'attributs | ||||||||||||||||||||||||||||||
| Prise en charge mobile | Aucune assistance mobile | Assistance mobile fournie | ||||||||||||||||||||||||||||||
| Routage | $ routeprovider.when() est utilisé pour la configuration du routage | @RouteConfig {(…)} est utilisé pour la configuration du routage | tr>||||||||||||||||||||||||||||||
| Injection de dépendances | Ne prend pas en charge le concept d'injection de dépendances | Prend en charge les modifications unidirectionnelles basées sur une arborescence Détectée injection de dépendances hiérarchiques | ||||||||||||||||||||||||||||||
| Structure | Ingérable | La structure simplifiée rend le développement et la maintenance des applications volumineuses plus faciles | ||||||||||||||||||||||||||||||
| Vitesse | Les efforts et le temps de développement sont réduits grâce à deux liaison de données de manière | Mise à niveau des fonctionnalités plus rapide qu'AngularJS | ||||||||||||||||||||||||||||||
| Supporté | Ne fournit plus de support ni de nouvelles mises à jour | Support actif et nouvelles mises à jour fréquentes |
2. Qu'est-ce qu'Angular ?
Angular est un framework web front-end open source. Il s'agit de l'un des frameworks JavaScript les plus populaires et il est principalement géré par Google. Il fournit une plate-forme permettant de développer facilement des applications Web et permet aux développeurs front-end de gérer des applications multiplateformes. Il intègre des fonctionnalités puissantes telles que des modèles déclaratifs, des outils de bout en bout, l'injection de dépendances et diverses autres bonnes pratiques qui rendent le chemin de développement plus fluide.
3. Quels sont les avantages d'utiliser Angular ?
Vous trouverez ci-dessous quelques-uns des principaux avantages de l'utilisation du framework Angular :
- Prend en charge la liaison de données bidirectionnelle
- Il suit le MVC architecture de modèles
- Il prend en charge les modèles statiques et les modèles angulaires
- Vous pouvez ajouter des directives personnalisées
- Il prend également en charge le service RESTfull
- Prend en charge la validation
- La communication client entre le client et le serveur est facilitée
- Prend en charge l'injection de dépendances
- Possède des fonctionnalités puissantes telles que des gestionnaires d'événements, des animations, etc.
4. À quoi sert principalement Angular ?
Angular est souvent utilisé pour le développement de SPA qui représentent des applications d'une seule page. Angular fournit un ensemble de modules prêts à l'emploi qui simplifient le développement d'applications monopage. De plus, Angular est considéré comme un framework Web mature avec des fonctionnalités intégrées de flux de données, de sécurité des types et de CLI modulaire.
5. Qu'est-ce qu'une expression d'angle ?
Les expressions angulaires sont des extraits de code de type JavaScript qui sont généralement placés dans des liaisons telles que {{expression}}. Ces expressions sont utilisées pour lier les données d'application au HTML
Syntaxe : {{expression}}
6. Modèles en angulaire Qu'est-ce que c'est ?
Les modèles en Angular sont écrits en utilisant du HTML qui contient des éléments et des attributs spécifiques à Angular. Ces modèles sont combinés avec les informations du modèle et du contrôleur, qui sont ensuite restituées pour fournir des vues dynamiques à l'utilisateur.
7. Qu'est-ce que l'interpolation de chaîne dans Angular ?
L'interpolation de chaînes dans Angular est une syntaxe spéciale qui utilise des expressions de modèle entre doubles accolades **{{}} pour afficher les données des composants. Elle est également connue sous le nom de syntaxe Moustache. **Les expressions JavaScript sont placées entre accolades, exécutées par Angular, et la sortie relative est ensuite intégrée dans le code HTML. Ces expressions sont généralement mises à jour et enregistrées comme des tables dans le cadre d'une boucle digest.
8. Quelle est la différence entre Annotation et Décorateur dans Angular ?
Grâce à la bibliothèque Reflect Metadata, les annotations angulaires sont le "seul" ensemble de métadonnées pour une classe. Ils sont utilisés pour créer des tableaux « annotations ». Les décorateurs, quant à eux, sont un modèle de conception utilisé pour décorer ou modifier une classe de manière isolée sans réellement modifier le code source d'origine.
9. Que savez-vous des contrôleurs dans Angular ?
Les contrôleurs sont des fonctions JavaScript qui fournissent des données et une logique à l'interface utilisateur HTML. Comme leur nom l'indique, ils contrôlent la manière dont les données circulent du serveur vers l'interface utilisateur HTML.
10. Quelle est la portée d'Angular ?
Une portée dans Angular est un objet qui fait référence au modèle d'application. C'est le contexte d'exécution de l'expression. Les étendues sont organisées selon une hiérarchie qui imite la structure du DOM de l'application. Les étendues peuvent surveiller les expressions et propager les événements.
11. Quelles sont les directives en Angular ?
Une fonctionnalité essentielle d'Angular réside dans les directives, qui sont des attributs qui vous permettent d'écrire une nouvelle syntaxe HTML spécifique à l'application. Ce sont essentiellement des fonctions qui sont exécutées lorsque le compilateur Angular les trouve dans le DOM. Les directives angulaires sont divisées en trois parties :
Directives de composants
Directives structurelles
Directives d'attribut
12. Qu'est-ce que la liaison de données ?
Dans Angular, la liaison de données est l'une des fonctionnalités les plus puissantes et les plus importantes qui vous permet de définir la communication entre vos composants et le DOM (Document Object Model). Il simplifie radicalement le processus de définition d'applications interactives sans avoir à se soucier de transférer et d'extraire des données entre des vues ou des modèles et des composants. Dans Angular, il existe quatre formes de liaison de données :
Interpolation de chaîne
Liaison de propriété
Liaison d'événement
Liaison de données bidirectionnelle
13. Utiliser des filtres dans Angular Quel est le but ?
Les filtres dans Angular sont utilisés pour formater la valeur d'une expression afin qu'elle puisse être affichée à l'utilisateur. Ces filtres peuvent être ajoutés à des modèles, des directives, des contrôleurs ou des services. Non seulement cela, vous pouvez également créer vos propres filtres personnalisés. En les utilisant, vous pouvez facilement organiser vos données afin qu'elles n'apparaissent que lorsque des conditions spécifiques sont remplies. Ajoutez le filtre à l’expression en utilisant le caractère barre verticale |, suivi du filtre.
14. Quelle est la différence entre Angular et jQuery ?
|
jQuery | Angulaire | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Opérations DOM | est | est | ||||||||||||||||||||||||
| Oui |
||||||||||||||||||||||||||
| Routage de liens profonds | Non | |||||||||||||||||||||||||
| Validation du formulaire | Non | Oui | ||||||||||||||||||||||||
| Liaison de données bidirectionnelle | Non | est | ||||||||||||||||||||||||
| AJAX/JSONP | est | est |
17. Comment distinguer les expressions angulaires et les expressions JavaScript ?
18. Répertoriez les moyens de communiquer entre les modules d'application à l'aide des fonctionnalités angulaires de base. Ce qui suit est le moyen le plus courant de communiquer entre les modules d'application à l'aide des fonctionnalités angulaires de base : 19. Qu'est-ce que c'est. la différence entre service() et factory() ? service() dans Angular est une fonction utilisée dans la couche métier de l'application. Il s'exécute en tant que constructeur et est appelé une fois au moment de l'exécution à l'aide du mot-clé 'new'. Factory() est une fonction similaire à service(), mais plus puissante et flexible. factory() est un modèle de conception qui aide à créer des objets. 20. Quelle est la différence entre $scope et scope dans Angular ? 21. Expliquer le concept de hiérarchie de portée ? e.. AOT signifie compilateur Angular-Ahead-of-Time. Il est utilisé pour précompiler les composants d'application et leurs modèles pendant le processus de construction. Les applications angulaires compilées avec AOT ont des temps de démarrage plus courts. De même, les composants de ces applications peuvent être exécutés immédiatement sans aucune compilation côté client. Les modèles de ces applications sont intégrés sous forme de code dans leurs composants. Cela réduit le besoin de télécharger le compilateur Angular, vous évitant ainsi des tâches fastidieuses. Le compilateur AOT peut supprimer les instructions inutilisées, qui sont ensuite supprimées à l'aide d'outils d'arborescence. 23. Expliquez jQLite. jQlite également connu sous le nom de jQuery lite est un sous-ensemble de jQuery et inclut toutes ses fonctionnalités. Par défaut, il est packagé en Angular. Il aide Angular à manipuler le DOM de manière compatible avec plusieurs navigateurs. jQLiteFondamentalement, n'implémente que les fonctions les plus couramment utilisées, cela prend donc peu de place. 24. Expliquer le processus de boucle récapitulative dans Angular ? Le cycle récapitulatif dans Angular est le processus de surveillance d'une liste de surveillance pour suivre les changements dans la valeur d'une variable de surveillance. Dans chaque boucle de résumé, Angular compare la version précédente de la valeur du modèle de portée avec la nouvelle version. Normalement, ce processus est déclenché implicitement, mais vous pouvez également l'activer manuellement en utilisant $apply(). 25. Qu'est-ce qu'un module angulaire ? Toutes les applications Angular sont modulaires et suivent un système modulaire appelé NgModules. Ces conteneurs contiennent des blocs de code cohérents dédiés à un domaine d'application, un flux de travail ou un ensemble de fonctions étroitement liées. Ces modules contiennent généralement des composants, des fournisseurs de services et d'autres fichiers de code, dont la portée est définie par le NgModule contenant. Avec les modules, le code devient plus maintenable, testable et lisible. De même, toutes les dépendances d'une application sont généralement définies uniquement dans des modules. 26. Sur quel type de composant peut-on créer des directives personnalisées ? Angular prend en charge la création de directives personnalisées pour : 27. Quels sont les différents types de filtres dans Angular ? Voici les différents filtres pris en charge par Angular : 28. Qu'est-ce que l'injection de dépendances dans Angular ? L'injection de dépendances (DI) est un modèle de conception logicielle dans lequel les objets sont transmis en tant que dépendances au lieu d'être codés en dur dans des composants. Le concept d'injection de dépendances s'avère utile lorsque vous essayez de séparer la logique de création d'objet de la logique d'utilisation de l'objet. L'opération "config" utilise DI, qui doit être préconfiguré lors du chargement d'un module pour récupérer des éléments de l'application. Grâce à cette fonctionnalité, les utilisateurs peuvent modifier les dépendances selon leurs besoins. 29. Faites la distinction entre la liaison unidirectionnelle et la liaison de données bidirectionnelle. Dans la liaison de données unidirectionnelle, chaque fois que le modèle de données est modifié, la partie vue ou interface utilisateur ne sera pas mise à jour automatiquement. Vous devrez écrire manuellement du code personnalisé pour mettre à jour la vue à chaque fois qu'elle change. En liaison de données bidirectionnelle, une fois le modèle de données modifié, la partie vue ou interface utilisateur est mise à jour implicitement. Contrairement à la liaison de données unidirectionnelle, il s'agit d'un processus synchrone. 30. Quels sont les crochets du cycle de vie des composants et des directives ? Les composants angulaires ont un cycle de vie discret qui contient différentes étapes de transition de la naissance à la mort. Pour avoir un meilleur contrôle sur ces étapes nous pouvons les connecter en utilisant : 31. Qu'apprenez-vous en effectuant des vérifications sales sur Angular ? Dans Angular, le processus de résumé est appelé dirty check. Il est appelé parce qu'il analyse toute la plage à la recherche de modifications. En d’autres termes, il compare toutes les nouvelles valeurs du modèle de portée aux valeurs de portée précédentes. Étant donné que toutes les variables de surveillance sont contenues dans une seule boucle, toute modification/mise à jour d'une variable entraînera la réaffectation du reste des variables de surveillance présentes dans le DOM. Les variables surveillées sont dans une seule boucle (boucle récapitulative) et tout changement de valeur d'une variable réaffectera les valeurs des autres variables surveillées dans le DOM 32. Différencier DOM et Nomenclature. 33. Qu'est-ce que le transpiling en angulaire ? La compilation en Angular fait référence au processus de conversion du code source d'un langage de programmation à un autre. Généralement, dans Angular, cette conversion s'effectue de TypeScript vers JavaScript. Il s’agit d’un processus implicite qui se produit en interne. 34. Comment réaliser une animation dans Angular ? Pour réaliser une animation dans une application Angular, vous devez inclure quelque chose appelé Animate Library. bibliothèque angulaire spéciale, puis référencez le module ngAnimate dans votre application ou ajoutez ngAnimate en tant que dépendance dans votre module d'application. 35. Que sont les inclusions dans Angular ? Les inclusions dans Angular vous permettent de déplacer les enfants d'origine d'une directive vers un emplacement spécifique dans un nouveau modèle. La directive ng indique que le point d'insertion du DOM contenu de la directive parent la plus proche de la directive contenue est utilisé. Les directives d'attribut telles que ng-transclude ou ng-transclude-slot's sont principalement utilisées pour l'inclusion. 36. Que sont les événements dans Angular ? Les événements dans Angular sont des directives spécifiques qui permettent de personnaliser le comportement de divers événements DOM. Les événements pris en charge par Angular sont répertoriés ci-dessous : 37. Listez quelques outils pour tester les applications angulaires ? Karma Mocks angulaires Moka Browserify Sion 38. Comment créer un service en Angular ? Dans Angular, les services sont des objets remplaçables qui sont connectés ensemble à l'aide de l'injection de dépendances. Créez un service en l'enregistrant dans un module où il doit être exécuté. Fondamentalement, vous pouvez créer un service angulaire de trois manières. Fondamentalement, il existe trois façons de créer des services dans Angular : 39. Qu'est-ce que le modèle singleton et peut-il être trouvé dans Angular ? Le modèle Singleton dans Angular est un excellent modèle qui empêche une classe d'être utilisée plusieurs fois. Le modèle Singleton dans Angular est principalement implémenté dans l'injection de dépendances et les services. Ainsi, si vous n'utilisez pas "new Object()" sans en faire un singleton, deux emplacements de stockage différents vous seront attribués pour le même objet. Alors que si vous déclarez l’objet comme singleton, il sera simplement réutilisé s’il existe déjà en mémoire. 40. Que savez-vous de REST en Angular ? REST signifie REApparencePetit compteGrand patronGénialTransfert (BOT). REST est un style API (Application Programming Interface) pour les requêtes HTTP. Dans ce cas, l'URL demandée identifie les données à traiter. La méthode HTTP identifiera alors l'opération spécifique qui doit être effectuée sur les données demandées. Par conséquent, les API qui suivent cette approche sont appelées API RESTful. 41. Qu'est-ce que le bootstrap dans Angular ? Le bootstrapping dans Angular consiste simplement à initialiser ou à démarrer une application Angular. Angular prend en charge le bootstrap automatique et manuel. 42. Quelle est la différence entre lier et compiler en Angular ? 43. Que savez-vous des constantes dans Angular ? Dans Angular, les constantes sont comme des services utilisés pour définir des données globales. Les constantes sont déclarées à l'aide du mot-clé "constant". Ils sont créés à l'aide de dépendances constantes et peuvent être injectés n'importe où dans un contrôleur ou un service. 44. Quelle est la différence entre les fournisseurs, les services et les usines d'Angular ? 45. Qu'est-ce que l'API Angular Global ? Angular Global API est une combinaison de fonctions JavaScript globales utilisées pour effectuer diverses tâches courantes telles que : Il existe certaines fonctions courantes de l'API Angular Global telles que : 46. Dans Angular, décrivez comment définir, obtenir et effacer les cookies ? Pour utiliser des cookies dans Angular, vous devez inclure un module appelé ngCookies angulaire-cookies.js. Définir les cookies – Pour définir les cookies au format clé-valeur, utilisez la méthode « put ». **Obtenir des cookies –**Pour obtenir des cookies, la méthode « get » est utilisée. **Effacer les cookies –** Utilisez la méthode « Supprimer » pour supprimer les cookies. 47. Si votre modèle de données est mis à jour en dehors de la « zone », veuillez expliquer le processus, comment le verrez-vous ? Vous pouvez mettre à jour la vue en utilisant l'un des éléments suivants : ApplicationRef.prototype.tick() : Il effectuera une détection des modifications sur l'ensemble de l'arborescence des composants. **NgZone.prototype.run():** Il effectuera une détection des changements sur l'ensemble de l'arborescence des composants. Ici, le run() sous le capot appellera le tick lui-même, puis les paramètres obtiendront la fonction avant le tick et l'exécuteront. **ChangeDetectorRef.prototype.detectChanges():** Il lancera la détection des modifications sur le composant actuel et ses sous-composants. 48. Expliquez la directive ng-app en Angular. La directive ng-app est utilisée pour définir les applications angulaires, nous permettant d'utiliser le démarrage automatique dans les applications angulaires. Il représente l'élément racine d'une application Angular et est généralement déclaré à proximité de la balise ou. N'importe quel nombre de directives ng-app peuvent être définies dans un document HTML, mais seule une application angulaire peut être implicitement et formellement amorcée. Les applications restantes doivent être démarrées manuellement. Exemple 49 Quel est le processus d'insertion d'une vue intégrée à partir d'un TemplateRef préparé ? 50. Comment masquer des éléments HTML simplement en cliquant sur le bouton du coin ? Les éléments HTML peuvent être facilement masqués avec votre contrôleur en utilisant la directive ng-hide pour masquer les éléments HTML lors d'un clic sur un bouton. View Controller Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !
Expression angulaire
Expression JavaScript
1. Ils peuvent contenir des littéraux, des opérateurs et des variables.
1. Ils peuvent contenir des littéraux, des opérateurs et des variables.
2. Ils peuvent être écrits dans des balises HTML.
2. Ils ne peuvent pas être écrits dans des balises HTML.
3. Ils ne prennent pas en charge les conditions, les boucles et les exceptions.
3. Ils prennent en charge les conditions, les boucles et les exceptions.
4. Ils prennent en charge les filtres.
4. Ils ne prennent pas en charge les filtres.
Controller 'n' $scope
DOM
DOM
物料清单
1.代表文档对象模型
1.代表浏览器对象模型
2.表示网页的内容
2.在网页上方工作，并包含浏览器属性
3.所有对象都以树状结构排列，并且只能通过提供的API来操作和访问文档
3.所有全局JavaScript对象，变量和函数都隐式地成为window对象的成员
4.处理HTML文档
4.访问和操纵浏览器窗口
5. W3C推荐的标准规格
5.每个浏览器都有自己的实现
Nomelle de matériaux
<. tr> 1. Représente le modèle objet du document
1 Représente le modèle objet du navigateur
2. Représente le contenu de la page Web
2 Fonctionne au-dessus de la page Web et contient les propriétés du navigateur
3. sont en forme d'arborescence. La structure est organisée et le document ne peut être manipulé et accessible que via l'API fournie
3. Tous les objets, variables et fonctions JavaScript globaux deviennent implicitement membres de l'objet fenêtre
4. Traiter les documents HTML
4. Accéder et manipuler les fenêtres du navigateur
5. W3C 5. Chaque navigateur a sa propre implémentation
提供者
服务
厂
提供程序是一种可以将应用程序的一部分传递到app.config中的方法
服务是一种用于创建以'new'关键字实例化的服务的方法。
这是用于创建和配置服务的方法。在这里，您可以创建一个对象，向其中添加属性，然后返回相同的对象，并将工厂方法传递到控制器中。
Niveau avancé – Questions d'entretien
cookie.set("nameOfCookie","cookieValue");cookie.get（"nameOfCookie"）;
cookie.delete（"nameOfCookie"）;
<div ng-app=“myApp” ng-controller=“myCtrl”>
First Name :
<input type=“text” ng-model=“firstName”>
<br />
Last Name :
<input type=“text” ng-model=“lastName”>
<br>
Full Name: {{firstName + ” ” + lastName }}
</div>@Component({
selector: 'app-root',
template: `
<ng-template #template let-name='fromContext'><div>{{name}}</ng-template>
`
})
export class AppComponent implements AfterViewChecked {
@ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;
constructor() { }
ngAfterViewChecked() {
this.vc.createEmbeddedView(this._template, {fromContext: 'John'});
}
}<div ng-controller ="MyController">
<button ng-click ="hide()">欢迎关注全栈程序员社区公众号</ button>
<p ng-hide ="isHide">欢迎关注Java架构师社区公众号！</ p>
</ div>
controller: function() {
this.isHide = false;
this.hide = function(){
this.isHide = true;
};
}
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une brève discussion sur la façon dont RxJS mappe les opérations de données dans Angular
- Comment améliorer les performances des applications Angular utilisant des pipes ?
- Parlons brièvement du moteur de modèles angulaires ng-template
- Parlons des variables d'entrée de modèle (let-variables) dans Angular
- Parlons de la façon de modifier les fichiers .css en fichiers .scss dans les projets angulaires
- Une brève discussion sur la façon d'ajouter et d'utiliser Font Awesome dans Angular