TD 4

Exercice 1 :

Le but de cet exercice est de construire un tableau contenant des personnes avec leur nom et
leur âge. On prévoit deux zones de texte pour entrer les informations. On veut que le tableau
s'actualise à chaque fois que l’on ajoute une personne.

Exercice 2 :

1) Créez un service Personne contenant le nom le prenom et l’âge comme privés.

2) Le service de personne expose une méthode getPresentation() qui retourne les
informations de la personne.
3) Définissez un contrôleur BonjourCntl.
4) Le contrôleur BonjourCntl expose la méthode ditBonjour() qui renvoie un message
d'accueil.

Exercice 3 :

L’objet de ce TP et de mettre en place un répertoire téléphonique dans lequel on peut ajouter

modifier ou supprimer un contact.
1) L’application se présentera sous forme d’un tableau contenant les colonnes
« prenom », « nom » et « numero ».
2) Au-dessus du tableau, on aura un formulaire permettant d’insérer un contact.
3) Devant chaque ligne du tableau, on aura les boutons « Modifier » et « supprimer »
permettant respectivement de modifier un de supprimer un contact.
Exercice 4 :

Soit le fichier exo4.html dans les ressources du cours

1. En utilisant le data-binding bidirectionnel, affichez dans le premier paragraphe le

dernier produit entré et sa quantité, sous la forme : "Produit : Sucre, dont il
faut 1 boîte. (les contenus en gras sont récupérés des champs de formulaire).
2. Au click sur le bouton, ajouter au modèle un nouvel élément en se basant sur les
champs de formulaire. Afficher aussi dans le premier paragraphe le nombre d'éléments
à acheter, et dans la liste ces éléments, de manière à obtenir visuellement, au
chargement de la page :

Liste de ce qu'il faut : 6 éléments.

 Café : 1 boîte.
 Thé : 2 boîte.
 Chocolat : 1 boîte.
 Confiture de fraise : 1 pot.
 Confiture d'abricot : 1 pot.
 Pain : 1 baguette.

Cette liste doit bien entendu être complétée automatiquement avec le formulaire.

3. Créez une directive qui va écrire dans le dernier paragraphe "Il ne faut pas oublier
ceci :" et compléter la phrase par le dernier item de la liste.

Exercice 5 :

Soit le fichier exo5.html dans les ressources du cours

Affichez dans le paragraphe la date d'aujourd'hui, formatée grâce à la chaîne spécifiée dans le
champ de formulaire. Expérimentez les formats disponibles sur la page de documentation de
ce filtre sur le site officiel.