Angular et NestJS utilisés conjointement permettent de créer des applications FullStack TypeScript sans perdre de temps en configurations complexes. Dans cette formation en ligne résolument pratique, nous allons créer une application de Flash Cards qui permettra de :
- créer un backend NestJS,
- gérer les problème de CORS,
- créer ses propres module, controler et service NestJS,
- créer un client Angular 9,
- consommer depuis le client Angular 9 l'API REST du serveur NestJS,
- créer un service Angular,
- concevoir et implémenter des fonctionnalités proches du terrain,
- utiliser une animation CSS dans un client Angular,
- etc...
>Seule la pratique régulière permet de progresser en programmation.
Ce projet concret de flash cars est complexe mais humainement faisable en quelques soirées ou un jour de week-end. Il vous permettra de continuer à pratiquer votre art de la programmeur.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Bon tuto !
Table des matières de cette formation Angular, JavaScript (durée : 2h07m)
-
Introduction
- Présentation du projet fil rouge gratuit 00:02:26
-
Création d'un serveur web avec NestJS
- Générer un projet NestJS gratuit 00:08:06
- Générer un Cards module, son controler et son service 00:04:34
- Créer une méthode dans un service et une interface 00:05:00
- Créer une route permettant de gérer une requête GET de cards 00:04:22
-
Création du client Angular 9
- Générer notre application Angular 9 00:02:45
- Créer un service Angular qui va requêter les cards de NestJS 00:11:26
- Résoudre les problèmes de CORS 00:03:48
- Passer chaque card en tant qu'input property 00:08:01
- Animer vos cards à l'aide de classes CSS 00:07:29
- Envoyer une réponse d'un composant enfant vers son parent 00:10:04
- Créer une interface Answer 00:01:50
- Consolider les réponses 00:04:13
- Ajouter Bootstrap 4 00:06:08
-
Sauvegarder les réponses
- Afficher les boutons "save" et "restart" quand toutes les questions ont été vues 00:05:24
- Sauvgarder toutes les réponses côté NestJS 00:09:39
- Poster la demande de sauvegarde de réponses 00:07:33
- Afficher uniquement les cards auxquelles l'utilisateur n'a pas su répondre 00:07:32
- Rafraîchissement des cards côté client 00:04:02
- Remettre le jeu à zéro 00:13:32
- Fichiers sourcestélécharger
- Certificat
Formateur : Codeconcept
-
Un bon exemple, toujours expliqué de manière pédagogique
-
Avec quelle version de logiciel ce tuto est-il compatible ?Angular
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissé