79,00

Tuto Créer une application FullStack TypeScript avec Angular et NestJS avec JavaScript, Angular

79,00

  • Une formation vidéo de 9h20m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Créer une application FullStack TypeScript avec Angular et NestJS

ajouter ce cours aux favoris retirer ce cours des favoris

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.

Table des matières de cette formation JavaScript, Angular (durée : 9h20m)

  • Introduction
    • Présentation de NestJS gratuit 00:04:41
    • Architecture d'une application NestJS gratuit 00:17:16
  • Développement de notre première application NestJS
    • Création d'un module, d'un controller et d'un service 00:13:19
    • Typage à l'aide d'une interface gratuit 00:04:49
    • Gérer le POST d'un nouveau todo 00:09:42
    • Récupérer un todo par son id 00:07:17
    • Typage du body d'une requête POST à l'aide d'un DTO 00:09:42
    • Update d'un todo existant 00:12:09
    • Tests de l'update avec Postman 00:05:26
    • Suppression d'un todo 00:08:52
  • Les pîpes
    • Créer notre premier custom pipe 00:11:32
    • Pipe qui transforme un objet posté 00:07:26
    • Pipe qui transforme un paramètre de string en number 00:08:39
    • Pipe qui enrichit le body d'un objet posté 00:12:21
  • Les interceptors
    • Les possibilités offertes par les interceptors gratuit 00:02:44
    • Créer de notre premier interceptor 00:09:12
    • Utiliser notre interceptor 00:05:31
    • Implémenter la mesure de la durée d'exécution de la requête et de la réponse 00:03:11
    • Créer un interceptor qui récupère les caractéristiques du client 00:10:05
    • Enrichir un réponse HTTP 00:07:32
    • Enrichir une réponse (second exemple) 00:07:34
    • Interceptor qui filtre ou remplace une donnée entrante 00:06:40
  • Les guards
    • Introduction aux guards 00:04:39
    • Appliquer un guard à une méthode de notre controller 00:05:29
    • Guard qui autorise uniquement un certain type de véhicule 00:03:03
    • Récupérer dans le guard des meta-données portées par une méthode du controller 00:06:12
    • Comparer les méta-données du controller et la donnée postée interceptée par le guard 00:03:43
    • Créer un custom decorator chargéde fournir des méta-données 00:06:27
  • Projet FullStack TypeScript : notre client Angular
    • Générer le projet NestJS 00:02:19
    • Installer Mongoose 00:04:49
    • Se connecter à MongoDB via Mongoose 00:06:01
    • Ajouter config.ts à .gitignore 00:01:13
    • Créer un schéma Mongoose pour la collection Articles 00:05:18
    • Créer un nouvel Article en base avec Mongoose 00:09:02
    • Ajouter un controller qui gère le POST d'un article 00:07:51
    • Pointer vers une autre collection sur MongoDB Atlas 00:02:45
  • Projet FullStack TypeScript : le module Angular Articles
    • Générer un client Angular 00:04:00
    • Utiliser un template bootstrap 00:13:26
    • Ajuster la mise en page 00:07:43
    • Ajouter les classes ccs manquantes 00:01:28
  • Projet FullStack TypeScript de CMS : module d'administration
    • Implémenter le lazy loading 00:08:33
    • Faire une requête GET de tous les articles 00:06:35
    • Autoriser le CORS et afficher les articles récupérés 00:05:53
    • Liens permettant le routage de type SPA 00:02:28
  • Projet FullStack TypeScript : créer un CMS
    • Créer un module Admin gratuit 00:07:32
    • Créer un Reactive Form permettant de poster un article 00:08:27
    • Poster un nouvel article vers le serveur NestJS 00:09:43
    • Créer un modèle Article 00:02:01
    • Getters permettant d'accéder aux erreurs de validation depuis le template 00:04:47
    • L'extension VS Code Peacock 00:02:00
  • Projet FullStack TypeScript de CMS : gestion des erreurs
    • Validation de formulaire 00:09:32
    • Gérer les erreurs de création d'article 00:08:13
  • Projet FullStack TypeScript de CMS : afficher les articles
    • Créer un interceptor NestJS qui ajoute au body un auteur d'article 00:08:55
    • Afficher un liste de résumés d'articles 00:08:40
    • Ordonner les articles par date de création côté serveur 00:02:00
  • Projet FullStack TypeScript de CMS : suppression d'articles
    • Méthode de suppression d'article 00:04:10
    • Consommer la méthode de suppression 00:07:58
    • Créer un route handler NestJS pour le verbe HTTP DELETE 00:05:08
    • Afficher les messages d'attente ou d'erreur 00:03:58
    • Rafraîchir la page après une suppression réussie 00:07:42
  • Projet FullStack TypeScript de CMS : modification d'articles
    • Gérer les requêtes HTTP PUT côté serveur NestJS 00:11:01
    • Modifier un article depuis le client Angular 00:09:26
  • Projet FullStack TypeScript de CMS : création d'utilisateurs
    • Création d'un module users NestJS 00:05:49
    • Créer un utilisateur dans MongoDB via Mongoose 00:08:43
    • Tester la création d'un utilisateur avec Postman 00:03:58
  • Projet FullStack TypeScript de CMS : modification d'articles (suite)
    • Ajout d'une méthode de modification à notre service Angular 00:06:42
    • Passer du mode lecture au mode modification 00:07:11
  • Projet FullStack TypeScript de CMS : authentifier un utilisateur
    • Créer le module Auth NestJS 00:05:29
    • Implémenter la "local strategy" de Passport 00:09:56
    • Vérification de tous les imports et exports 00:04:32
    • Créer un route handler pour le POST vers la route de login + test postman 00:06:27
    • Créer une JWT Strategy 00:08:00
    • Retourner un token JWT si le login a réussi 00:09:06
    • Tester la création et l'envoi d'un token en cas de login réussi 00:01:44
  • Projet FullStack TypeScript de CMS : créer un utilisateur côté Angular
    • Créer un module d'authentification et le loader en lazy-loading 00:05:03
    • Créer un formulaire d'inscription 00:11:39
    • Effectuer un POST vers NestJS pour créer un nouvel utilisateur 00:07:22
  • Projet FullStack TypeScript de CMS : loguer un utilisateur côté Angular
    • Créer un component de login et créer sa route 00:01:44
    • Loguer un utilisateur et recevoir un token JWT en réponse 00:10:58
    • Persister le token JWT dans localStorage 00:05:02
    • Décoder le token JWT 00:12:05
    • Afficher les boutons d'update et de delete uniquement à l'administrateur 00:02:56



Formateur : Codeconcept

Codeconcept a publié 24 tutoriels et obtenu une note moyenne de 4,7/5 sur 265 tutoriels vendus. Voir les autres formations de Codeconcept

  • 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)
Parcours Developpeur Front End
accédez à plus de 1356 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données