MBDS EMSI Marrakech et Côte d'Ivoire 2020-2021

Introduction

Dans ce cours on va utiliser la "MEAN STACK" dans le cloud, c'est-à-dire MongoDB + Express + Angular + NodeJS. Ce sera l'occasion de voir les avantages et les inconvénients de cette solution, et comparer Angular + TypeScript à des solutions concurrentes.

Outils nécessaires

Pour ce cours vous aurez besoin des outils suivants :

• NodeJS et npm à jour (installer depuis Nodejs.org)
• Visual Studio Code ou équivalent (WebStorm par ex.)
• Une connexion internet.

Séance 1 : introduction aux WebComponents et aux front-ends modernes

• Transparents de présentation sur les WebComponents standards du W3C 
• Support de cours Google slides utilisés pendant le cours, valable pour toutes les séances sur Angular.
   
• Projet zippé de ce que j'ai fait pendant la visio. Dezipper, cd dans le projet, ng serve.
   
• Vidéo 1 du cours (18h-20h)
• Vidéo 2 du cours (20h-22h) 

Séance 2 : suite intro angular (data binding, formulaires, communication parents/enfants)

On continue... On utilise le même support de cours à partir de la page 53.

• Projet zippé dans l'état de la fin de cette séance. Dezipper, cd dans le dossier, npm install, ng serve
  
   
• Vidéo 1 du cours (18h-20h) 
• Vidéo 2 du cours (20h-22h) 

Séance 3 : services et router Angular 

On continue, on utilise le même support de cours à partir du tansparent 101 

• Projet zippé de la version à la fin de la séance. Dezipper, cd dans le dossier, npm install, ng serve

• Vidéo 1 du cours (9h-11h) 
• Vidéo 2 du cours (11h-13h)

Séance 4 : routeur suite (gestion des autorisations) et mise en place d'une BD MongoDB dans le cloud

On continue, on utilise le même support de cours à partir du tansparent 169 

• Projet zippé de la version à la fin de la séance. Dezipper, cd dans le dossier, npm install, ng serve.

• Vidéo 1 du cours (18h-20h) 
• Vidéo 2 du cours (20h-22h) 

Séance 5 : Présentation de RxJS puis hébergement dans le cloud sur heroku.com

RxJS :

• Même support de cours qu'avant, de la page 203 jusqu'à la fin. 

Mongoose :

• Mongoose site officiel (faire le tutoriel, puis dans un second temps regarder la partie "plugins", en particulier la pagination).

Hébergement sur github et déploiement sur Heroku:

• Mettre un projet sur github
• Héberger un projet Angular sur Heroku 

• Projet zippé de la fin de la séance. Dezipper, cd dans le dossier assignment-app, ng serve. Pour tester la version "heroku", faire npm install, ng build, node server.js (et ça va utiliser MON api sur heroku, si vous déployez votre propre api sur heroku, penser à changer l'url dans assignments-service.ts dans le code angular).
   
• Vidéo du cours (18h-22h)