Compilation de questions d'entretien Angular8+ : analyse des points de connaissances de base

Cet article triera et partagera avec vous quelques questions d'entretien basées sur Angular8+, et vous donnera une compréhension approfondie des points de connaissances de base d'Angular8+. J'espère qu'il vous sera utile !

Recommandations associées : Résumé des questions d'entretien Big Front-end 2022 (Collection)

À propos de la CLI angulaire

La CLI angulaire, également connue sous le nom d'échafaudage angulaire, est utilisée pour générer rapidement le cadre de projets ou de composants. pour améliorer l'efficacité. Les applications, composants, services, etc. angulaires peuvent être facilement générés et peuvent être créés selon vos propres besoins via des paramètres. On peut dire que c'est un outil indispensable pour le développement angulaire. [Recommandations de didacticiel associées : "Tutoriel angulaire"]
Référence : https://cli.angular.io/

• ng generate : Créer de nouveaux composants, services, canaux, classes, etc.
• ng new : Créer un nouveau angulaire app
• ng update : mettre à niveau angulaire lui-même et ses dépendances
• ng version : afficher la version globale d'angular cli et les versions locales d'angular cli, du code angulaire, etc.
• ng add : ajouter une nouvelle bibliothèque tierce . Il fera 2 choses, 1) installer node_modules basé sur npm, 2) modifier automatiquement le fichier de configuration pour garantir que les nouvelles dépendances fonctionnent correctement

À propos de l'injection de dépendances d'Angular (injection de dépendances)

L'injection de dépendances est un type d'Angular Les modèles de conception d'applications sont l'un des concepts fondamentaux d'Angular.

Une dépendance est un service avec une série de fonctions. Divers composants et directives (dérictifs) dans l'application peuvent nécessiter les fonctions du service. Angular fournit un mécanisme fluide grâce auquel nous pouvons injecter ces dépendances dans nos composants et directives. Nous construisons donc simplement des dépendances qui peuvent être injectées entre tous les composants de l'application.

L'utilisation de l'injection de dépendances présente également les avantages suivants :

1. Pas besoin d'instancier (nouvelle instance). Vous n'avez pas à vous soucier des paramètres nécessaires dans le constructeur de la classe
2. Une fois injectés (le module d'application est injecté via les fournisseurs), tous les composants peuvent être utilisés. De plus, la même instance de service (Singleton) est utilisée, ce qui signifie que les données d'un service sont partagées et peuvent être utilisées pour le transfert de données entre les composants.

À propos de la compilation angulaire, la différence entre AOT et JIT

Chaque application Angular contient des composants et des modèles que le navigateur ne peut pas comprendre. Par conséquent, toutes les applications Angular doivent être compilées avant de s'exécuter dans le navigateur.

Angular propose deux types de compilation :

• Compilation JIT (Just-in-Time)
• Compilation AOT (Ahead-of-Time)

La différence est que dans la compilation JIT, l'application navigue pendant l'exécution de la compilation se fait à l'intérieur du compilateur alors que dans la compilation AOT, l'application est compilée pendant le temps de construction.
Évidemment, la compilation AOT présente de nombreux avantages, c'est donc la méthode de compilation par défaut d'Angular. Avantages clés

• Étant donné que l'application est compilée avant d'être exécutée dans le navigateur, le navigateur charge le code exécutable et restitue l'application immédiatement, ce qui entraîne un rendu plus rapide.
• Dans la compilation AOT, le compilateur enverra des fichiers HTML et CSS externes avec l'application, éliminant ainsi les requêtes AJAX distinctes pour ces fichiers source, réduisant ainsi les requêtes ajax.
• Les développeurs peuvent détecter et gérer les erreurs pendant la phase de construction, ce qui permet de minimiser les erreurs.
• Le compilateur AOT ajoute du HTML et des modèles aux fichiers JS avant de les exécuter dans le navigateur. Par conséquent, il n’y a pas de fichiers HTML redondants à lire, ce qui offre une meilleure sécurité à l’application.

Liaison bidirectionnelle angulaire

Le principe de la liaison bidirectionnelle angulaire

La liaison bidirectionnelle d'Angular est implémentée via une vérification des données sales (Dirty check).

• Le principe de base de la détection des valeurs sales est de stocker l'ancienne valeur et, lors de la détection, de comparer la nouvelle valeur du moment actuel avec l'ancienne valeur. S'ils sont égaux, il n'y a pas de changement. Sinon, un changement est détecté et la vue doit être mise à jour.

• Il y a Zone.js dans angulaire2. Pour setTimeout, addEventListener, promise, etc. sont tous exécutés dans ngZone (en d'autres termes, ils sont encapsulés et réécrits par zone.js). Angular configure le hook correspondant dans ngZone, informe angulaire2 d'effectuer le traitement de vérification sale correspondant et puis met à jour le DOM.

Problème d'efficacité de la liaison bidirectionnelle angulaire

Pour les situations où il y a un très grand nombre d'éléments DOM (des centaines ou des milliers) qui doivent être liés dans la page, des problèmes d'efficacité seront inévitablement rencontrés. (Les spécificités dépendent également des performances du PC et du navigateur). De plus, si le sale check dépasse 10 fois (valeur d'expérience ?), on considère qu'il y a un problème avec le programme et aucun autre contrôle ne sera effectué.
Vous pouvez l'éviter des manières suivantes

• Pour les données qui sont uniquement utilisées pour l'affichage, utilisez la liaison unidirectionnelle au lieu de la liaison bidirectionnelle

   ;

• Le flux de données d'Angular est descendant, circulant dans une direction des composants parents vers les composants enfants. Le flux de données unidirectionnel garantit une détection efficace et prévisible des changements. La composantisation est donc également un moyen d’améliorer les performances.

• Écrivez une logique moins complexe dans les expressions (et les fonctions appelées par les expressions)

• Ne connectez pas de tuyaux trop longs (souvent le tuyau traversera et générera de nouveaux tableaux, tuyau dans anglarJS (v1) (appelé filtre)

• Stratégie de détection de changement onPush. Angular a deux stratégies de détection de changement. La valeur par défaut est la stratégie de détection des changements par défaut d'Angular, qui est le contrôle sale mentionné ci-dessus (vérifiez toutes les valeurs tant qu'elles changent). Les développeurs peuvent mettre en place une méthode de détection des changements plus efficace selon le scénario : onPush. La stratégie onPush signifie que le composant n'effectuera une détection de changement que lorsque la référence aux données d'entrée change ou qu'un événement est déclenché.

• NgFor doit être utilisé avec l'équation trackBy. Sinon, NgFor mettra à jour le DOM pour chaque élément de la liste lors de chaque processus de détection de valeur sale.

Trois façons de liaison de données angulaires

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

• Liaison directe : dans la plupart des cas, c'est la meilleure façon de procéder.

• Le résultat de l'appel de la méthode de liaison : lors de chaque processus de détection de valeur sale, l'équation des classes doit être appelée une fois. S’il n’y a pas de besoins particuliers, cette méthode d’utilisation doit être évitée autant que possible.

• Méthode pipe : elle est similaire à la fonction de liaison, et la classe de détection de valeur salePipe sera appelée à chaque fois. Cependant, Angular a optimisé le canal et ajouté une mise en cache. Si l'élément est égal à la dernière fois, le résultat sera renvoyé directement.

Pour plus de conseils d'optimisation, reportez-vous aux conseils d'optimisation des performances sur la liaison angulaire (vérification sale)

À propos du module d'angular

Qu'est-ce que le module d'angular

Le module (Module) est un module que nous pouvons Un endroit pour regrouper les composants, les services et les tuyaux. Les modules décident si d'autres modules peuvent utiliser des composants, des directives, etc. en exportant ou en masquant ces éléments. Chaque module est défini à l'aide du décorateur @NgModule.

La différence entre le module racine et le module de fonctionnalités.

Chaque application Angular ne peut avoir qu'un seul module racine (Root Module), et elle peut avoir un ou plusieurs modules de fonctionnalités (Feature Module). Le module racine importe BrowserModule, tandis que le module fonction importe CommonModule.

Module Lazy-loading

Lorsqu'un projet devient volumineux, afin d'améliorer la vitesse de chargement du premier écran, vous pouvez utiliser le Lazy-loading pour charger uniquement lorsque certaines URL spécifiques sont accessibles. pas couramment utilisé.

Mise en œuvre : créez un module de fonctionnalités normalement et modifiez la configuration du routage. Par exemple :

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

De cette façon, après compilation, ce module de fonctionnalités sera un js indépendant. Ce n'est que lorsque l'utilisateur accédera à l'url (~/customers) que ce js indépendant sera demandé au serveur, puis chargé et exécuté. .

Reportez-vous à https://angular.io/guide/lazy-loading-ngmodules

Qu'est-ce qu'une directive ?

La directive est utilisée pour ajouter un comportement à un élément (DOM) ou un composant (Component) existant.
En même temps, plusieurs instructions peuvent être appliquées à un élément ou un composant.

La différence entre Promise et Observable

Tout d'abord, la nouvelle version d'anuglar recommande d'utiliser Observable (appartenant à RxJS). Deuxièmement, pour les objets Observable, vous pouvez utiliser .toPromise() pour les convertir en objets Promise.

• Promesse, qu'il soit alors appelé ou non. Les promesses sont exécutées immédiatement ; les observables ne sont créés et exécutés que lorsqu'ils sont appelés (abonnement).

• Promise renvoie une valeur ; Observable renvoie 0 à N valeurs. Ainsi, l'opérateur correspondant à Promise est .then(), et l'opérateur correspondant à Observable est .subscribe

• Observable Il prend également en charge les opérateurs map, filter, reduction et similaires

• Observable peut être annulé, mais Promise ne peut pas.

Si vous souhaitez améliorer les performances d'Angular

Angular est toujours une application Web, les techniques générales pour améliorer les performances Web sont donc universelles. Pour Angular, il existe des techniques d'optimisation spéciales :

• Compilation AOT. Comme mentionné précédemment, ne compilez pas côté client
• L'application a été minimisée (uglify et arbre tremblant)
• Les instructions d'importation inutiles ont été supprimées. S’il reste des restes, ils seront également inclus lors de l’emballage.
• Assurez-vous que les bibliothèques tierces inutilisées ont été supprimées de l'application. Comme ci-dessus.
• Lorsque le projet est de grande envergure, pensez au lazy chargement (Lazy Loading) pour assurer la vitesse de chargement de la page d'accueil.

Comment mettre à niveau la version angulaire

Angular CLI fournit une commande de mise à niveau (ng update). En même temps, le site officiel (https://update.angular.io/) dispose également d'un guide de mise à niveau. Après avoir sélectionné la version à partir de laquelle mettre à niveau, des commandes de mise à niveau étape par étape seront données, exécutez-les simplement directement.

Pour plus de connaissances sur la programmation, veuillez visiter : Apprendre la programmation ! !

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!