Introduction
  • La stack MEAN (Mongo Express Angular Node)
  • Configuration du backend (.gitignore et .eslintrc)
  • Création d'une API
  • Utilisation de middlewares
  • Test de notre application à l'aide de Postman
  • Installation de nodemon
  • Appeler un script npm depuis un autre script
  • Gérer les requêtes GET vers '/blog-posts'
  • Création d'un middleware
CRUD vers une base MongoDB via Mongoose
  • Installation et configuration de Mongoose
  • Création d'un modèle mongoose
  • Test du POST d'un nouveau document
  • Afficher les documents créés dans Mongo CLI
  • Récupérer tous les blog posts depuis MongoDB
  • Récupérer un document par son ID
  • Supprimer un document par son ID
Application cliente avec Angular 7 et Angular Material
  • Générer une application avec Angular-CLI
  • Installation d'Angular Material
  • Utilisation d'Angular-CLI pour générer un module et des components
  • Récupérer tous les blog posts depuis le backend Express
  • Utilisation d'une mat-toolbar
  • Afficher une liste de blog posts en recourant à mat-card
  • Accéder à un blog post par son ID depuis le backend Express
  • Afficher le détail d'un blog post
  • Gérer les erreurs 404
  • Création d'une page d'admin listant tous les blog posts
  • Les propriétés permettant de personnaliser les composants d'Angular Material
  • S'abonner à un Observable côté TypeScript
  • Supprimer plusieurs documents
  • Supprimer plusieurs documents côté backend et frontend
  • Afficher le bouton de suppression conditionnellement
Les formulaires : création en Angular 7 et soumission vers un serveur Express.js
  • Formulaire permettant de créer de nouveaux blog posts
  • FormGroup et FormBuilder propres au reactive forms
  • Modifications finales du formulaire
  • Poster un nouveau blog post au serveur
  • Remise à zéro du formulaire et des validateurs après une soumission réussie
  • Communication entre components de même niveau à l'aide d'un Subject
Upload d'images
  • Upload d'une image à l'aide de multer côté serveur
  • Tester l'upload de fichier à l'aide de Postman
  • Tester les extensions de fichiers autorisés à être uploadés
  • Ajouter l'upload de fichier côté client
  • Poster une image depuis Angular vers le serveur Express.js
  • Associer une image uploadée à un blog post
  • Afficher une image uploadée dans le client
Gérer l'édition de documents existants
  • Component dédié à l'édition d'un blog post (partie HTML)
  • Component dédié à l'édition d'un blog post (partie TypeScript)
  • Router vers blogpost-edit.component.ts
  • Mise à jour côté client et côté serveur
  • Edition des blog posts existants pour ajouter une image
Création d'un générateur d'images réduites
  • Création d'une fonction de redimensionnement d'images
  • Redimensionner une image et ajouter son chemin au document MongoDB
  • Afficher les images de petite taille sur la page listant tous les blog posts
  • Remplacement d'un Reactive Form par un Template Driven Form
Installation d'un éditeur de texte
  • Installation de ngx-editor
  • Utilisation de ngx-editor
Authentification avec Passport
  • Configuration de Passport
  • Implémentation de la stratégie passport-local
  • Implémentation de la stratégie passport-local (suite)
  • Loguer un utilisateur existant avec Passport
  • Création du component d'authentification 'AuthComponent'
  • Création d'un service Angular d'authentification
  • Création d'un Http interceptor Angular
  • Configuration de CORS dans le contexte de sessions
  • Logout
  • Rediriger les anonymes vers la page de login
  • Protéger la route '/delete' avec Passport
  • Afficher les erreurs du serveur côté client
Bonus
  • Coupons vers des formations complémentaires