Angular En tant que framework front-end le plus populaire à l'heure actuelle, il est généralement bien accueilli par les développeurs front-end. Que vous soyez nouveau dans Angular ou développeur ayant une certaine expérience en développement Angular, comprendre les 12 questions d'entretien classiques de cet article sera un excellent moyen de comprendre et d'apprendre en profondeur les connaissances et les concepts d'Angular 2.
Dans cet article, nous serons exposés à de nombreux concepts importants d'Angular 2, ainsi qu'à du matériel de lecture approfondi et à des tests d'auto-examen permettant à chacun d'évaluer sa compréhension d'Angular.
Tutoriels associés recommandés : "Tutoriel angulaire"
Les composants/directives Angular 2 ont des événements de cycle de vie, qui sont gérés par @angular/core. @angular/core crée le composant, le restitue, puis crée et restitue ses descendants. Lorsque les propriétés de liaison de données de @angular/core changent, la gestion change, détruisant son modèle avant de le supprimer du DOM. Angular fournit un ensemble de hooks de cycle de vie (événements spéciaux) qui peuvent être intégrés au cycle de vie et effectuer des opérations en cas de besoin. Le constructeur est exécuté avant tous les événements du cycle de vie. Chaque interface possède une méthode hook préfixée par ng. Par exemple, la méthode OnInit de l'interface ngOnint, cette méthode doit être implémentée dans le composant.
Certains événements sont applicables aux composants/directives, tandis que quelques événements ne sont applicables qu'aux composants.
Hooks spécifiques au composant :
Angular 2 est une plateforme, pas seulement un langage
Meilleures vitesses et performances
Injection de dépendances plus simple
Modulaire, multiplateforme
Avec les avantages d'ES6 et Typescript.
Routage flexible avec fonction de chargement paresseux
Plus facile à apprendre
Le routage est le mécanisme qui permet aux utilisateurs de naviguer entre les vues/composants. Angular 2 simplifie le routage et offre une flexibilité de configuration et de définition au niveau du module (chargement différé).
Une application Angular possède une seule instance du service de routeur, et chaque fois que l'URL change, la route correspondante est comparée au tableau de configuration de la route. En cas de correspondance réussie, il applique la redirection, auquel cas le routeur crée une arborescence d'objets ActivatedRoute, y compris l'état actuel du routeur. Avant la redirection, le routeur vérifiera si le nouvel état est autorisé en exécutant la garde (CanActivate). Route Guard est simplement une méthode d'interface que les routeurs exécutent pour vérifier l'autorisation d'itinéraire. Une fois la protection exécutée, elle analyse les données de routage et active l'état du routeur en instanciant les composants requis dans
Lecture approfondie :
https://www.codeproject.com/Articles/1164813/Angular-Routing
https://vsavkin.com/angular-2-router-d9e30599f9ea#.kt4z1v957
Angular 2 n'a pas de cycle de digestion bidirectionnel, ce qui est différent d'Angular 1. Dans Angular 2, toutes les modifications qui se produisent dans un composant sont toujours propagées du composant actuel à tous ses composants enfants. Si les modifications apportées à un composant enfant doivent être reflétées dans la hiérarchie de son composant parent, nous pouvons émettre des événements à l'aide de l'API de l'émetteur d'événements.
En bref, EventEmitter est une classe définie dans le module @angular/core et utilisée par les composants et les directives pour émettre des événements personnalisés.
@output() somethingChanged = new EventEmitter();
Nous utilisons la méthode SomethingChanged.emit(value) pour émettre l'événement. Ceci est généralement utilisé dans les setters lorsqu'une valeur de la classe a été modifiée.
Vous pouvez utiliser la méthode d'abonnement pour mettre en œuvre l'abonnement aux émissions d'événements via n'importe quel composant du module.
myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));
Lecture approfondie :
http://stackoverflow.com/questions/36076700/what-is- l'utilisation appropriée d'un-eventemitter
https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.HTML
Toutes les applications d'entreprise suivent un ensemble de conventions et de directives de codage pour mieux conserver le code. Codelyzer est un outil open source permettant d'exécuter et de vérifier si les directives de codage prédéfinies sont respectées. Codelyzer effectue uniquement une analyse de code statique sur les projets Angular et TypeScript.
Codelyzer s'exécute sur tslint et ses conventions de codage sont généralement définies dans le fichier tslint.json. Codelyzer peut être exécuté directement via Angularcli ou npm. Des éditeurs comme Visual Studio Code et Atom prennent également en charge Codelyzer, qui ne nécessite qu'une configuration de base.
Pour configurer Codelyzer dans Visual Studio Code, nous pouvons ajouter le chemin d'accès aux règles tslint dans Fichier - > Options - >
{
"tslint.rulesDirectory": "./node_modules/codelyzer",
"typescript.tsdk": "node_modules/typescript/lib"
}Code exécuté à partir de cli:ng lint.
Code exécuté à partir de npm : npm run lint
Lecture approfondie :
https :/ /github.com/mgechev/codelyzer
https://www.youtube.com/watch?v=bci-Z6nURgE
La plupart des applications d'entreprise contiennent une variété de modules pour des analyses de rentabilisation spécifiques. Le regroupement de l’intégralité du code de l’application et son chargement créent une énorme surcharge de performances lors de l’appel initial. Le chargement différé nous permet de charger uniquement les modules avec lesquels l'utilisateur interagit, tandis que les autres sont chargés à la demande au moment de l'exécution.
Le chargement différé accélère le processus de chargement initial d'une application en divisant le code en plusieurs packages et en les chargeant à la demande.
Chaque application Angular doit avoir un module principal appelé AppModule. Le code doit être divisé en différents sous-modules (NgModules) en fonction de l'analyse de rentabilisation de l'application.
Exemple Plunkr avec le chargement différé activé :
Nous n'avons pas besoin d'importer ou de déclarer des modules de chargement différé dans le module racine.
Ajoutez l'itinéraire à l'itinéraire de niveau supérieur (app.routing.ts) et définissez loadChildren. loadChildren obtiendra le chemin absolu du dossier racine. RouterModule.forRoot() obtiendra le tableau des routes et configurera le routeur.
Importez des itinéraires spécifiques au module dans les sous-modules.
Dans la route du sous-module, spécifiez le chemin sous forme de chaîne vide "", qui est un chemin vide. RouterModule.forChild utilisera à nouveau le tableau de routes pour charger et configurer le routeur pour le composant de sous-module.
Ensuite, exportez la route const : ModuleWithProviders = RouterModule.forChild(routes);
Comme tout autre client ou application Web, les applications Angular 2 doivent également suivre quelques directives de base pour atténuer les risques de sécurité. Certains d'entre eux sont :
Évitez d'utiliser/d'injecter du contenu HTML dynamique dans vos composants.
Si vous utilisez du HTML externe, c'est-à-dire depuis quelque part en dehors de la base de données ou de l'application, vous devez le nettoyer.
Ne mettez pas d'URL externes dans votre application à moins qu'elle ne soit fiable. Évitez la redirection d'URL à moins qu'elle ne soit fiable.
Envisagez d'utiliser la compilation AOT ou la compilation hors ligne.
Prévenez les attaques XSRF en restreignant les API et en choisissant des applications qui utilisent des environnements/navigateurs connus ou sûrs.
Lecture approfondie : https://angular.io/docs/ts/latest/guide/security.HTML#!#best -pratiques
L'optimisation dépend du type et de la taille de l'application et de nombreux autres facteurs. Mais de manière générale, lors de l'optimisation d'une application Angular 2, je considérerais les éléments suivants :
Envisagez la compilation AOT.
Assurez-vous que l'application a été regroupée, uglifiée et secouée par les arbres.
Assurez-vous que l'application ne contient pas d'instructions d'importation inutiles.
Assurez-vous que les bibliothèques tierces inutilisées ont été supprimées de l'application.
Toutes les dépendances et dépendances de développement sont clairement séparées.
Si l'application est plus grande, j'envisagerais un chargement paresseux au lieu d'une application entièrement intégrée.
Lecture approfondie :
https://medium.com/@areai51/ les-4-étapes-de-perf-tuning-pour-votre-angular2-app-922ce5c1b294#.pw4m2srmr
https://www.lucidchart.com/techblog/2016/ 05/04/angular-2-best-practices-change-detector-performance/
Dans la plupart des cas, la bibliothèque tierce est livrée avec son fichier .d.ts pour la définition du type. Dans certains cas, nous devons étendre un type existant en lui fournissant des propriétés supplémentaires, ou si nous devons définir d'autres types pour éviter les avertissements TypeScript.
Si nous devons étendre la définition de type d'une bibliothèque externe, une bonne approche est qu'au lieu d'apporter des modifications au dossier node_modules ou au dossier de typages existant, nous créons un nouveau fichier nommé dossier "Types personnalisés" pour stocker tous types personnalisés.
Pour définir les types d'objets de l'application (JavaScript/Typescript), il faut définir des interfaces et des classes d'entités dans le dossier models du module correspondant de l'application.
Pour ces cas, nous pouvons définir ou étendre le type en créant notre propre fichier ".d.ts".
Lecture approfondie :
https://www.typescriptlang.org/docs/handbook/declaration-merging .HTML
https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files
http://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file
Shadow DOM fait partie de la spécification HTML, qui permet aux développeurs d'encapsuler leur propre balisage HTML, leurs styles CSS et JavaScript. Shadow DOM, ainsi que d'autres technologies, permet aux développeurs de créer leurs propres balises, composants Web et API de premier niveau, comme la balise
Parce que le Shadow DOM est de nature statique et inaccessible aux développeurs, c'est un bon candidat. Parce qu'il met en cache, le DOM s'affichera plus rapidement dans le navigateur et offrira de meilleures performances. De plus, le Shadow DOM peut être relativement bien géré, tandis que les modifications apportées aux applications Angular 2 peuvent être détectées et les redessins de vues peuvent être gérés efficacement.
Lecture approfondie :
https://developer.mozilla.org/en-US/docs/Web /Web_Components/Shadow_DOM
https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966
La compilation AOT signifie Ahead Of Time compilation, dans laquelle le compilateur Angular compilera les composants et les modèles Angular en JavaScript et HTML natifs lors de la construction. Le HTML et le JavaScript compilés seront déployés sur le serveur Web afin que le navigateur puisse gagner du temps de compilation et de rendu.
Avantages :
Téléchargements plus rapides : étant donné que l'application est déjà compilée, de nombreuses bibliothèques liées au compilateur angulaire n'ont plus besoin d'être regroupées et le bundle d'application devient plus petit, de sorte que l'application se télécharge plus rapidement.
Moins de requêtes Http : si l'application n'est pas fournie pour prendre en charge le chargement différé (ou pour quelque raison que ce soit), il y aura une requête de serveur distincte pour chaque code HTML et CSS associé. Mais les applications précompilées aligneront tous les modèles et styles sur les composants, de sorte que le nombre de requêtes HTTP vers le serveur sera moindre.
Rendu plus rapide : si l'application n'est pas compilée AOT, le processus de compilation se produit dans le navigateur lorsque l'application est complètement chargée. Cela nécessite d'attendre que tous les composants requis soient téléchargés, puis d'attendre que le compilateur prenne son temps pour compiler l'application. Grâce à la compilation AOT, une optimisation peut être réalisée.
Détecter les erreurs au moment de la construction : grâce à la pré-compilation, de nombreuses erreurs au moment de la compilation peuvent être détectées, offrant ainsi une meilleure stabilité à l'application.
Inconvénients :
ne fonctionne qu'avec HTML et CSS, les autres types de fichiers nécessitent des étapes de construction préalables
Pas de mode veille, doit être effectué manuellement (bin/ngc-watch.js) et compiler tous les fichiers
Besoin de maintenir la version AOT des fichiers bootstrap (non requis lors de l'utilisation d'outils tels que comme cli )
Avant la compilation, des étapes de nettoyage sont requises
Lecture approfondie :https :/ /angular.io/docs/ts/latest/cookbook/aot-compiler.HTML
De Stack Overflow est la différence :
Une promesse gère un seul événement lorsqu'une opération asynchrone se termine ou échoue.
Un Observable est similaire à un Stream (dans de nombreuses langues), permettant de transmettre zéro ou plusieurs événements lorsqu'une fonction de rappel est appelée pour chaque événement. Observable est généralement plus populaire que Promise car il fournit non seulement des fonctionnalités Promise, mais fournit également d'autres fonctionnalités. En utilisant Observable, vous pouvez gérer 0, 1 ou plusieurs événements. Vous pouvez utiliser la même API dans chaque cas. Observable est annulable, ce qui présente également des avantages par rapport à Promise. Les abonnés d'un observable peuvent se désinscrire si le résultat d'une requête HTTP au serveur ou d'une autre opération asynchrone n'est plus nécessaire, et la promesse finira par appeler un rappel de réussite ou d'échec, même si vous n'avez pas besoin de la notification ou du résultat. il fournit. Observable fournit des opérateurs de type tableau tels que map, forEach et reduction, ainsi que des opérateurs puissants tels que retry() ou replay(), qui sont très pratiques à utiliser.
Promesses vs Observables
1. Valeur unique
2. Annuler
1. 🎜 >2. Annulable
3. Prise en charge des opérateurs de cartographie, de filtrage, de réduction et similaires
4 Fonctionnalités proposées dans ES 2016
5. 🎜>
6. Les membres du tableau peuvent être obtenus de manière asynchrone en fonction des changements de temps À l'heure actuelle, la version officielle d'Angular 2 a été publiée et certains produits ont également été modifiés pour la version officielle d'Angular 2. support. Parmi eux, Wijmo a répondu le plus rapidement. Wijmo a publié la version officielle de Wijmo prenant en charge Angular2 quelques heures seulement après la sortie d'Angular2. Wijmo fournit des composants Angular2 pour chaque contrôle de l'interface utilisateur. Tous les composants Angular2 fournissent un balisage entièrement déclaratif.Elle comporte trois composants : tester la vue, examiner les résultats et afficher les résultats
Effet de démonstration : http://ng2-quiz.anuraggandhi.com/
Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de 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!
centos7 fermer le pare-feu
Comment supprimer hao.360
Comment définir l'en-tête et le pied de page dans Word
Linux afficher les informations du système
Comment utiliser la fonction axe dans Matlab
Comment configurer au mieux la mémoire virtuelle
Paiement sans mot de passe Taobao
Quels types d'architecture système existe-t-il ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
