4.7/5 Trustpilot (1395 avis)
Créer une application FullStack TypeScript avec Angular et NestJS
Créer une application FullStack TypeScript avec Angular et NestJS
Formation MEAN : devenez développeur full stack Javascript
La MEAN est une stack Javascript qui va vous permettre de créer des applications web modernes.
Elle est constituée de MongoDB, Express.js, Angular et Node.js.
Dans cette formation résolument pratique, vous allez apprendre à créer une application FullStack JavaScript.
Tout au long de cette formation, vous allez créer un CMS qui vous permettra d'implémenter de nombreuses fonctionnalités et de nombreuses techniques telles que :
- créer une API REST à l'aide de Node et Express.js
- faire du CRUD (Create Read Update Delete) vers une base de données MongoDB à l'aide de Mongoose
- tester votre API à l'aide de Postman
- authentifier des utilisateurs avec Passport
- créer un client Angular (à l'aide d'Angular 7)
- faire des requêtes AJAX depuis votre client Angular vers votre API REST
- améliorer le "look & feel" de vos applications Angular à l'aide d'Angular Material
- poster du contenu depuis un formulaire Angular vers votre serveur Express
- uploader des images vers votre serveur Express
- générer des images de taille réduite automatiquement à partir des images uploadées
- etc ...
Et tout cela, avec le support du code source fourni sur un deux repo Github (un dédié à la partie backend, l'autre à la partie front).
Le développement est un savoir faire : montez en compétence ou progressez en développement FullStack JavaScript à l'aide de cette formation orientée projet.
Pré-requis pour suivre cette formation :
- Connaissances de bases indispensables en Angular 2+ telles que Components, Modules, Services et RxJS (idéalement, avoir suivi la formation Angular 6, Angular Material et RxJS 6 par la pratique)
- Niveau intermédiaire en HTML et JavaScript
- Des connaissances de bases sur Node et MongoDB seront un atout mais pas une nécessité
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Créer une API REST avec Express.js
Créer une API REST avec Express.js
Chapitre 2
CRUD vers une base MongoDB via Mongoose
CRUD vers une base MongoDB via Mongoose
Chapitre 3
Application cliente avec Angular 7 et Angular Material
Application cliente avec Angular 7 et Angular Material
Chapitre 4
Les formulaires : création en Angular 7 et soumission vers un serveur Express.js
Les formulaires : création en Angular 7 et soumission vers un serveur Express.js
Chapitre 5
Upload d'images
Upload d'images
Chapitre 6
Gérer l'édition de documents existants
Gérer l'édition de documents existants
Chapitre 7
Création d'un générateur d'images réduites
Création d'un générateur d'images réduites
Table des matières
Chapitre 1 : Créer une API REST avec Express.js
1h06
Leçon 1La stack MEAN (Mongo Express Angular Node)
Leçon 2Configuration du backend (.gitignore et .eslintrc)
Leçon 3Création d'une API
Leçon 4Utilisation de middlewares
Leçon 5Test de notre application à l'aide de Postman
Leçon 6Installation de nodemon
Leçon 7Appeler un script npm depuis un autre script
Leçon 8Gérer les requêtes GET vers '/blog-posts'
Leçon 9Création d'un middleware
Chapitre 2 : CRUD vers une base MongoDB via Mongoose
50m04
Leçon 1Installation et configuration de Mongoose
Leçon 2Création d'un modèle mongoose
Leçon 3Test du POST d'un nouveau document
Leçon 4Afficher les documents créés dans Mongo CLI
Leçon 5Récupérer tous les blog posts depuis MongoDB
Leçon 6Récupérer un document par son ID
Leçon 7Supprimer un document par son ID
Chapitre 3 : Application cliente avec Angular 7 et Angular Material
2h03
Leçon 1Générer une application avec Angular-CLI
Leçon 2Installation d'Angular Material
Leçon 3Utilisation d'Angular-CLI pour générer un module et des components
Leçon 4Récupérer tous les blog posts depuis le backend Express
Leçon 5Utilisation d'une mat-toolbar
Leçon 6Afficher une liste de blog posts en recourant à mat-card
Leçon 7Accéder à un blog post par son ID depuis le backend Express
Leçon 8Afficher le détail d'un blog post
Leçon 9Gérer les erreurs 404
Leçon 10Création d'une page d'admin listant tous les blog posts
Leçon 11Les propriétés permettant de personnaliser les composants d'Angular Material
Leçon 12S'abonner à un Observable côté TypeScript
Leçon 13Supprimer plusieurs documents
Leçon 14Supprimer plusieurs documents côté backend et frontend
Leçon 15Afficher le bouton de suppression conditionnellement
Chapitre 4 : Les formulaires : création en Angular 7 et soumission vers un serveur Express.js
42m48
Leçon 1Formulaire permettant de créer de nouveaux blog posts
Leçon 2FormGroup et FormBuilder propres au reactive forms
Leçon 3Modifications finales du formulaire
Leçon 4Poster un nouveau blog post au serveur
Leçon 5Remise à zéro du formulaire et des validateurs après une soumission réussie
Leçon 6Communication entre components de même niveau à l'aide d'un Subject
Chapitre 5 : Upload d'images
41m33
Leçon 1Upload d'une image à l'aide de multer côté serveur
Leçon 2Tester l'upload de fichier à l'aide de Postman
Leçon 3Tester les extensions de fichiers autorisés à être uploadés
Leçon 4Ajouter l'upload de fichier côté client
Leçon 5Poster une image depuis Angular vers le serveur Express.js
Leçon 6Associer une image uploadée à un blog post
Leçon 7Afficher une image uploadée dans le client
Chapitre 6 : Gérer l'édition de documents existants
39m39
Leçon 1Component dédié à l'édition d'un blog post (partie HTML)
Leçon 2Component dédié à l'édition d'un blog post (partie TypeScript)
Leçon 3Router vers blogpost-edit.component.ts
Leçon 4Mise à jour côté client et côté serveur
Leçon 5Edition des blog posts existants pour ajouter une image
Chapitre 7 : Création d'un générateur d'images réduites
35m01
Leçon 1Création d'une fonction de redimensionnement d'images
Leçon 2Redimensionner une image et ajouter son chemin au document MongoDB
Leçon 3Afficher les images de petite taille sur la page listant tous les blog posts
Leçon 4Remplacement d'un Reactive Form par un Template Driven Form
Chapitre 8 : Installation d'un éditeur de texte
13m48
Leçon 1Installation de ngx-editor
Leçon 2Utilisation de ngx-editor
Chapitre 9 : Authentification avec Passport
1h46
Leçon 1Configuration de Passport
Leçon 2Implémentation de la stratégie passport-local
Leçon 3Implémentation de la stratégie passport-local (suite)
Leçon 4Loguer un utilisateur existant avec Passport
Leçon 5Création du component d'authentification 'AuthComponent'
Leçon 6Création d'un service Angular d'authentification
Leçon 7Création d'un Http interceptor Angular
Leçon 8Configuration de CORS dans le contexte de sessions
Leçon 9Logout
Leçon 10Rediriger les anonymes vers la page de login
Leçon 11Protéger la route '/delete' avec Passport
Leçon 12Afficher les erreurs du serveur côté client
Aperçus
