TD n°3

• Utiliser des services Angular existants
• Mettre en oeuvre l'injection de dépendance

• 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)

• 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

angular.module("currencyApp").controller("currencyController",['$scope','$http', function($scope,$http) {
...

$http.get('app/currencymap.json').
	success(function(data, status, headers, config) {
		$scope.currencies = data;
	}).
	error(function(data, status, headers, config) {
		console.log("Erreur avec le statut Http : "+status);
	});

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&call_back=JSONCALLBACK

Résultat JSON :

{"to": "EUR", "rate": 0.83329500000000001, "from": "USD", "v": 0.83329500000000001}

	$http.jsonp('http://rate-exchange.appspot.com/currency?from='+from.code+'&to='+to.code+'&q='+what+'&callback=JSON_CALLBACK').
		success(function(data, status, headers, config) {
			$scope.result=data.v;
...

• ng-app
• ng-controller
• ng-click
• ng-model
• ng-keypress

L'historisation se fait selon les principes suivants :

• Toute nouvelle conversion ajoute une ligne dans l'historique des conversions (identifiée par le couple monnaie From + To)
• Toute requête vers une conversion déjà présente dans l'historique met à jour la ligne de l'historique concernée (rate & delta)

• 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
  • Mettre à jour automatiquement les conversions en effectuant à nouveau une requête à intervalle donné
  • Calculer l'écart de tx ou de montant et faire apparaître en rouge les baisses, en vert les hausses

On utilisera pour mémoriser les conversions déjà effectuées un objet du type :

var conversion={from : //monnaie1, 
		to : //monnaie2,	
		amount : function(){ //retourne le montant (tx* somme) }, 
		initialAmount : function(){ //Retoune le montant avec tx initial * somme},
		delta : //écart Avec première requête (tx actuel - tx initial) * somme 
		rate : //tx actuel, 
		what : //Somme, date : //date & heure de la requête, 
		update: //Flag pour "en cours de mise à jour" (requête ajax), 
		initialRate : //tx initial  : invariant depuis la première requête
		};

1. Créer un service (moteur de la calculatrice)
2. Utiliser un service (Injection de dépendance)
3. Créer des directives

1. Faire des calculs simples
2. Mémoriser un résultat
3. Eteindre/allumer calculatrice

Directives :

• Créer une directive permettant de créer un bouton de calculatrice (placer ensuite les valeurs possibles prises par les boutons dans un tableau, initialisé dans le code :

	this.ops=[
	            {value:'('},
	            {value:')'},
	            {value:'M'},
	            {value:' '},
	            {value:'RM'},
	            {value:'Off',cssClass:"btn-danger",title:"Eteindre la calculatrice"},
	            {value:'\n'},
	            {value:"⇤"},
	            {value:"CE"},
	            {value:"C"},
	            {value:" "},
	            {value:"±"},
	            {value:"√x"},
	            {value:"\n"},
	            {value:7},
	            {value:8},
	            {value:9},
	            {value:' '},
	            {value:'/'},
	            {value:'%'},
	            {value:'\n'},
	            {value:4},
	            {value:5},
	            {value:6},
	            {value:' '},
	            {value:'*'},
	            {value:'1/x'},
	            {value:'\n'},
	            {value:1},
	            {value:2},
	            {value:3},
	            {value:' '},
	            {value:'-'},
	            {value:'\n'},
	            {value:0,cssClass:"colspan btn-default"},
	            {value:'.',cssClass:"btn-default"},
	            {value:' '},
	            {value:'+'},
	            {value:'=',cssClass:"rowspan btn-success",title:"Calculer ([ENTREE]) !"}
	            ];

• créer la partie calcul dans 1 service, et injecter ce service dans le contrôleur.

Tester le routage en ligne