Cours
PrestaShop

Newsletter

MEAN Stack : Créer son application Full Stack

Créer une application Full Stack JavaScript avec MongoDB Express.js Angular 7 et Node.js

Ou s'abonner pour un accès illimité sans engagement à tout Skilleos pour 19,90€/mois. En savoir plus
chapitre

Chapitres

69

chrono

Durée

08h41 de cours en ligne

chrono

Prérequis

acces

Accès

24h/24 et 7j/7
PC/Mac, tablette et smartphone

certificat

Certificat

Délivré à la fin de la formation

1for1

1 For 1

Un abo ou un achat sur Skilleos = Un cours offert à un bénéficiaire

Samir Medjdoub

Samir Medjdoub

Développeur depuis 2003 dans des entreprises clientes publiques (SNCF, URSSAF, EDF...) et privées (Iron Mountain, Jouve, CDiscount...), avec comme comme fil conducteur la conscience qu’il est bien plus facile de rester sur la vague que de tenter de remonter après s’être laissé submerger. Fidèle à cette stratégie, Samir Medjdoub a ainsi pris la vague Angular 2 dès les versions alpha et bêta fin 2015, celle de Node.js il y a sept années de cela et a eu la chance d'évoluer dans des sociétés qui avaient été parmi les premières en France à adopter MongoDB, conjointement aux bases de données relationnelles. Les développeuses et développeurs JavaScript (Front, Back ou Fullstack !) ont de très beaux jours devant eux : investissez dans les frameworks, plateformes et librairies JavaScript qui vous ouvriront de belles opportunités en 2019.

Vous souhaitez apprendre à créer une application Full Stack JavaScript avec la fameuse MEAN stack (MongoDB Express.js Angular 7 et Node.js) ? Ce cours MEAN stack en ligne vous permettra de progresser en JavaScript côté Frontend et Backend.

Tout au long de ce cours en ligne, et accompagné par votre formateur Samir Medjdoub, vous allez créer un CMS qui vous permettra d'implémenter de nombreuses fonctionnalités et de nombreuses techniques telles que la création d'une API REST, d'un client Angular, ou encore de requêtes AJAX ... Ce projet vous permettra rapidement d'articuler les diverses technologies de la MEAN stack, et ainsi de les prendre en main.

Contenu du cours

  • Support du code source (partie Backend et Frontend)

À la fin du cours, vous serez capable de :

  • Créer une API REST à l'aide de Node et Express.js
  • Tester votre API à l'aide de Postman
  • Créer un client Angular (à l'aide d'Angular 7)
  • Faire des requêtes AJAX depuis votre client Angular vers votre API REST
  • Poster du contenu depuis un formulaire Angular vers votre serveur Express
  • Uploader des images vers votre serveur Express

Chapitres

CRÉER UNE API REST AVEC EXPRESS.JS
1
00:39
Introduction
2
05:08
La stack MEAN (Mongo Express Angular Node)
3
11:53
Configuration du backend (.gitignore et .eslintrc)
4
11:18
Création d'une API
5
13:17
Utilisation de middlewares
6
05:13
Test de notre application à l'aide de Postman
7
02:35
Installation de nodemon
8
03:36
Appeler un script npm depuis un autre script
9
05:53
Gérer les requêtes GET vers '/blog-posts'
10
07:25
Création d'un middleware
CRUD VERS UNE BASE MONGODB VIA MONGOOSE
11
10:06
Installation et configuration de Mongoose
12
11:23
Création d'un modèle mongoose
13
08:35
Test du POST d'un nouveau document
14
02:04
Afficher les documents créés dans Mongo CLI
15
04:12
Récupérer tous les blog posts depuis MongoDB
16
07:43
Récupérer un document par son ID
17
06:01
Supprimer un document par son ID
APPLICATION CLIENTE AVEC ANGULAR 7 ET ANGULAR MATERIAL
18
04:45
Générer une application avec Angular-CLI
19
03:48
Installation d'Angular Material
20
09:11
Utilisation d'Angular-CLI pour générer un module et des components
21
15:01
Récupérer tous les blog posts depuis le backend Express
22
04:06
Utilisation d'une mat-toolbar
23
08:22
Afficher une liste de blog posts en recourant à mat-card
24
13:19
Accéder à un blog post par son ID depuis le backend Express
25
12:43
Afficher le détail d'un blog post
26
03:20
Gérer les erreurs 404
27
08:11
Création d'une page d'admin listant tous les blog posts
28
03:08
Les propriétés permettant de personnaliser les composants d'Angular Material
29
09:13
S'abonner à un Observable côté TypeScript
30
07:08
Supprimer plusieurs documents
31
18:24
Supprimer plusieurs documents côté backend et frontend
32
03:10
Afficher le bouton de suppression conditionnellement
LES FORMULAIRES : CRÉATION EN ANGULAR 7 ET SOUMISSION VERS UN SERVEUR EXPRESS.JS
33
09:08
Formulaire permettant de créer de nouveaux blog posts
34
08:04
FormGroup et FormBuilder propres au reactive forms
35
02:36
Modifications finales du formulaire
36
05:38
Poster un nouveau blog post au serveur
37
06:19
Remise à zéro du formulaire et des validateurs après une soumission réussie
38
11:03
Communication entre components de même niveau à l'aide d'un Subject
UPLOAD D'IMAGES
39
08:48
Upload d'une image à l'aide de multer côté serveur
40
04:19
Tester l'upload de fichier à l'aide de Postman
41
02:53
Tester les extensions de fichiers autorisés à être uploadés
42
06:10
Ajouter l'upload de fichier côté client
43
05:18
Poster une image depuis Angular vers le serveur Express.js
44
08:37
Associer une image uploadée à un blog post
45
05:28
Afficher une image uploadée dans le client
GÉRER L'ÉDITION DE DOCUMENTS EXISTANTS
46
07:33
Component dédié à l'édition d'un blog post (partie HTML)
47
09:24
Component dédié à l'édition d'un blog post (partie TypeScript)
48
03:59
Router vers blogpost-edit.component.ts
49
15:29
Mise à jour côté client et côté serveur
50
03:14
Edition des blog posts existants pour ajouter une image
CRÉATION D'UN GÉNÉRATEUR D'IMAGES RÉDUITES
51
07:32
Création d'une fonction de redimensionnement d'images
52
11:57
Redimensionner une image et ajouter son chemin au document MongoDB
53
04:32
Afficher les images de petite taille sur la page listant tous les blog posts
54
11:00
Remplacement d'un Reactive Form par un Template Driven Form
INSTALLATION D'UN ÉDITEUR DE TEXTE
55
04:12
Installation de ngx-editor
56
09:36
Utilisation de ngx-editor
AUTHENTIFICATION AVEC PASSPORT
57
12:06
Configuration de Passport
58
13:45
Implémentation de la stratégie passport-local
59
16:01
Implémentation de la stratégie passport-local (suite)
60
07:49
Loguer un utilisateur existant avec Passport
61
10:19
Création du component d'authentification 'AuthComponent'
62
10:22
Création d'un service Angular d'authentification
63
11:28
Création d'un Http interceptor Angular
64
04:47
Configuration de CORS dans le contexte de sessions
65
08:14
Logout
66
02:59
Rediriger les anonymes vers la page de login
67
05:41
Protéger la route '/delete' avec Passport
68
03:18
Afficher les erreurs du serveur côté client
69
00:34
Conclusion

MEAN Stack : Créer son application Full Stack

49.00 €

close if for show price

  • langues fr