19 choses que les développeurs angulaires doivent apprendre

Cet article vous présentera 19 choses que vous devez apprendre pour devenir un excellent développeur Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une application de tâches est fondamentalement équivalente au « Bonjour tout le monde » du développement front-end. Bien que les aspects CRUD de la création d’applications soient abordés, cela ne fait généralement qu’effleurer la surface de ce qu’un framework ou une bibliothèque peut faire.

Angular peut sembler être en constante évolution et mise à jour – mais en réalité, certaines choses restent les mêmes. Ce qui suit est un aperçu des concepts de base que vous devez connaître sur Angular afin de pouvoir utiliser correctement le framework JavaScript. [Recommandations de tutoriel associées : "Tutoriel angulaire"]

En parlant d'Angular, nous devons apprendre beaucoup de choses, et beaucoup de gens sont piégés dans le cercle des débutants simplement parce qu'ils ne le font pas. Je ne sais pas où aller. Quels mots-clés rechercher ou devraient rechercher. Ce guide dont nous parlerons ci-dessous (et un bref résumé d'Angular lui-même) est quelque chose que j'aurais vraiment aimé avoir lorsque j'ai commencé à utiliser Angular 2+.

1. Architecture angulaire modulaire

---

Théoriquement, vous pouvez mettre tout le code angulaire sur une seule page et le mettre dans une seule grande fonction, mais ce n'est pas recommandé. , n'est pas un moyen efficace de structurer votre code et va à l'encontre du but de l'existence d'Angular.

Angular utilise le concept de modules comme une partie importante de l'architecture du framework, qui fait référence à une collection de code qui n'a qu'une seule raison d'exister. Votre application Angular est essentiellement composée de modules, certains autonomes et d'autres partagés.

Il existe de nombreuses façons de structurer les modules dans votre application. Une compréhension plus approfondie des différentes architectures peut également aider à déterminer comment faire évoluer l'application à mesure qu'elle se développe. Elle peut également aider à isoler le code et à empêcher la génération de code.

Mots clés de recherche :

• Modèle d'architecture angulaire

• Architecture d'application angulaire évolutive

2. Flux de données unidirectionnel et immuabilité

---

Dès Angular 1, la liaison bidirectionnelle a conquis de nombreux développeurs front-end Le cœur du peuple. C'était en fait l'un des arguments de vente originaux d'Angular. Cependant, au fil du temps, lorsque l’application commence à devenir plus complexe, elle commence à créer des problèmes en termes de performances.

Il s'avère que la liaison bidirectionnelle n'est pas requise partout.

La liaison bidirectionnelle est toujours possible dans Angular 2+, mais seulement si le développeur le demande explicitement – ​​cela oblige la personne derrière le code à réfléchir à la direction et au flux des données, cela permet également aux applications d'être plus flexible avec les données en déterminant comment elles circulent.

Mots clés de recherche :

• Meilleures pratiques en matière de flux de données angulaires

• Unité dans un flux directionnel angulaire

• Avantages de la reliure unidirectionnelle

3. Attribut et instructions structurelles

---

La directive est une extension du HTML via des éléments personnalisés. Les directives d'attribut vous permettent de modifier les propriétés d'un élément, et les directives structurelles modifient la disposition en ajoutant ou en supprimant des éléments du DOM.

Par exemple, ngSwitch et ngIf sont des directives structurelles car elles évaluent les paramètres et déterminent si certaines parties du DOM doivent être présentes.

Les directives d'attribut sont des comportements personnalisés attachés à des éléments, des composants ou d'autres directives.

Apprendre à utiliser ces deux directives peut étendre les fonctionnalités de votre application et réduire la quantité de code en double dans votre projet. Les directives attribuées peuvent également aider à cibler certains comportements à utiliser dans différentes parties de l'application.

Mots clés de recherche :

• Directive d'attribut angulaire

• Directive structurelle angulaire

• Modèle de directive structurelle angulaire

4. Crochets de cycle de vie des composants

---

Chaque logiciel a sa propre vie. cycle, qui détermine la manière dont certains contenus sont créés, rendus et supprimés. Le cycle de vie des composants d'Angular est le suivant :

create → render → render children → check when data-bound properties change → destroy → remove from DOM

Nous pouvons saisir les moments clés de ce cycle et le verrouiller à un moment ou un événement précis. Cela nous permet de créer des réponses appropriées et de configurer un comportement en fonction des différentes étapes d'existence du composant.

Par exemple, vous devrez peut-être charger certaines données avant de rendre la page, ce que vous pouvez faire avec ngOnInit(), ou vous devrez peut-être vous déconnecter de la base de données, ce qui peut être fait avec ngOnDestroy().

Mots clés de recherche :

• Crochet de cycle de vie angulaire

• Cycle de vie des composants

5. Services HTTP et d'objets observables

---

Ce n'est pas une fonctionnalité spécifique à Angular, mais vient d'ES7. Angular implémente cela dans le cadre de la fonctionnalité de support du framework, et comprend cela, et cela se traduit également bien par React, Vue et toute bibliothèque ou framework lié à JavaScript.

Les services d'objets observables sont des modèles qui vous permettent de travailler efficacement avec des données - vous permettant d'analyser, de modifier et de conserver des données dans un système basé sur des événements. Vous ne pouvez pas échapper complètement à HTTP et aux observables car tout est constitué de données.

Mots clés de recherche :

• Modèle d'objet observable JavaScript

• HTTP angulaire et objet observable

• Fonction observable ES7

6. Architecture de composants intelligents/dumb

---

Lors de l'écriture d'Angular applications, nous avons tendance à tout mettre en composants. Toutefois, il ne s’agit pas d’une bonne pratique. Le concept de composants Smart/Dumb dans Angular nécessite davantage de discussions, en particulier dans les cercles de débutants.

Le fait qu'un composant soit Smart/Dumb détermine le rôle qu'il joue dans la planification globale de l'application. Les composants stupides sont généralement apatrides et leur comportement est facile à prédire et à comprendre. Par conséquent, rendez vos composants aussi stupides que possible. Les composants intelligents sont plus difficiles à maîtriser car ils impliquent des entrées et des sorties. Pour exploiter correctement la puissance d'Angular, étudiez l'architecture des composants Smart/Dumb, qui vous fournira des modèles et des façons de réfléchir sur la façon de gérer le code et ses interrelations.

Mots clés de recherche :

• Composant angulaire intelligent/dumb

• Composant Stateless Dumb

• Composant de démonstration

• Composant intelligent en angulaire

7. Structure de l'application et meilleures pratiques

---

La CLI ne peut vous mener que jusqu'à présent en matière de structure et de meilleures pratiques. Construire une application angulaire (ou toute application en général), c'est comme construire une maison. La communauté optimise le processus de configuration depuis des années pour obtenir les applications les plus efficaces et les plus efficaces.

Angular ne fait pas exception.

La plupart des plaintes concernant Angular de la part de ceux qui tentent d'apprendre Angular ont tendance à être dues à un manque de connaissances structurelles ; la syntaxe est accessible et claire. Cependant, la connaissance structurelle de l'application nécessite une compréhension du contexte, des exigences et de la manière dont ils s'articulent au niveau conceptuel et pratique. Comprendre les différentes structures d'applications potentielles d'Angular et leurs meilleures pratiques vous donnera une nouvelle perspective sur la façon de créer des applications.

Mots clés de recherche :

• Applications angulaires à référentiel unique

• Bibliothèque angulaire, package Angular

• Angulaire

• Application micro angulaire

• Référentiel monolithique

8. Syntaxe de liaison de modèle

---

La liaison est la cristallisation du framework JavaScript, qui est l'une des premières raisons de son existence. La liaison de modèles comble le fossé entre le HTML statique et le JavaScript, la syntaxe de liaison de modèles d'Angular agissant comme un facilitateur entre ces deux technologies.

Une fois que vous avez appris comment et quand les utiliser, convertir une page autrefois statique en une page interactive devient beaucoup plus facile et moins ennuyeux. Étudiez différents scénarios de liaison, tels que la liaison de propriétés, les événements, l'interpolation et la liaison bidirectionnelle.

Mots clés de recherche :

• Liaison de propriété angulaire

• Liaison d'événement angulaire

• Liaison angulaire bidirectionnelle, interpolation angulaire

• Constantes de passage angulaire

9. Caractéristiques Modules et Routage

---

La puissance des modules de fonctionnalités est sous-estimée dans Angular. C'est en fait un excellent moyen de s'organiser et de répondre aux besoins de l'entreprise. À long terme, cela limite la responsabilité et contribue à prévenir la pollution du code.

Il existe cinq types de modules de fonctionnalités (module de fonctionnalités de domaine, module de fonctionnalités avec routage, module de routage, module de fonctionnalités de service et module de fonctionnalités de pièce identifiable), chaque module gère un type spécifique de fonctionnalité. Apprendre à utiliser les modules de fonctionnalités avec le routage peut aider à créer des ensembles de fonctionnalités discrets et à appliquer une séparation claire et nette des problèmes à votre application.

Mots clés de recherche :

• Module de fonctionnalités angulaires

• Structure de fonctionnalités partagées dans Angular

• Fournisseur de modules de fonctionnalités

• Chargement paresseux des modules de routage et de fonctionnalités

10. Validation (formulaires réactifs et validateurs)

---

Les formulaires sont une partie inévitable de tout développement front-end.

L'authentification est fournie avec le formulaire.

Il existe de nombreuses façons de créer des formulaires intelligents basés sur les données dans Angular. L’itération de formulaire la plus populaire est la forme réactive. Cependant, il existe d'autres options, à savoir les formulaires basés sur des modèles et les validateurs personnalisés.

Comprendre comment les validateurs fonctionnent avec CSS vous aidera à accélérer votre flux de travail et à transformer votre application en un espace de validation prêt aux erreurs.

Mots clés de recherche :

• Vérification formelle angulaire

• Vérification basée sur un modèle

• Validation du formulaire responsive

• Validateurs synchrones et asynchrones dans Angular

• Validateurs intégrés

• Validateurs personnalisés angulaires

• Validation croisée entre champs

11. Projection de contenu

---

Angular a une fonctionnalité appelée La projection de contenu est quelque chose qui transmet efficacement les données des composants parents aux composants enfants. Bien que cela puisse paraître compliqué, il s'agit en réalité de placer des vues dans des vues pour produire une vue principale.

Nous comprenons généralement la projection de contenu dans un sens superficiel - lorsque nous imbriquons des vues enfants dans une vue parent. Cependant, pour élargir notre compréhension, nous devons également comprendre comment les données sont transmises entre différentes vues. C’est là que comprendre la projection de contenu s’avère utile.

Comprendre la projection de contenu peut vous aider à déterminer le flux de données de votre application et où se produit la variabilité.

Mots clés de recherche :

• Projection de contenu angulaire

• Relation de vue parent-enfant angulaire

• Relation de données avec vue angulaire

12.onPush Change Detection

---

Par défaut, Angular Utilisez la stratégie de détection des modifications par défaut. Cela signifie que le composant sera toujours vérifié. Même s'il n'y a rien de mal à utiliser des valeurs par défaut, cela peut s'avérer un moyen inefficace de détecter les changements.

La vitesse et les performances sont plutôt bonnes pour une petite application. Cependant, une fois qu’une application atteint une certaine taille, son exécution peut devenir très lourde, en particulier dans les navigateurs plus anciens.

La stratégie de détection des changements onPush accélérera considérablement votre application car elle repose sur des déclencheurs spécifiques plutôt que sur des vérifications constantes pour voir si quelque chose s'est produit.

Mots clés de recherche :

• Détection de changement angulaire onPush

13. Protection du chemin, préchargement, chargement différé

---

Si vous disposez d'un certain type de connexion, vous aurez besoin d'une protection de chemin. Vous pouvez protéger certaines vues contre les vues non autorisées, ce qui constitue une exigence essentielle dans de nombreuses applications. La protection des chemins agit comme une interface entre les routeurs et les routes de requêtes. C'est le décideur qui décide si l'accès à un itinéraire est autorisé. Il y a beaucoup à explorer dans le monde de la protection des chemins, à savoir les décisions de chemin basées sur des éléments tels que l'expiration des jetons, l'authentification des utilisateurs et la sécurité des chemins.

Le préchargement et le chargement paresseux peuvent également améliorer l'expérience utilisateur en accélérant le temps de chargement de votre application. Il convient de noter que le préchargement et le chargement paresseux ne consistent pas seulement à décider de charger ou non un ensemble spécifique d'images, ils peuvent également améliorer l'architecture du bundle et charger différentes parties de l'application qui peuvent exister sur différentes étendues et domaines.

Mots clés de recherche :

• Protection du chemin angulaire

• Mode d'authentification angulaire

• Modules de préchargement angulaire et de chargement paresseux

• Mode de chemin de sécurité angulaire

14. Tuyaux auto-définissants

---

🎜>

L'utilisation de Angular Pipes rend le formatage des données incroyablement simple. Bien que de nombreux pipelines préconfigurés et prêts à l'emploi couvrent de nombreux éléments tels que les dates, les devises, les pourcentages et la casse des caractères, ils ne couvrent pas tout ce dont vous avez besoin.

C'est là que les tuyaux personnalisés sont utiles. Vous pouvez facilement créer vos propres filtres et convertir le format de données à votre guise. C'est vraiment simple, alors allez y jeter un oeil !

• Mots clés de recherche :

Pipeline personnalisé angulaire

---

15. Décorateurs @viewChild et @ContentChild

viewChild et contentChild sont la manière dont les composants communiquent entre eux. L'intérêt d'Angular est que vous disposez de plusieurs composants compilés ensemble comme un puzzle, mais si ces composants sont isolés les uns des autres, le puzzle ne sert pas vraiment à grand-chose.

C'est là qu'interviennent viewChild et contentChild. Apprendre à utiliser ces deux décorateurs vous donne accès aux composants associés. Cela facilite la mise en œuvre de la tâche de partage de données et permet la transmission de données et d'événements déclenchés par les composants associés.

• Mots clés de recherche :

• Modificateur angulaire

• Viewchild et contentchild dans Angular

Partage de données de composants angulaires

---

16. Les composants dynamiques et ng-template

Les composants sont les éléments constitutifs d’Angular. Cependant, tous les composants ne sont pas fixes et certains d'entre eux doivent être créés dynamiquement plutôt que précompilés.

Les composants dynamiques permettent aux applications de créer certains composants de manière dynamique. Les composants statiques supposent que les choses ne changent pas. Il peut être prédit à partir des entrées et des sorties attendues. Cependant, les composants dynamiques sont rendus à la demande. Ils deviennent très utiles lors de la création de réactions où des actions se produisent sur une application ou une page susceptible d'écouter des sources externes et leurs mises à jour.

• Mots clés de recherche :

• Composants dynamiques dans Angular

  Composants dynamiques et ng-templating

17. @Host @Hostingbinding et exportAs

---

@Host, @Hostingbinding et exportAs sont des décorateurs de directives angulaires qui étendent les paramètres attachés. Ils vous permettent également de créer des modèles épurés qui peuvent être exportés pour être utilisés dans votre application.

Si ce qui précède vous semble déroutant, vous devez d'abord rechercher les directives angulaires et leur but d'existence. @Host, @Hostingbinding et exportAs sont des attributs de la directive qui aident à l'implémenter.

Mots clés de recherche :

• Mode directive angulaire

• @Host d'Angular, @Hostingbinding et exportAs

18. Utiliser RxJs pour la gestion de l'état

---

L'état de l'application détermine en fin de compte les données affichées à l'utilisateur. Si votre état n’est qu’un désordre de spaghettis, il y a de fortes chances que l’ensemble de votre structure de données devienne fragile à tout changement.

Lorsque vous commencerez à comprendre comment fonctionne l'état dans Angular, vous comprendrez comment vos données se comportent et pourquoi.

Bien qu'Angular dispose de son propre système de gestion d'état, RxJs est un excellent moyen de centraliser l'état et les données associées. Des données peuvent être perdues dans la chaîne de relation parent-enfant. RxJs découple les choses en créant un magasin centralisé.

Mots clés de recherche :

• Angular RxJs

• Principe Flux/Redux

• Principes de gestion de l'état angulaire

19. Injection de dépendances et zones

---

"Injection de dépendance" est généralement un concept énorme, donc si vous n'êtes pas très familier avec celui-ci, c'est un concept que vous devez vraiment rechercher. Il existe plusieurs façons de créer efficacement une injection de dépendances dans Angular, principalement via les constructeurs. C'est un moyen de rendre votre application plus efficace en important uniquement ce dont vous avez besoin, plutôt que de tout charger.

Comme "l'injection de dépendances", la "zone" est aussi un concept propre à Angular. C'est un moyen pour une application de détecter les tâches asynchrones du début à la fin. Ceci est important car ces tâches asynchrones peuvent modifier l’état interne de l’application et donc la vue. Les « zones » facilitent le processus de détection des changements.

Mots clés de recherche :

• Zone angulaire

• Injection de dépendances

• Angular DI

Derniers mots

---

Angular est un grand sujet. Bien que la création d'applications angulaires puisse faciliter le processus d'apprentissage, parfois vous ne savez tout simplement pas ce que vous ne savez pas. Lorsque vous débutez, il est difficile de comprendre quelque chose que vous ne connaissez pas. J'espère que ce petit guide pourra vous inspirer au-delà de vos didacticiels Angular habituels et vous donner une compréhension plus complète d'Angular.

Adresse originale : https://medium.com/better-programming/19-things-you-need-to-learn-to-become-an-effective-angular-developer -c0ccfa51222a

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à 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!