Réaliser une mini-application Angular permettant d'afficher une liste d'utilisateurs récupérée depuis une API, gérer la sélection et le détail d'un utilisateur via routing, et effectuer des opérations CRUD simples.
-
Créer un nouveau projet Angular via la CLI.
-
Créer un service pour récupérer des utilisateurs depuis l'API :
GET https://jsonplaceholder.typicode.com/users -
Implémenter les composants suivants :
UserListComponent: Affiche une liste des utilisateurs.UserDetailComponent: Affiche les détails d'un utilisateur sélectionné. L'utilisateur est chargé à partir de l'ID dans l'URL (/users/:id).UserFormComponent: Permet la création ou la modification d'un utilisateur via un formulaire réactif.
-
Gérer le routing :
- Configurer le routing Angular pour afficher la fiche utilisateur (
UserDetailComponent) au clic sur un utilisateur dans la liste. - Utiliser les paramètres d'URL (
:id) pour charger dynamiquement le détail de l'utilisateur.
- Configurer le routing Angular pour afficher la fiche utilisateur (
-
Charger les posts liés à l'utilisateur dans
UserDetailComponent:GET https://jsonplaceholder.typicode.com/users/{id}/posts -
Implémenter le composant formulaire (
UserFormComponent) :- En mode création, les champs du formulaire sont vides.
- En mode modification, charger les données de l'utilisateur sélectionné dans le formulaire.
- Envoyer les données via POST (création) ou PUT (modification).
- Recharger automatiquement la liste des utilisateurs après une opération réussie.
- Gestion des erreurs et indicateur de chargement lors des opérations réseau.
- UI soignée pour une meilleure expérience utilisateur.
- Compréhension de la gestion de l'état via routing et paramètres URL
- Utilisation efficace des formulaires réactifs
- Architecture claire et maintenable
- Code source via un repository Github
- Un court README.md précisant vos choix techniques et les éventuels axes d'amélioration.