Créer une application FullStack TypeScript avec Angular et NestJS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
9h20
de formation
82
leçons vidéo
18
chapitres
Intermédiaire
niveau requis
Codeconcept
Codeconcept
Formateur

Créer une application FullStack TypeScript avec Angular et NestJS

4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
9h20
de formation
82
leçons vidéo
18
chapitres

NestJS permet de créer des API REST bien architecturées grâce aux choix très marqués faits par l'auteur de cette plateforme. Nest ayant dépassé les 35 000 étoiles sur Github et commençant à apparaître sur les offres d'emploi francophones, il est temps de monter en compétences sur cette plateforme.

Bien que Nest puisse être utilisé avec n'importe quel client, cette formation utilisera un client Angular 8.
En effet, développeuses et développeurs Angular se sentiront très rapidement comme à la maison grâce aux modules, decorators, providers et autres bénéfices apportés par TypeScript auxquels ils sont habitués avec Angular.

Initialement prévue pour couvrir principalement NestJS puis une interaction NestJS / Angular, cette formation s'est enrichie pour devenir une formation "modern MEAN", où Nest sera utilisé en remplacement de Node "tout court".
 

Au programme de ce tuto Créer une application FullStack TypeScript avec Angular et NestJS

Cette formation se passera en 3 temps.
Les premières heures de formation consacrées exclusivement à Nest permettront de prendre en main Nest par la pratique en créant une application permettant d'implémenter le CRUD.

Puis, nous approfondirons ensemble, grâce à des sections dédiées, des notions avancées de Nest telles que :

  • pipes
  • interceptors
  • guards

Enfin, nous créerons ensemble un CMS qui permettra de mettre en oeuvre la stack :

  • MongoDB,
  • Express via NestJS,
  • Angular 8,
  • NestJS.

Le projet fil rouge permettra de créer un CMS simple mais suffisamment évolué pour vous permettre d'implémenter :

  • la création d'une API REST à l'aide de Nest,
  • d'utiliser MongoDB via Mongoose via des packages Nest dédiés,
  • de créer un système d'autentification et d'autorisation via JWT dans le context de Nest,
  • de gérer les problèmes de CORS en Nest,
  • etc...

Entrez dès maintenant dans l'univers du FullStack TypeScript grâce à cette nouvelle formation NestJS et modern MEAN.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
Développement de notre première application NestJS
Chapitre 3
Les pîpes
Chapitre 4
Les interceptors
Chapitre 5
Les guards
Chapitre 6
Projet FullStack TypeScript : notre client Angular
Chapitre 7
Projet FullStack TypeScript : le module Angular Articles

Table des matières

Chapitre 1 : Introduction

21m57
 
Leçon 1Présentation de NestJS
Leçon 2Architecture d'une application NestJS

Chapitre 2 : Développement de notre première application NestJS

1h11
 
Leçon 1Création d'un module, d'un controller et d'un service
Leçon 2Typage à l'aide d'une interface
Leçon 3Gérer le POST d'un nouveau todo
Leçon 4Récupérer un todo par son id
Leçon 5Typage du body d'une requête POST à l'aide d'un DTO
Leçon 6Update d'un todo existant
Leçon 7Tests de l'update avec Postman
Leçon 8Suppression d'un todo

Chapitre 3 : Les pîpes

39m58
 
Leçon 1Créer notre premier custom pipe
Leçon 2Pipe qui transforme un objet posté
Leçon 3Pipe qui transforme un paramètre de string en number
Leçon 4Pipe qui enrichit le body d'un objet posté

Chapitre 4 : Les interceptors

52m29
 
Leçon 1Les possibilités offertes par les interceptors
Leçon 2Créer de notre premier interceptor
Leçon 3Utiliser notre interceptor
Leçon 4Implémenter la mesure de la durée d'exécution de la requête et de la réponse
Leçon 5Créer un interceptor qui récupère les caractéristiques du client
Leçon 6Enrichir un réponse HTTP
Leçon 7Enrichir une réponse (second exemple)
Leçon 8Interceptor qui filtre ou remplace une donnée entrante

Chapitre 5 : Les guards

29m33
 
Leçon 1Introduction aux guards
Leçon 2Appliquer un guard à une méthode de notre controller
Leçon 3Guard qui autorise uniquement un certain type de véhicule
Leçon 4Récupérer dans le guard des meta-données portées par une méthode du controller
Leçon 5Comparer les méta-données du controller et la donnée postée interceptée par le guard
Leçon 6Créer un custom decorator chargéde fournir des méta-données

Chapitre 6 : Projet FullStack TypeScript : notre client Angular

39m18
 
Leçon 1Générer le projet NestJS
Leçon 2Installer Mongoose
Leçon 3Se connecter à MongoDB via Mongoose
Leçon 4Ajouter config.ts à .gitignore
Leçon 5Créer un schéma Mongoose pour la collection Articles
Leçon 6Créer un nouvel Article en base avec Mongoose
Leçon 7Ajouter un controller qui gère le POST d'un article
Leçon 8Pointer vers une autre collection sur MongoDB Atlas

Chapitre 7 : Projet FullStack TypeScript : le module Angular Articles

26m37
 
Leçon 1Générer un client Angular
Leçon 2Utiliser un template bootstrap
Leçon 3Ajuster la mise en page
Leçon 4Ajouter les classes ccs manquantes

Chapitre 8 : Projet FullStack TypeScript de CMS : module d'administration

23m29
 
Leçon 1Implémenter le lazy loading
Leçon 2Faire une requête GET de tous les articles
Leçon 3Autoriser le CORS et afficher les articles récupérés
Leçon 4Liens permettant le routage de type SPA

Chapitre 9 : Projet FullStack TypeScript : créer un CMS

34m30
 
Leçon 1Créer un module Admin
Leçon 2Créer un Reactive Form permettant de poster un article
Leçon 3Poster un nouvel article vers le serveur NestJS
Leçon 4Créer un modèle Article
Leçon 5Getters permettant d'accéder aux erreurs de validation depuis le template
Leçon 6L'extension VS Code Peacock

Chapitre 10 : Projet FullStack TypeScript de CMS : gestion des erreurs

17m45
 
Leçon 1Validation de formulaire
Leçon 2Gérer les erreurs de création d'article

Chapitre 11 : Projet FullStack TypeScript de CMS : afficher les articles

19m35
 
Leçon 1Créer un interceptor NestJS qui ajoute au body un auteur d'article
Leçon 2Afficher un liste de résumés d'articles
Leçon 3Ordonner les articles par date de création côté serveur

Chapitre 12 : Projet FullStack TypeScript de CMS : suppression d'articles

28m56
 
Leçon 1Méthode de suppression d'article
Leçon 2Consommer la méthode de suppression
Leçon 3Créer un route handler NestJS pour le verbe HTTP DELETE
Leçon 4Afficher les messages d'attente ou d'erreur
Leçon 5Rafraîchir la page après une suppression réussie

Chapitre 13 : Projet FullStack TypeScript de CMS : modification d'articles

20m27
 
Leçon 1Gérer les requêtes HTTP PUT côté serveur NestJS
Leçon 2Modifier un article depuis le client Angular

Chapitre 14 : Projet FullStack TypeScript de CMS : création d'utilisateurs

18m30
 
Leçon 1Création d'un module users NestJS
Leçon 2Créer un utilisateur dans MongoDB via Mongoose
Leçon 3Tester la création d'un utilisateur avec Postman

Chapitre 15 : Projet FullStack TypeScript de CMS : modification d'articles (suite)

13m53
 
Leçon 1Ajout d'une méthode de modification à notre service Angular
Leçon 2Passer du mode lecture au mode modification

Chapitre 16 : Projet FullStack TypeScript de CMS : authentifier un utilisateur

45m14
 
Leçon 1Créer le module Auth NestJS
Leçon 2Implémenter la "local strategy" de Passport
Leçon 3Vérification de tous les imports et exports
Leçon 4Créer un route handler pour le POST vers la route de login + test postman
Leçon 5Créer une JWT Strategy
Leçon 6Retourner un token JWT si le login a réussi
Leçon 7Tester la création et l'envoi d'un token en cas de login réussi

Chapitre 17 : Projet FullStack TypeScript de CMS : créer un utilisateur côté Angular

24m04
 
Leçon 1Créer un module d'authentification et le loader en lazy-loading
Leçon 2Créer un formulaire d'inscription
Leçon 3Effectuer un POST vers NestJS pour créer un nouvel utilisateur

Chapitre 18 : Projet FullStack TypeScript de CMS : loguer un utilisateur côté Angular

32m45
 
Leçon 1Créer un component de login et créer sa route
Leçon 2Loguer un utilisateur et recevoir un token JWT en réponse
Leçon 3Persister le token JWT dans localStorage
Leçon 4Décoder le token JWT
Leçon 5Afficher les boutons d'update et de delete uniquement à l'administrateur

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Faut-il connaître Angular et NestJS pour suivre cette formation ?

Non. En revanche il est indispensable de connaître HTML, CSS et JavaScript.

A qui est destinée cette formation ?

Aux développeuses et développeurs web souhaitant monter en compétences sur Angular et NestJS.

Que contient le fichier source ?

Le code source du client Angular et du serveur NestJS de l'application file rouge (la créationd d'un CMS)

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
78,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
9h20 de vidéo • 18 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 754 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1421 tutos gratuits

Notre politique de protection des données