$ 59.00

Tuto La MEAN stack par la pratique avec JavaScript, Angular, Node.js, MongoDB

$ 59.00

  • Une formation vidéo de 8h39m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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é

Table des matières de cette formation JavaScript, Angular, Node.js, MongoDB (durée : 8h39m)

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



Formateur : Codeconcept

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

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    JavaScript , Angular , Node.js , MongoDB
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
accédez à plus de 1071 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données