M1 MIAGE 2022-2023 - Technologies Web - Angular

Ce 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 (qui sera approfondie au second semestre), 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.

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

Repository github du projet que je ferai en live coding : https://github.com/micbuffa/angularFrontM1Miage2022_2023

"git clone" du repo, puis aller dans le dossier assignment-app, faire "npm i" puis "ng serve" (conseil : le faire depuis le terminal de VS code)

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

Best of des outils de dev web que j'utilise. Y ajouter "github copilot" qui est (je crois bien) gratuit pour les étudiants (plugin pour visual studio code: complétion automatique intelligente utilisant un réseau de neurones).

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

TP1 : on continue l'exemple du cours....

Je vous l'avais demandé lors du dernier cours : refaites ce que j'ai fait en live coding pendant la première séance en amphi. Pour cela, reprenez les transparents du cours, et faites les opérations décrites jusqu'au transparent No 54 inclu !

Travail à faire :

Effectuer les opérations décrites dans les transparents 55 à 73 inclu (attention, parfois il faut regarder les transparents en mode diaporama, car un seul transparent peut décrire plusieurs étapes).
On regarde la documentation d'Angular material sur "toolbar" et "sidenav" pour faire une barre de menus et une barre latérale de navigation sur la gauche. Inspirez-vous des exemples proposés mais aussi de ces deux vidéos pour ajouter ces éléments à votre application
- Vidéo sur Toolbar : https://www.youtube.com/watch?v=7VZYM267xs0
- Vidéo sur Sidebar : https://www.youtube.com/watch?v=IU0SU4lbAwY
- Réfléchissez bien : dans quel composants allez-vous ajouter la tooldbar et la sidenav ?
- Dans la toolbar on aimerait : une icone en forme de maison qui servira plus tard à revenir à la page d'accueil, un bouton ou un lien ou une icone de connexion qui servira plus tard à s'identifier
- Dans la sidebar on aimerait pour le moment :
  - un lien "Liste des devoirs
  - un lien "Ajout d'un devoir"
  - un lien "Modification d'un devoir"
  - un lien "Suppression d'un devoir"
  - un lien "Génération de données de test"

TP2 : on continue à coder l'exemple du cours.... communication entre composants

Ce TP vous propose de créer dans l'applications des composants spécialisés, fils du composant qui gère les "assignments". On va faire un composant pour afficher les détails d'un assignment quand on clique dessus, un composant pour ajouter un assignment, un composant pour supprimer un assignment etc. Et on verra un problème très courant dans la programmation par composants : la communication père - fils et la communication fils - père, qui pourra se généraliser à "communication avec d'autres composants".

Dans la suite du cours on verra une manière plus confortable de centraliser les données manipulées (ici les assignments).

Travail à faire :

Avancez votre projet angular, en suivant les transparents du cours du No 74 à 103 inclu.
Vous essaierez de faire l'exercice proposé à la fin.

Vidéo à suivre pour ceux qui sont en télétravail à cause de la grève: https://youtu.be/4SxVqSEB184?t=3484

Séance 2 : correction du TP2 en live coding, communication entre composants

Repository github du projet qui contient une correction du TP2 : https://github.com/micbuffa/angularFrontM1Miage2022_2023

Une fois "git pull" effectué, faire "ng serve" (conseil : le faire depuis le terminal de VS code)

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

TP 3 : Implémention de services

Avancez votre projet angular, en suivant les transparents du cours du No 104 à 136 inclu.
Vous essaierez de faire l'exercice proposé à la fin.
Vidéo qui montre comment faire ce qui est demandé dans ce TP (datant de 2020): https://youtu.be/vECE6xbgSBE?t=1128