Année universitaire :
Institut Supérieur des Etudes Technologiques de Sousse 2024/2025
Département de Technologie de l’Informatique
Licence Appliquée en Technologies de l’Informatique Semestre : 1
Date : 03 Décembre 2024
Examen de TP
Durée : 2h30
Matière :
Classe : DSI2.2 Nb. Pages : 4
Atelier de Développement Framework Coté Client
Enseignante : Ahlem ELHAJ
NB. A la fin de l’examen, vous devez remettre sur la plateforme de l’UVT dans l’espace de remise dédié :
• Le dossier src après l’avoir compressé,
Le
• ci-joint après
Le compte rendu ci-joint, devantl’avoir rempli.à la fin du travail.
être rempli
En cas de problème, envoyez-moi votre travail par mail : [Link]@[Link]
Consigne très importante
Vous êtes appelés à utiliser le code qui vous a été fourni dans le projet initial ci-joint tel qu’il est et à le
compléter pour répondre aux différentes exigences explicitées. Il est donc primordial de comprendre la
structure du projet initial, et il vous est strictement interdit de modifier, de supprimer une partie du code ts
fourni ou de la remplacer par un autre. A titre d’exemple, ne pas laisser une méthode inutilisée alors que
vous créez et faites l’appel à une autre méthode de même rôle ! de même pour les attributs, les classes …
Cette pratique serait sévèrement sanctionnée lors de la correction.
En résumé, complétez juste ce qui manque à votre code, après l’avoir analysé, sans en modifier la structure
ni la logique ! Bon travail.
1. Préparer et tester le projet initial
Suivez les étapes suivantes :
1. Si ce n’est pas encore fait, générez un nouveau projet Angular (normalement cette étape est déjà
faite chez vous !).
2. Dans le dossier app de votre projet, copiez dans le répertoire app de votre projet les dossiers
components et shared qui vous sont fournis avec cet énoncé (sans toucher au reste du contenu de
app).
3. Ouvrez votre projet sur le serveur de développement et laissez-le ouvert pour suivre les
modifications à venir.
4. Effacez tout le contenu du template (html) du composant racine app (une page vide s’affiche sur le
serveur).
2. Configurer le routage
NB. Vous ne devez ajouter, dans tout l’examen, qu’un seul composant à votre projet : celui de la gestion
des chemins erronés. Les composants gérant les autres vues sont déjà là !
Configurez et démarrez un routage (plat), puis établissez les liens de routage (barre de navigation), pour
assurer l’accès aux différentes vues illustrées par les figures suivantes :
1
Vu initiale (vu par défaut) -- [Link]
Vu liste des films -- [Link]
2
Vue associée aux chemins non valides -- Exemple :
[Link]
3. Développer la vue « liste des films »
On s’intéresse actuellement à la vue « liste des films ». Vous êtes alors appelés à compléter le code
pour obtenir la vue suivante contenant les informations sur chaque film :
Ajoutez le nécessaire pour traiter les clics sur l’un des boutons « Marquer comme vu » qui permet
de changer l’état d’un film de « non vu » à « vu ». Voici par exemple la vue après clic sur le bouton
3
associé « The Dark Knight » -- remrarquez le changement du texte du bouton ainsi que du message
en bas du bouton :
Si on clique sur le bouton « Marquez comme pas vu », l’état du film est réinitialisé à « non vu ».
4. Développer la vue « profil de l’utilisateur »
Commencez par copier les images fournies avec cet énoncé (ou d’autres images de votre choix) au
bon endroit. Ajoutez ensuite le code nécessaire pour que la vue « profil de l’utilisateur » soit comme suit :
4
Au clic sur le bouton « Désactiver le profil », le profil est désactivé cette même vue devient :
Et, comme vous l’avez sans doute deviné, le clic sur le bouton « Activer le profil » permet d’activer
le profil de nouveau et de revenir donc vers l’état précédent de cette vue.
Bon travail
