Ceci est une ancienne révision du document !
TD n°2
Prérequis :
-- Exercice : Gestion des contacts
-- Objectifs
- Utiliser la directive ngRepeat
- Utiliser la validation des formulaires
- Créer des directives simples
-- Fonctionnalités
- Obtenir la liste des contacts et la filtrer
- Ajouter un contact dans la liste
- Modifier un contact existant
- Supprimer un contact
-- Application/Contrôleurs
| Application | ContactApp (app/ContactApp.js) |
|---|---|
| Contrôleur | ContactController (app/contactController.js) |
| contacts Tableau des contacts existants |
|
| contact Variable contenant le contact à modifier |
|
| tmpContact Variable contenant le contact modifié par le formulaire |
|
| operation Chaîne indiquant la modification ou l'ajout d'un contact |
|
| edit Contrôle l'affichage du formulaire d'ajout/modification |
|
| toUpdate(contact) Affiche le formulaire de modification du contact |
|
| toAdd() Affiche le formulaire d'ajout d'un contact |
|
| add() Calcule le nombre de caractères restants (sur 100) |
|
| update() Met à jour la liste des contacts après validation du formulaire (ajout ou modif) |
|
| delete(contact) Supprime de la liste le contact |
-- Vue
-- Directives utilisées
- ng-app
- ng-controller
- ng-click
- ng-model
- ng-pluralize
- ng-repeat
-- Interface
-- Exercice : Convertisseur de devises
-- Objectifs
- Utiliser des services Angular existants
- Mettre en oeuvre l'injection de dépendance
-- Fonctionnalités
- Saisir un montant dans une devise source
- Sélectionner la devise cible
- Calculer la conversion à partir des taux courants
- Effectuer l'opération inverse (échange des devises)
-- Ressources à utiliser
- Télécharger le fichier currencymap.json sur le site Locale Planet
- Enregistrer le dans le dossier app/data ( à créer) de votre projet
Ce fichier JSON va permettre l'initialisation des listes de monnaies affichées dans l'application
Pour l'obtention des taux de change, on utilisera l'API Currency sur http://rate-exchange.appspot.com/ via Ajax et JSONP
Exemple d'interrogation :
http://rate-exchange.appspot.com/currency?from=USD&to=EUR&q=1
Résultat JSON :
{"to": "EUR", "rate": 0.83329500000000001, "from": "USD", "v": 0.83329500000000001}
-- Application/Contrôleurs
| Application | CurrenyApp (app/currencyApp.js) |
|---|---|
| Contrôleur | CurencyController (app/currencyController.js) |
| currencies variable Objet stockant la liste des monnaies alimentée par le fichier JSON currencymap.json au démarrage du contrôleur |
|
| from variable stockant la monnaie source (à initialiser en euro) |
|
| to variable stockant la monnaie cible (à initialiser en dollars US) |
|
| what variable stockant le montant à convertir (à initialiser à 1) |
|
| result variable donnant le résultat de la conversion |
|
| getResult() Retourne le résultat en effectuant une requête JSONP vers l'adresse rate-exchange.appspot.com Modifie en retour la variable result |
|
| swap() Echange la monnaie source et la monnaie cible |
-- Vue
-- Directives utilisées
- ng-app
- ng-controller
- ng-click
- ng-model
- ng-keypress
-- Interface
