19 concepts que vous devez apprendre pour devenir un développeur Angular efficace

L'application frontale TODO est la même que «Hello world» en programmation normale. Lors de la création d'applications TODO, vous pouvez étudier l'implémentation des opérations CRUD en utilisant l'un ou l'autre framework. Mais souvent, ces projets ne sont que superficiellement liés à ce que le cadre sait réellement.

Si vous regardez Angular, vous avez le sentiment que ce cadre est en constante évolution et mise à jour. En fait, en ce qui concerne Angular, nous pouvons mettre en évidence certaines idées qui restent inchangées. Le matériel, dont nous publions la traduction aujourd'hui, donne un aperçu des concepts angulaires de base que vous devez comprendre afin d'utiliser correctement et efficacement les capacités de ce cadre.



Pour apprendre Angular, vous devez apprendre beaucoup. De nombreux développeurs se retrouvent coincés dans les premières étapes du développement d'Angular. Cela est dû au fait qu'ils ne savent pas où aller, ou ne savent pas quels mots clés ils devraient rechercher pour obtenir des informations qui leur permettront de faire un pas en avant. L'auteur de ce document dit que lorsqu'elle a commencé à apprendre Angular 2+, elle aimerait qu'elle rencontre un guide de ce cadre similaire à celui-ci.

1. L'architecture modulaire d'Angular

En théorie, les applications angulaires peuvent être créées en mettant tout le code sur une seule page, dans une énorme fonction. Mais pour ce faire, d'une part, n'est pas recommandé, et d'autre part, cette approche ne peut pas être qualifiée d'efficacité du point de vue de la structuration du code. De plus, cela donne un sens à l'existence même d'Angular.

Angular, dans le cadre de son architecture de cadre, utilise largement le concept de modules. Un module est un morceau de code dont l'existence n'a qu'une seule raison. En général, nous pouvons dire que les applications angulaires sont assemblées à partir de modules. Certains modules ne sont utilisés qu'à un seul endroit de l'application, certains à différents endroits.

Il existe de nombreuses façons de structurer des modules dans une application. De plus, l'étude de différents modèles architecturaux permet de comprendre comment organiser la structure de l'application dans le but de la faire évoluer au cours de sa croissance. De plus, une utilisation prudente des modules permet d'isoler le code et d'éviter la duplication de code dans un projet.
La sous-section suivante fournit des exemples de requêtes par lesquelles vous pouvez rechercher des documents supplémentaires sur ce sujet. Ces sous-sections se trouvent dans d'autres sections de ce document.

▍Rechercher des requêtes

• Modèles d'architecture angulaire.
• Architecture d'application angulaire évolutive.

2. Flux de données à sens unique et immuabilité

De nombreux développeurs utilisant Angular 1 ont aimé le concept de liaison bidirectionnelle. En fait, c'était l'une des qualités attrayantes d'Angular. Mais au fil du temps, à mesure que les applications angulaires devenaient plus complexes, il est devenu clair que la liaison bidirectionnelle crée des problèmes de performances.

Il s'est avéré qu'en fait, la liaison bidirectionnelle n'est pas nécessaire si souvent.
Dans Angular 2+, vous pouvez toujours utiliser la liaison bidirectionnelle, mais uniquement lorsque le développeur exprime explicitement son intention d'utiliser cette fonctionnalité. Cette approche incite ceux qui écrivent du code d'application à réfléchir à la direction des flux de données. De plus, cela permet un travail plus flexible avec les données. La flexibilité est obtenue grâce à la possibilité de personnaliser exactement la façon dont les données doivent être déplacées dans l'application.

▍Rechercher des requêtes

• Meilleures pratiques en matière de flux de données angulaires.
• Écoulement unidirectionnel en angulaire.
• Avantages de la reliure unidirectionnelle.

3. Attribut et directives structurelles d'Angular

Une directive est une extension de HTML via des éléments personnalisés. Les directives d'attribut, ou attributs, vous permettent de modifier les propriétés des éléments. Les directives structurelles vous permettent d'influencer le contenu des pages en supprimant des éléments du DOM ou en les ajoutant au DOM.
Par exemple, ngSwitch et ngIf sont des directives structurelles, car elles évaluent les paramètres qui leur sont transmis et déterminent si certaines parties du DOM doivent être présentes dans le document.

Les attributs sont des mécanismes pour changer le comportement standard des éléments, personnalisables par le programmeur.

Apprendre à utiliser ces deux types de directives vous aidera à étendre les capacités de votre application et à réduire la quantité de code en double. De plus, les directives d'attribut peuvent aider à mettre en évidence certains modèles de modification d'éléments utilisés à différents endroits de l'application.

▍Rechercher des requêtes

• Directives d'attributs angulaires (directives d'attributs angulaires).
• Directives structurelles angulaires.
• Modèles de directives structurelles angulaires.

4. Méthodes de cycle de vie des composants

Chaque morceau de code a son propre cycle de vie, qui détermine comment quelque chose est créé, affiché à l'écran, puis disparaît. Angular a un concept appelé cycle de vie d'un composant. Cela ressemble à ceci:

• Création.
• Rendu
• Rendu des composants enfants.
• Vérifiez les modifications apportées aux propriétés liées aux données.
• Destruction.
• Suppression du DOM.

Le programmeur a la possibilité d'intervenir dans le composant à des moments clés de ce cycle, en se concentrant, par exemple, sur certains événements. Cela vous permet de personnaliser le comportement du programme à différents moments du cycle de vie des composants.

Par exemple, vous devrez peut-être charger certaines données avant que la page ne s'affiche. Vous pouvez le faire dans la méthode du cycle de vie du composant ngOnInit() . Ou, peut-être à un moment donné de l'application, vous devez vous déconnecter de la base de données. Vous pouvez le faire dans la méthode ngOnDestroy() .

▍Rechercher des requêtes

• Crochets de cycle de vie angulaire.
• Cycle de vie des composants.

5. Services HTTP et objets observables

Ce dont nous parlons ici n'est probablement pas lié aux caractéristiques spéciales d'Angular, mais à ES7. Il se trouve que dans Angular, le travail avec les objets observables est implémenté au niveau du framework. Des mécanismes similaires existent dans React, Vue et d'autres bibliothèques et frameworks basés sur JavaScript.

Les objets observables sont des modèles qui vous aident à travailler efficacement avec des données dans des systèmes basés sur des événements. Afin de développer efficacement des applications angulaires, vous devez savoir comment utiliser les services HTTP et les objets observables.

▍Rechercher des requêtes

• Modèles observables JavaScript (modèles d'objets observables JavaScript).
• HTTP angulaire et observables (objets HTTP et observables en angulaire).
• Fonction observable ES7 (Objets observables dans ES7).

6. Composants intelligents et stupides

Beaucoup, développant des applications angulaires, s'efforcent de mettre tout ce qui est nécessaire au fonctionnement de ces composants. Certes, ce n'est pas tout à fait quelque chose qui pourrait être recommandé pour une utilisation pratique. L'idée d'utiliser des composants «intelligents» et «stupides» dans Angular est un concept qui devrait peut-être être évoqué plus souvent qu'ils ne le font actuellement, en particulier dans les cercles des développeurs novices.

Le fait que le composant soit intelligent ou stupide détermine son rôle dans la conception globale du périphérique d'application. Les composants "idiots" n'ont souvent aucun état, ils diffèrent par un comportement simple, prévisible et compréhensible. Il est recommandé, dans la mesure du possible, de se concentrer sur la création et l'utilisation de composants "stupides".

Il est plus difficile de travailler avec des composants "intelligents", car au cours du travail, ils reçoivent des données d'entrée et génèrent des données de sortie. Afin d'utiliser Angular efficacement, familiarisez-vous avec le concept de composants intelligents et stupides. Cette connaissance vous fournira des modèles et des idées sur la façon d'organiser des fragments de code d'application et de construire des relations entre ces fragments entre eux.

▍Rechercher des requêtes

• Composants angulaires intelligents / stupides.
• Composants muets sans état.
• Composants de présentation.
• Composants intelligents en angulaire.

7. La structure de l'application et les recommandations pratiques pour sa formation

Si nous parlons de la structure de l'application et de l'application de recommandations pratiques lors de sa création, les outils de ligne de commande angulaire peuvent fournir au moins une aide au programmeur. Développer une application angulaire (ou toute autre application), c'est comme construire une maison. À savoir, nous parlons de méthodes pratiques qui ont été développées et optimisées par la communauté des développeurs depuis des années. L'utilisation de telles techniques pour structurer des applications conduit à l'émergence de projets de haute qualité. En fait, cela s'applique à Angular.

Lorsque des programmeurs novices essayant d'apprendre Angular se plaignent de ce cadre, la raison de ces plaintes est généralement un manque de connaissances sur la structure des applications. Les débutants comprennent facilement la syntaxe, ici ils n'ont aucun problème. Mais trouver la bonne approche pour structurer les applications est beaucoup plus difficile pour eux. Ici, vous devez comprendre le domaine pour lequel l'application est créée, vous devez connaître les exigences de l'application et comment la réalité et les attentes sont liées aux niveaux conceptuel et pratique.

L'étude des options possibles pour les structures d'applications angulaires et des recommandations pratiques pour l'utilisation de ces structures donnera au programmeur une vision de la façon de créer ses propres projets.

▍Rechercher des requêtes

• Applications angulaires à repo unique (applications angulaires hébergées dans un référentiel unique).
• Bibliothèques angulaires (bibliothèques angulaires).
• Paquets angulaires.
• Bundles angulaires (Bundles angulaires).
• Micro applications angulaires.
• Monorepo (Monorepositoires).

8. Syntaxe et modèles de liaison de données

La liaison, ou liaison de données, est peut-être la caractéristique la plus notable des frameworks JavaScript. C'est aussi l'une des raisons pour lesquelles les cadres existent généralement. La liaison de données dans les modèles est le pont entre HTML statique et JavaScript. La syntaxe de liaison de données dans les modèles angulaires joue le rôle d'un intermédiaire pour aider à communiquer les entités HTML et JavaScript.

Après avoir appris comment et quand utiliser les ancres, vous pouvez facilement transformer des pages statiques en quelque chose d'interactif. Dans ce domaine, il est recommandé de prêter attention aux différents scénarios de liaison de données. Par exemple, il s'agit d'une liaison de propriétés, d'événements, c'est une interpolation de données et une liaison bidirectionnelle.

▍Rechercher des requêtes

• Reliure de propriété angulaire.
• Liaison d'événement angulaire.
• Liaison angulaire bidirectionnelle (liaison de données angulaire bidirectionnelle).
• Interpolation angulaire (Interpolation en angulaire).
• Constantes de passage angulaires (Constantes de passage angulaires).

9. Modules de fonctionnalités et routage

Les modules de fonctionnalités dans Angular sont une technologie sous-estimée. En fait, ces modules fournissent au développeur un moyen fantastique d'organiser et d'isoler des ensembles d'exigences métier pour les applications. Ils contribuent à limiter la responsabilité des fragments de code et à prévenir, à long terme, la pollution du code.

Il existe cinq types de modules de fonctionnalité (domaine, routé, routage, service, widget), chacun d'eux est responsable de la mise en œuvre d'une certaine fonctionnalité. Apprendre à utiliser les modules de fonctionnalités conjointement avec le routage peut aider à créer des blocs de fonctionnalités distincts. Cela aidera et implémentera dans les applications un schéma clair et de haute qualité de séparation des responsabilités.

▍Rechercher des requêtes

• Modules d'entités angulaires (modules d'entités angulaires).
• Structures d'entités partagées dans Angular.
• Fournisseurs de modules de fonctionnalités.
• Chargement paresseux avec routage et modules de fonctionnalités (Chargement paresseux avec routage et modules de fonctionnalités).

10. Formulaires et validation des données (formulaires réactifs et validateurs)

Les formulaires sont une partie inévitable de tout développement frontal. Et lorsque des formulaires sont utilisés, la validation des données est également nécessaire.

Angular a différentes manières de construire des formulaires intelligents basés sur les données. Les formes réactives sont particulièrement populaires. Cependant, il existe d'autres options, en particulier - ce sont des formulaires dont la validation est basée sur des modèles, ainsi que l'utilisation de validateurs personnalisés.

Apprendre comment les validateurs et CSS fonctionnent ensemble aidera à accélérer le développement d'applications et à faciliter la gestion des erreurs dans les formulaires.

▍Rechercher des requêtes

• Validation de forme angulaire.
• Validation pilotée par modèle
• Validation de formulaire réactive.
• Validateurs de synchronisation et asynchrone en angulaire (validateurs synchrones et asynchrones en angulaire).
• Validateurs intégrés.
• Validateurs personnalisés angulaires.
• Validation transversale.

11. Projection de contenu

Angular a un mécanisme appelé projection de contenu. Il vous permet d'organiser le transfert efficace des données des composants parents vers les composants enfants. Bien que l'idée de projeter du contenu puisse sembler compliquée, son essence réside dans le fait que pour construire un élément affiché à l'écran, certains éléments sont placés dans d'autres.

Les développeurs étudient souvent la projection de contenu au niveau d'une surface, par exemple, en s'habituant au schéma dans lequel un composant enfant est incorporé dans le composant parent. Mais afin d'élargir notre compréhension de ce concept, nous devons également comprendre comment les données sont transférées entre les différents composants visuels. C'est là que la compréhension des fonctionnalités de la projection de contenu sera très utile.

La compréhension de ce concept permet de comprendre les caractéristiques du mouvement des flux de données au sein de l'application, et où exactement les mutations de ces données se produisent.

▍Rechercher des requêtes

• Projection de contenu angulaire.
• Relation de vue parent-enfant angulaire (Relation parent-enfant angulaire et composantes visuelles d'Angular).
• Relations de données de vue angulaire.

12. Stratégie de détection des changements onPush

Par défaut, Angular utilise une stratégie de détection de changement standard. Avec cette approche, les contrôles des composants sont en cours. Bien qu'il n'y ait rien de mal à cela, cette approche pour détecter les changements peut ne pas être efficace.

Si nous parlons de petites applications, leurs performances ne sont pas particulièrement affectées. Mais une fois que l'application atteint une certaine taille, sa vitesse, en particulier lorsqu'elle est lancée dans des navigateurs plus anciens, peut se détériorer.

La onPush détection des modifications onPush peut accélérer considérablement l'application. Le fait est que lorsqu'il est utilisé, les contrôles ne sont effectués que lorsque certains événements se produisent. C'est bien mieux que des contrôles constants.

▍Rechercher des requêtes

• Détection de changement angulaire onPush (stratégie de détection de changement angulaire onPush).

13. Restreindre l'accès aux itinéraires, préchargement, chargement paresseux

Si votre projet dispose de mécanismes qui fournissent un accès utilisateur au système, cela signifie que vous devez utiliser la restriction d'accès aux itinéraires. De nombreuses applications nécessitent la capacité de protéger certaines pages contre une visualisation non autorisée. Les restrictions d'accès aux itinéraires fonctionnent comme une interface entre le routeur et l'itinéraire demandé. Ils décident si l'accès à un itinéraire particulier est autorisé dans une certaine situation. Dans le domaine de la protection des itinéraires, il y a beaucoup à apprendre. En particulier, il s'agit d'une prise de décision basée sur l'analyse de la période de validité du jeton, l'utilisation de rôles d'authentification et la fourniture d'un travail sûr avec les routes.

Le préchargement et le chargement paresseux des données peuvent améliorer l'expérience utilisateur de travailler avec le site en réduisant le temps de chargement des applications. Il sera utile de dire que les technologies de chargement pré-paresseux ne sont pas uniquement liées aux images. Ces technologies sont utilisées lors de la division des bundles d'applications en plusieurs parties et lors du chargement de différentes parties de ces bundles dans différentes conditions.

▍Rechercher des requêtes

• Gardes de route angulaires (restriction de l'accès aux routes angulaires).
• Modèles d'authentification angulaires.
• Modules de préchargement angulaire et de chargement différé (modules de préchargement et de chargement différé en angulaire).
• Modèles de route sécurisés angulaires.

14. Convoyeurs personnalisés

Les pipelines angulaires facilitent le formatage des données. Il existe de nombreux convoyeurs intégrés qui vous permettent de résoudre un large éventail de tâches standard. Parmi celles-ci figurent les tâches de mise en forme des dates, des montants en devises, des valeurs en pourcentage, ainsi que, par exemple, de travailler avec la casse des caractères. Cependant, il y a toujours une tâche pour laquelle il n'y a pas de convoyeur standard.
C'est dans de tels cas que des pipelines personnalisés sont nécessaires. Ce mécanisme permet au programmeur de créer ses propres filtres et de décrire les transformations de données dont il a besoin. Utiliser tout cela n'est pas difficile, donc ce concept peut être recommandé pour l'étude.

▍Rechercher des requêtes

• Tuyaux angulaires personnalisés.

15. Décorateurs @ViewChild et @ContentChild

Les composants peuvent communiquer entre eux grâce aux @ContentChild @ViewChild et @ContentChild . L'essence d'Angular est de faire en sorte que les applications multi-composants créées à l'aide de ce cadre ressemblent à un puzzle. Mais un tel casse-tête ne sera pas d'une grande utilité si ses fragments sont isolés les uns des autres.

Pour connecter les pièces du puzzle entre elles, les décorateurs @ViewChild et @ContentChild . L'étude des caractéristiques de leur utilisation vous donnera l'opportunité de travailler avec des composants associés à d'autres composants. Cela simplifie la tâche d'organisation du partage de données entre les différents composants. Cela vous permet de transférer des données et des informations sur les événements qui se produisent dans ces composants entre les composants.

▍Rechercher des requêtes

• Décorateurs angulaires (Décorateurs angulaires).
• Viewchild et contentchild dans Angular (Decorators @ViewChild et @ContentChild dans Angular).
• Partage de données de composants angulaires.

16. Composants dynamiques et directive ng-template

Les composants sont les blocs de construction des applications angulaires. Cependant, tous les composants ne doivent pas être créés à l'avance. Certains d'entre eux doivent être créés pendant l'exécution du programme.
Les composants dynamiques permettent à une application de créer ce dont elle a besoin pendant son exécution.

Les composants statiques, contrairement aux composants dynamiques, sont créés à l'avance. Cette opération est effectuée dans les cas où les composants ne devraient pas être affectés. Ils sont prévisibles, d'une manière prédéterminée, effectuant des conversions des données qui les saisissent.

Les composants dynamiques, en revanche, sont créés en fonction des besoins. Ils s'avèrent très utiles lors du développement d'applications qui fonctionnent avec des sources de données externes. Ils sont utiles même lorsque vous devez organiser la réaction de l'application aux actions se produisant sur la page.

▍Rechercher des requêtes

• Composants dynamiques en angulaire.
• Composants dynamiques et ng-templating (Composants dynamiques et directive ng-template).

17. @Host Decorators @Host , @HostBinding et exportAs

Les @HostBinding @Host , @HostBinding et la directive @HostBinding exportAs utilisés dans Angular pour contrôler ce à quoi ils s'appliquent. De plus, ils permettent de créer des modèles concis pour l'exportation d'entités utilisables dans l'application.

Si ce qui précède ne vous semble pas particulièrement clair, nous vous recommandons de vous familiariser avec les directives et de découvrir pourquoi elles sont nécessaires. Les @HostBinding @Host , @HostBinding et la directive @HostBinding sont ce qui aide Angular à être ce qu'il est.

▍Rechercher des requêtes

• Modèles de directives angulaires (Modèles de directives angulaires).
• @Host , @HostBinding et exportAs dans Angular (Decorators @Host , @HostBinding et la directive exportAs dans Angular).

18. Gestion de l'état des applications à l'aide de NgRx

L'état de l'application est déterminé par ce que voit l'utilisateur. Si la confusion règne dans l'état de l'application, cela peut indiquer que les structures de données utilisées dans celui-ci sont mal adaptées aux changements. De telles modifications peuvent devoir être apportées aux structures de données à mesure que l'application grandit et se développe.

Alors que quelqu'un commence à comprendre les spécificités du travail avec l'état dans Angular, il aborde également la compréhension des spécificités du comportement des données dans ses applications.

Angular a son propre système de gestion d'état. Cependant, il existe une technologie, NgRx, qui vous permet de porter la gestion de l'état des applications à un niveau supérieur. En particulier, par exemple, des données peuvent être perdues lors du transfert entre une pluralité de composants parents et des composants enfants. Et NgRx vous permet de créer un référentiel centralisé et de vous débarrasser de ce problème.

▍Rechercher des requêtes

• Angular NgRx (Utilisation de RxJS en angulaire).
• Principes Flux / Redux.
• Principes de gestion de l'état angulaire.

19. Dépendance et injection de zone

L'injection de dépendance est un concept massif et universel. Si vous ne le connaissez pas très bien, vous devriez l'étudier. Angular a plusieurs façons d'injecter avec précision les dépendances. Ceci est principalement réalisé grâce à l'utilisation de constructeurs. Il s'agit d'importer dans le code uniquement ce qui est vraiment nécessaire. Cela permet d'améliorer les performances des applications.

Le concept de zones, comme l'idée d'injection de dépendances, n'est pas propre à Angular. Il s'agit d'un mécanisme qui permet à une application de surveiller l'état des tâches asynchrones tout au long de leur cycle de vie. — , , — , . .

▍

• Angular zones ( Angular).
• Dependency injections ( ).
• Angular DI ( Angular).

Résumé

Angular- — . — - , , , . . , , Angular, .

Chers lecteurs! Angular-?