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",['$http', function($http) {
...

$http.get('app/data/currencymap.json').
	then(function(response) {
		self.currencies = response.data;
	},
	function(response) {
		console.log("Erreur avec le statut Http : "+response.status);
	});

Pour l'obtention des taux de change, on utilisera l'API Currency sur https://free.currencyconverterapi.com/ via Ajax et JSONP

Exemple d'interrogation :
https://free.currencyconverterapi.com/api/v3/convert?compact=y&q=USD_EUR

Résultat JSON :

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

angular.module('httpExample', [])
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
  // We must whitelist the JSONP endpoint that we are using to show that we trust it
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://free.currencyconverterapi.com/**'
  ]);
}]);

	$http.jsonp('https://free.currencyconverterapi.com/api/v3/convert?compact=y&q='+from.code+'_'+to.code, {jsonpCallbackParam: 'callback'})
	.then(function(response) {
			self.result=response.data[self.from.code+'_'+self.to.code].val;
	...
	});

• 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
		};

Intégrer la requête vers le serveur et l'historisation dans un service CurrencyService

Tester le converisseur

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 la calculatrice

Tester le routage en ligne