M2 Intense Rabat 2022-2023 - Introduction à Angular

Introduction

Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.

Séance 1 : découverte d'Angular, mise en place d'un projet, premiers composants

Cette partie du cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB, et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.

• Repository github du projet que je ferai en live coding : 
  •  https://github.com/micbuffa/angularRabatFront2022_2023.git
  • Pour l'exécuter : faire "git clone" puis cd dans le dossier créé, puis "npm install" puis "ng serve"
     
• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 55 inclu lors de cette séance.
   
• Best of des outils de dev web que j'utilise. Y ajouter "github copilot" qui est gratuit pour les étudiants (c'est un plugin pour visual studio code: complétion automatique intelligente utilisant un réseau de neurones).
   
• Pour lier un projet angular à un repository github, lire ce document.
   
• Vidéos enregistrées en 2020 de cette séance de cours (j'avais fait à peu près la même chose, à part github...) : 
  • Vidéo 1 
  • Vidéo 2

Séance 2 : Formulaires, data binding etc.

• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 103 inclu lors de cette séance.

Vidéos enregistrées en 2020 de cette séance de cours (j'avais fait à peu près la même chose, à part github...) : 

• La séance d'aujourd'hui est traitée dans la vidéo 2 qu'on avait commencé dans la séance 1.

Séance 3 : services, router etc.

• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 182 inclu lors de cette séance. J'ai sauté services d'authentification, gard, gestion avec le router des queries et fragements...

Vidéos enregistrées en 2020 de cette séance de cours (j'avais fait à peu près la même chose, à part github... les vidéos couvrent les parties non traitées en cours) : 

• Vidéo service (datant de 2020): https://youtu.be/vECE6xbgSBE?t=1128 
  
   
• Vidéos correspondant au router : 
  • Première partie : introduction au router d'Angular
  • Deuxème partie : restriction d'accès aux routes avec le routeur, authentification service et guard.

Séance 4 : back end, NodeJS, Mongoose, MongoDB et utilisation du module HttpClient pour requêter

• Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 226 inclu lors de cette séance. On n'a pas traité RxJS et les erreurs de connexions etc.
   
• Rappels sur les bonnes pratiques des APIs REST : https://blog.octo.com/designer-une-api-rest/ 
   
• Vidéos :
  1. Création d'une base MongoDB sur mongodb.com, installation du back-end, explications, test des Web Services, début du cours sur le module HttpClient d'Angular pour requêter le back-end : https://youtu.be/ivR5iX5HkUw?t=337 
  2. Module HttpClient : requêter les Web services définis dans l'API REST du back-end (45 premières minutes dans la vidéo).
  3. Traiter les erreurs réseau, opérateurs RxJs (non vus en cours, mais intéressant à étudier, c'est assez court) (de 0:45:00 à )
  4. Peupler la BD avec de nombreuses données.
  5. Pagination et fin Pagination 
  6. Peupler la BD et pagination : explications détaillées 

Séance 5 : hébergement dans le cloud sur heroku.com

Support de cours angular, qu'on utilisera pendant plusieurs séances. Nous sommes allés jusqu'au transparent 243 inclu lors de cette séance.

• Projet Back-End que j'ai mis sur GitHub (obligatoire pour déployer sur Heroku.com) : https://github.com/micbuffa/angularBackEndEmsiRabat2022_2023.git 

Vidéo : 

• Héberger le projet complet sur Heroku.com (cloud service), attention, depuis cette année, vos projets ne seront disponibles en ligne que pendant un mois. N'héberger votre projet qu'au dernier moment avant de le rendre. On m'a recommandé une plateforme cloud similaire à heroku, qui s'appelle render.com, je suppose que la procédure d'hébergement doit être similaire. Si vous testez, merci de me le dire et écrire un petit README pour que je puisse m'en servir avec d'autres étudiants.