Dans cet atelier, nous allons utiliser comme exemple une application de gestion d'article. L'application affiche un tableau d'article où vous pouvez ajouter et supprimer des articles. Un autre tableau affiche les articles supprimés où vous avez la possibilité de restaurer un article supprimé.
L'application est composée de trois components :
ArticleListComponent: tableau pour l'affichage des articles disponiblesArticleListDeletedComponent: tableau pour l'affichage des articles supprimésNavbarComponent: barre de menu pour la navigation entre les componentsArticleListComponentetArticleListDeletedComponent
- Cloner le repository
npm installa la racine du projet
On ne tient pas compte du component ArticleListDeletedComponent dans cette première partie
Actuellement le component ArticleListComponent manipule un tableau d'article en ajoutant, supprimant des articles.
Il est préférable de déporter toute manipulation de tableau, de localStorage etc dans un Service.
- Créer un service nommé
ArticleServicedans le répertoirecommon. - Injecter le service
ArticleServicedans le componentArticleListComponent. - Déporter toute la logique de gestion des articles dans
ArticleService - Refactoré
ArticleListComponentafin qu'il n'y ait plus aucunpush,slice,findIndex,localStorage,JSONetc dans ce component. - La manipulation d'article (
push,slice...) dans le componentArticleListComponentdoit uniquement se faire à travers le serviceArticleService
Le component ArticleListDeletedComponent n'est pas opérationnel, aucun article supprimé n'est affiché dans le tableau donc il nous est impossible de restaurer un article supprimé par erreur.
- Injecter le service
ArticleServicedans le componentArticleListDeletedComponent. - codé la récupération des articles supprimés
- codé la restauration des articles supprimés
Attention il a peut être d'autres choses à corriger dans le component ArticleListComponent et ArticleListDeletedComponent ;)