Ceci est une ancienne révision du document !
TD n°3
|
Prérequis :
|
|
-- 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
-- Interface
-- Historisation des conversions
-- Fonctionnalités
- L'utilisateur pourra afficher/masquer la liste des conversions déjà effectuées (les 2 monnaies, le sens , le tx et la date/heure de conversion, l'écart de taux avec une conversion précédente)
- Vider cette liste
- Supprimer un élément de la liste
-- Application en ligne
-- Exercice : Calculatrice
-- Objectifs
- Créer un service (moteur de la calculatrice)
- Utiliser un service (Injection de dépendance)
- Créer des directives
-- Fonctionnalités
- Faire des calculs simples
- Mémoriser un résultat
- Eteindre/allumer calculatrice
Vue
-- Ex 4 : Routage
Il s'agit de créer une application permettant de naviguer entre les différents exemples implémentés, en utilisant les fonctionnalités de routage d'AngularJS.
