Introduction
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 : <A COMPLETER EN COURS>
- Dezipper, 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
- 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"
Vous n'êtes pas connecté. Connexion 