On pense que dans le développement frontal, l'équivalent de "
Hello world " est une application - une liste de tâches. Oui, cela vous permet de couvrir l'aspect CRUD de la création d'une application, mais les capacités du framework ou de la bibliothèque utilisés sont souvent affectées de manière très superficielle.
Angular est en constante évolution et mise à jour, mais quelque chose reste le même. Je vais parler des concepts angulaires de base que vous devez apprendre si vous souhaitez utiliser ce framework JavaScript de la meilleure façon.
Il y a beaucoup à apprendre pour travailler avec Angular, et les nouveaux arrivants sont souvent bloqués au niveau d'entrée simplement parce qu'ils ne savent pas où et quoi chercher. Par conséquent, j'ai écrit un guide (qui comprend un bref résumé des bases d'Angular), que je serais moi-même très utile lorsque je commencerais à travailler avec Angular 2+.
Traduit en Alconost1. L'architecture modulaire d'Angular
Théoriquement, vous pouvez mettre tout le code Angular sur une page et dans une grande fonction, mais ce n'est pas recommandé: c'est une manière inefficace de structurer le code qui vous empêche de révéler le but d'Angular.
Une partie de l'architecture de ce cadre est l'utilisation active du concept de modules, qui sont du code qui n'a qu'un seul but. Une application angulaire se compose essentiellement de modules, dont certains sont isolés, tandis que d'autres sont communs.
Il existe de nombreuses façons d'organiser les modules dans une application. En explorant diverses structures architecturales, vous pouvez déterminer comment l'application évoluera au fur et à mesure de son développement, et apprendre également à isoler le code et à réduire l'interdépendance.
Que google:- Motifs architecturaux angulaires,
- Architecture d'application évolutive angulaire.
2. Flux de données à sens unique et immuabilité
La liaison bilatérale a conquis le cœur de nombreux développeurs frontaux à l'époque d'Angular 1 - en fait, c'était l'une des principales caractéristiques distinctives de ce cadre. Cependant, au fur et à mesure du développement de l'application, cette approche a commencé à créer des problèmes en termes de performances.
Il s'est avéré que la liaison bidirectionnelle n'est pas nécessaire partout
Angular 2+ permet toujours de l'implémenter, mais pour cela, il doit être explicitement demandé - par conséquent, le développeur doit penser aux flux de données et à leur direction. De plus, cela permet à l'application de gérer les données de manière plus flexible, car vous pouvez spécifier comment les transférer.
Que google:- travailler avec des flux de données en angulaire,
- écoulement unidirectionnel en angulaire,
- avantages de la capture unidirectionnelle.
3. Directives attributives et structurelles
Une directive est une extension de HTML avec des éléments supplémentaires. Les directives d'attribut vous permettent de modifier les propriétés d'un élément. Les directives structurelles modifient la disposition en ajoutant ou en supprimant des éléments DOM.
Par exemple,
ngSwitch et
ngIf sont des directives structurelles: ils évaluent les paramètres et déterminent si des parties spécifiques du DOM doivent exister.
Les directives d'attribut sont des comportements personnalisés attachés à un élément, un composant ou d'autres directives.
En apprenant à utiliser les directives de ces deux types, vous pouvez étendre les capacités de votre propre application et réduire la duplication de code dans le projet. Les directives d'attribut aident également à centraliser le comportement spécifique utilisé dans diverses parties de l'application.
Que google:- Directives d'attributs angulaires,
- Directives structurelles angulaires,
- Modèles de directives structurelles angulaires.
4. Gestionnaires du cycle de vie des composants
Chaque application a un cycle de vie qui détermine comment les objets sont créés, traités, puis supprimés. Dans le cadre angulaire, le cycle de vie des composants ressemble à ceci:
→ → → → → DOM
Nous avons la possibilité de traiter les points clés de ce cycle et de nous concentrer sur des points spécifiques dans le temps ou des événements. Cela vous permet de créer des réponses appropriées et de personnaliser le comportement en fonction des différentes étapes du composant.
Par exemple, si vous souhaitez charger des données avant de rendre la page, cela peut être fait via
ngOnInit() . Et si vous devez vous déconnecter de la base de données, cela peut être fait au moment de
ngOnDestroy() .
Que google:- gestionnaires de cycle de vie des composants en angulaire;
- cycle de vie des composants.
5. Services observés et HTTP
Les services observés ne sont pas une caractéristique unique d'Angular, mais plutôt quelque chose d'ES7. Néanmoins, cette fonctionnalité a été implémentée dans le cadre du cadre, et les idées correspondantes sont également bien transférées vers React, Vue et d'autres bibliothèques et cadres liés à JavaScript.
Que google:- Modèles d'observateurs JavaScript
- objets observés et HTTP en angulaire,
- Objets observés dans ES7.
6. L'architecture des composants intelligents et stupides
Souvent, lors de l'écriture d'applications sur Angular, tout est vidé dans un seul composant, mais ce n'est pas la meilleure approche. Le concept de composants intelligents et stupides dans Angular mérite certainement plus d'attention, en particulier chez les débutants.
Le rôle du composant dans le plan général de l'application est déterminé selon qu'il est «stupide» ou «intelligent». Les composants "idiots" ne suivent généralement pas l'état, et leur comportement est facile à prévoir et à comprendre - si possible, les composants doivent être conçus de cette façon.
Les composants intelligents sont plus difficiles à comprendre car ils impliquent des entrées et des sorties. Pour tirer pleinement parti des capacités d'Angular, vous devez comprendre l'architecture des composants intelligents et stupides: de cette façon, vous maîtriserez les modèles et les façons de penser qui vous aideront à écrire du code plus productif et à créer la bonne interaction au sein de l'application.
Que google:- composants angulaires intelligents et stupides,
- composants sans état stupides
- composants de présentation
- composants angulaires intelligents.
7. Structures d'application standard
La possibilité de travailler avec la ligne de commande pour déterminer la structure de l'application est utile, mais ce n'est pas une panacée. La création d'une application sur Angular (et toute application en général) est similaire à la construction d'une maison: il existe des processus bien établis qui ont été optimisés par la communauté depuis de nombreuses années et vous permettent d'écrire des applications plus efficaces et productives.
Et Angular ici ne fait pas exception.
La plupart des plaintes concernant Angular peuvent être entendues par ceux qui essaient de l'étudier sans comprendre la structure. Une syntaxe claire et concise est capturée à la volée, cependant, pour comprendre la structure de l'application, vous devez connaître le contexte, les exigences et la façon dont tout s'articule au niveau conceptuel et pratique. Après avoir étudié les différentes structures possibles des applications angulaires et des recommandations pour leur application, vous aurez une idée de comment écrire la vôtre.
Que google:- Applications angulaires avec un référentiel,
- Bibliothèques angulaires, packages angulaires,
- Faisceaux angulaires
- Micro-applications angulaires.
- monorepositoires.
8. Syntaxe pour la liaison de modèle
Le point fort du framework JavaScript en question est la liaison, et il est également devenu l'une des raisons de sa création. La liaison de modèle combine HTML statique et JavaScript, et la syntaxe de liaison de modèle d'Angular agit comme un intermédiaire entre les deux technologies.
Si vous apprenez à utiliser ces fonctionnalités correctement et en temps opportun, transformer une page statique en quelque chose d'interactif deviendra beaucoup plus facile et plus agréable. Explorez divers scénarios de liaison: liaison de propriété, liaison d'événement, interpolation et liaison bidirectionnelle.
Que google:- liaison aux propriétés angulaires,
- liaison d'événement en angulaire,
- liaison bidirectionnelle en angulaire, interpolation en angulaire,
- passage des constantes à Angular.
9. Modules de routage et de fonction
Dans le cas d'Angular, les modules fonctionnels sont généralement sous-estimés, bien qu'il s'agisse en fait d'un excellent moyen de rationaliser et de restreindre un ensemble d'exigences métier. Ils aident à différencier les responsabilités et à prévenir la pollution du code à long terme.
Il existe cinq types de modules fonctionnels (domaine, routable, routage, service et widget), et chacun a son propre ensemble de capacités. En apprenant à utiliser des modules fonctionnels en combinaison avec le routage, vous pouvez créer des ensembles de fonctions distincts et fournir une séparation compréhensible et pratique des capacités d'application.
Que google:- Modules de fonction angulaire,
- structures fonctionnelles communes en angulaire,
- fournisseurs de modules de fonction.
- chargement paresseux avec routage et modules fonctionnels.
10. Formulaires et validation des données (formulaires réactifs et validateurs)
Les formulaires font partie intégrante du développement frontal.
Et là où il y a des formulaires, il y a la vérification des données.
Vous pouvez créer des formulaires intelligents qui fonctionnent bien avec les données sur le cadre angulaire de différentes manières, et les formulaires réactifs sont l'approche la plus courante. Cependant, il existe d'autres options, à savoir les modèles et les validateurs personnalisés.
En comprenant le fonctionnement des validateurs et CSS, vous pouvez accélérer votre flux de travail et préparer votre application pour la gestion des erreurs.
Que google:- validation de formulaire en angulaire,
- validation des données basée sur un modèle,
- validation des formes réactives,
- validateurs synchrones et asynchrones en angulaire,
- validateurs intégrés
- validateurs personnalisés en angulaire,
- recouper les champs.
11. Projection de contenu
Le cadre angulaire a un concept tel que la projection de contenu, qui vous permet de transférer efficacement les données des composants parents vers les composants enfants. Au début, cela peut sembler compliqué, mais en fait, dans ce cas, les vues sont placées à l'intérieur d'autres vues - cela crée la vue principale.
Souvent, la projection de contenu est comprise superficiellement: comme si nous intégrions des vues enfant dans la vue parent. Cependant, pour une compréhension plus approfondie du cadre, il est nécessaire de comprendre comment les données sont transférées entre différentes représentations - c'est là que la connaissance du concept de projection de contenu est utile.
Après avoir étudié la projection de contenu, vous apprendrez à comprendre le flux de données d'application et à déterminer où il subit des modifications.
Que google:- projeter du contenu dans Angular,
- relation des vues des parents et des enfants dans Angular,
- relations entre les données dans les vues angulaires.
12. Changer la stratégie de détection «onPush»
Par défaut, Angular utilise une stratégie de détection de changement standard dans laquelle les composants sont toujours vérifiés. Il n'y a rien de mal à utiliser le comportement par défaut; cependant, une telle détection des modifications peut être inefficace.
Pour les petites applications, la vitesse et les performances restent satisfaisantes. Mais dès que l'application atteint une certaine taille, le lancement de certains éléments ralentit, notamment dans les navigateurs plus anciens.
La
onPush détection des modifications
onPush accélère considérablement l'application car elle ne repose pas sur une vérification constante, mais dépend du fonctionnement de déclencheurs spécifiques.
Que google:- détecter les changements onPush dans Angular.
13. Défenseurs de l'itinéraire, chargement pré et retardé
Si l'application dispose d'un identifiant de compte, vous aurez besoin de défenseurs d'itinéraire. L'essentiel est de protéger certaines vues de la visualisation non autorisée, ce qui dans de nombreux cas est une exigence obligatoire. Les défenseurs de route font office d'interface entre le routeur et la route demandée: ils déterminent s'il faut ou non autoriser l'accès à une route spécifique. Il s'agit d'un sujet assez vaste: par exemple, cela inclut la question de la prise de décisions concernant le routage en fonction de la période de validité des jetons, de l'authentification des rôles d'utilisateur et de la protection des itinéraires.
Pour accélérer le chargement de l'application et rendre son utilisation plus pratique, un chargement préliminaire et différé sera également utile. Il convient également de noter que ces outils ne permettent pas seulement de décider de télécharger un ensemble d'images spécifique: ils aident à améliorer l'architecture associée et à charger différentes parties de l'application qui peuvent se trouver dans différents domaines et zones de définition.
Que google:- gardes routiers à Angular,
- modèles d'authentification en angulaire,
- Modules angulaires de pré et post charge
- modèles d'itinéraires sécurisés dans Angular.
14. Chaînes personnalisées
Les canaux du cadre angulaire simplifient considérablement le formatage des données. De nombreux types de formatage (dates, devises, pourcentages et casse des caractères) sont déjà couverts par des canaux préconfigurés et prêts à l'emploi, mais vous aurez probablement besoin d'autre chose.
Et ici, les canaux non standard sont utiles, ce qui facilite la création de vos propres filtres et la conversion des formats de données de la manière souhaitée. C'est assez simple - essayez-le.
Que google:- canaux non standard en angulaire.
15. Décorateurs @ViewChild et @ContentChild
ViewChild et
ContentChild sont utilisés pour communiquer entre les composants. L'essence du cadre angulaire est que plusieurs composants assemblés ensemble, comme une mosaïque, sont utilisés. Cependant, cette conception ne peut rien faire si ses pièces sont isolées les unes des autres.
Pour cela, les décorateurs
ViewChild et
ContentChild sont nécessaires, après avoir appris à les utiliser, vous pourrez accéder aux composants associés, ce qui simplifie la tâche d'échange de données et permet également de transférer des données et des événements causés par des composants associés.
Que google:- Décorateurs angulaires,
ViewChild et ContentChild en angulaire,
- échange de données entre composants dans Angular.
16. Composants dynamiques et "ng-template"
Dans le cadre angulaire, les applications sont construites sur la base de composants. Cependant, tous les composants ne sont pas statiques - certains doivent être créés à la volée, pas précompilés.
Les composants créés par l'application à la volée sont appelés dynamiques. Les composants statiques supposent une certaine immuabilité: nous attendons certaines valeurs en entrée et en sortie et le comportement prévisible correspondant.
Les composants dynamiques sont rendus au besoin. Ils sont pratiques à utiliser lors de la création d'applications qui peuvent écouter des sources externes, changer leur état ou représenter des réactions aux actions qui se sont produites sur la page.
Que google:- composants dynamiques en angulaire,
- composants dynamiques et ng-template.
17. Host , Host Binding et «exportAs»
@Host ,
@HostBinding sont des décorateurs et
exportAs est une propriété du décorateur @Directive. Leur but est d'étendre l'effet des paramètres auxquels ils sont attachés. Ils offrent également la possibilité de créer de petits modèles d'exportation à utiliser dans l'application.
Si ce qui précède vous semble incompréhensible, vous devez étudier les directives angulaires et comprendre leur objectif.
@Host ,
@HostBinding et
exportAs sont des éléments importants du concept de directives.
Que google:- Modèles d'utilisation des directives angulaires
@Host , @HostBinding et exportAs en angulaire.
18. Gestion de l'État à l'aide de NgRx
L'état de l'application détermine finalement les données affichées pour l'utilisateur. Et si l'application est un tas de spaghettis, il y a une chance que la structure de données entière devienne non fiable et en cas de changement, plantez.
Comprendre pourquoi les états sont nécessaires dans Angular vous permet de comprendre comment et pourquoi les données se comportent de cette façon et non autrement.
Le cadre angulaire a son propre système de gestion des états, mais NgRx fait un bien meilleur travail de centralisation des états et des données associées. Des données peuvent être perdues dans la chaîne de relation parent-enfant, et NgRx crée un référentiel centralisé pour eux et élimine ce problème.
Que google:- Angular NgRx,
- Principes de Flux et Redux
- Principes de gestion de l'état angulaire.
19. Zones et injection de dépendances
L'injection de dépendance est généralement un concept à grande échelle, donc si vous n'êtes pas tout à fait dans le sujet, vous devriez mieux comprendre. Dans Angular, il existe plusieurs façons d'injecter soigneusement les dépendances, mais cela se fait principalement à l'aide du constructeur. Ainsi, vous ne pouvez pas tout télécharger à la suite, mais importer le plus nécessaire - et, par conséquent, augmenter l'efficacité de l'application.
Comme l'injection de dépendance, il y avait des «zones» avant Angular. Ils permettent à l'application de détecter les tâches asynchrones. Ceci est important car les tâches asynchrones peuvent changer l'état interne de l'application - et donc la présentation. Les zones facilitent la détection des changements.
Que google:- zones en angulaire,
- injection de dépendance
- DI angulaire.
Conclusion
L'angulaire est un vaste sujet à explorer. En créant des applications sur ce framework, vous pouvez en apprendre beaucoup, mais il est parfois difficile de savoir quoi rechercher et où creuser. Au tout début, il peut être difficile de naviguer dans un environnement inconnu. J'espère que ce court didacticiel a donné un aperçu des concepts qui vont au-delà des didacticiels angulaires habituels, et a permis un examen plus large de ce cadre dans son ensemble.
À propos du traducteurL'article a été traduit par Alconost.
Alconost
localise des jeux , des
applications et des sites dans 70 langues. Traducteurs en langue maternelle, tests linguistiques, plateforme cloud avec API, localisation continue, chefs de projet 24/7, tout format de ressources de chaîne.
Nous réalisons également
des vidéos de publicité et de formation - pour les sites qui vendent, présentent des images, de la publicité, des formations, des teasers, des explicateurs, des bandes-annonces pour Google Play et l'App Store.
→
En savoir plus