Comprendre l'architecture des composants: refactorisation d'une application angulaire

Ce didacticiel montre comment refacteur une application angulaire monolithique dans une architecture de composants plus modulaire. Nous décomposons un seul composant en composants plus petits et réutilisables, améliorant la maintenabilité et la compréhension.

Améliorations de clés:

• maintenabilité améliorée: Le refactorisation en composants plus petits rend le code plus facile à comprendre, à modifier et à déboguer.
• Réutilisabilité: Les composants plus petits peuvent être réutilisés sur différentes parties de l'application.
• Structure plus claire: Une arbre de composants structurés améliore l'organisation globale et la lisibilité du code.
• Composants intelligents vs muets: L'approche utilise des composants "intelligents" (gestion des données et logique) et des composants "stupides" (présentation de gestion), promouvant une séparation propre des préoccupations.
• Communication efficace: Les composants communiquent efficacement en utilisant des événements personnalisés et des liaisons de propriétés, en évitant le couplage serré.
• Évolutivité: Déplacer le fournisseur TodoDataService vers AppModule assure la disponibilité du service à l'échelle de l'application, soutenant la croissance future et le chargement paresseux.
• testabilité: La conception modulaire simplifie les tests unitaires.

Recapt de la partie 1:

La partie 1 a couvert la configuration de l'application TODO avec la CLI angulaire, la création d'une classe Todo, un service TodoDataService et l'utilisation AppComponent pour l'interface utilisateur. L'architecture de l'application était une seule, grande AppComponent.

refactoring dans la partie 2:

Cette partie Refactors AppComponent en créant:

• TodoListHeaderComponent: gère la création de nouveaux todos.
• TodoListComponent: Affiche la liste des todos.
• TodoListItemComponent: affiche un seul élément de TODO.
• TodoListFooterComponent: montre le nombre de todos restants.

Objectifs d'apprentissage:

• Comprendre l'architecture des composants angulaires.
• Utilisation de liaisons de propriétés pour transmettre des données dans les composants.
• Utilisation des écouteurs d'événements pour gérer les événements émis par les composants.
• Avantages des composants plus petits et réutilisables.
• la différence entre les composants intelligents et stupides.

PRENDRE:

1. Installez la dernière CLI angulaire: npm install -g @angular/cli@latest (ou utilisez npm uninstall -g @angular/cli angular-cli; npm cache clean; npm install -g @angular/cli@latest pour supprimer une version précédente).
2. Clone le référentiel: git clone git@github.com:sitepoint-editors/angular-todo-app.git
3. Installez les dépendances: cd angular-todo-app; npm install
4. Découvrez la partie 1: git checkout part-1
5. Exécutez l'application: ng serve

L'apposant App:

L'original AppComponent contenait toute la logique et l'interface utilisateur de l'application dans un seul composant, ce qui n'est pas idéal pour la maintenabilité.

Création de nouveaux composants:

Le tutoriel détaille la création de chaque nouveau composant à l'aide de la CLI angulaire (ng generate component <component-name></component-name>), en déplaçant le HTML et la logique pertinents de AppComponent aux nouveaux composants. Il met l'accent sur l'utilisation des décorateurs @Input() et @Output() pour la liaison des données et la manipulation des événements, ce qui rend les nouveaux composants "stupides" et réutilisables.

Moving TodoDataService:

Le fournisseur TodoDataService est déplacé de AppComponent à AppModule pour assurer l'accessibilité à l'échelle de l'application.

Résumé:

Cette partie refactue avec succès l'application, démontrant les meilleures pratiques dans l'architecture des composants angulaires. La partie suivante intégrera une API REST. Tout le code est disponible sur github. L'article comprend également une section FAQ traitant des concepts clés dans l'architecture des composants angulaires.

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!