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

TUTO Créer une application FullStack TypeScript avec Angular et NestJS

Codeconcept
79,00€
3 paiements de 26,33€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

Chapitre 1 : Introduction
21m57s
 
Leçon 1Présentation de NestJS
Leçon 2Architecture d'une application NestJS
Chapitre 2 : Développement de notre première application NestJS
1h11m
 
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
39m58s
 
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
52m29s
 
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
29m33s
 
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
39m18s
 
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
26m37s
 
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
23m29s
 
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
34m30s
 
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
17m45s
 
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
19m35s
 
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
28m56s
 
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
20m27s
 
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
18m30s
 
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)
13m53s
 
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
45m14s
 
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
24m04s
 
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
32m45s
 
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

Avec quelles versions de logiciels ce tuto est-il compatible ?

NestJS 6.0, Angular 8.2.3

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)

Payer plus tard ou en 3x

Prix d'achat : 79,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 26,33 €
tous les mois, sans intérêts
Total : 79,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1366 tutos gratuits

Notre politique de protection des données