Dans ce TP, vous allez créer une Single Page Application (SPA) avec Angular dans le but de découvrir différentes notions telles que les composants, les services, les appels HTTP et les Observables, le routage et bien sur les tests unitaires qui assureront la qualité et la non régression de vos codes.
Clonez ce dépôt où bon vous semble :
git clone https://github.com/liorchamla/amu-tp-angular-todo.git
Ouvrez le dossier dans votre éditeur de code favoris !
Plutôt que de cloner le dépôt, vous pouvez aussi travailler directement en ligne via Gitpod.
Pour cela il vous faudra forker le dépôt sur votre propre compte (bouton Fork en haut à droite de GitHub). Une fois sur la page du fork (la copie de ce dépôt sur votre propre compte), vous pourrez simplement ajouter gitpod.io/#
juste devant l'URL du dépôt.
Par exemple, le lien suivant ouvrira ce dépôt dans Gitpod : https://gitpod.io/#https://github.com/liorchamla/amu-tp-angular-todo
Attention : le travail ne sera pas sauvegardé d'une session de travail à l'autre, vous devrez systématiquement commit et push vos modifications si vous espérez les retrouver ensuite !
Une fois que le projet est mis en place, vous pouvez tout simplement suivre le TP étape par étape :
- Installation des outils de développement
- Afficher une liste des tâches
- Refactoriser du code dans un composant
- Créer des types et tirer profit de TypeScript
- Ajouter une tâche
- Appels HTTP et API REST
- But de l'exercice
- Créer un projet sur Supabase
- Comprendre comment fonctionne l'API de Supabase
- Requête HTTP avec Angular et le HttpClientModule
- Obtenir une instance de HttpClient grâce à l'injection de dépendances
- Ne pas utiliser le constructeur pour des opérations complexes
- Ajouter une tâche dans l'API
- Modifier le statut d'une tâche
- Ce que vous avez appris
- Refactoriser de la logique complexe dans un service
- Gérer la navigation (routing)
- Tester son code et éviter les régressions