Accueil > Intranet Michel Buffa > M1 MIAGE 2022-2023 - Technologies Web - Angular

M1 MIAGE 2022-2023 - Technologies Web - Angular

De $1

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

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 :

  1. 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). 
     
  2. 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èvehttps://youtu.be/4SxVqSEB184?t=3484 

Mots clés:
 
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.