Différences

Ci-dessous, les différences entre deux révisions de la page.

--- slam4:richclient:angularjs:td3 [2016/03/08 08:35] – [1.7- Service] jcheron
+++ slam4:richclient:angularjs:td3 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 40: / Ligne 40: @@
 <sxh javascript>
 $http.get('app/data/currencymap.json').
-	success(function(data, status, headers, config) {
+	then(function(response) {
-		self.currencies = data;
+		self.currencies = response.data;
-	}).
+	},
-	error(function(data, status, headers, config) {
+	function(response) {
-		console.log("Erreur avec le statut Http : "+status);
+		console.log("Erreur avec le statut Http : "+response.status);
 	});
 </sxh>
@@ Ligne 52: / Ligne 52: @@
-Pour l'obtention des taux de change, on utilisera l'API Currency sur http://free.currencyconverterapi.com/ via Ajax et [[http://en.wikipedia.org/wiki/JSONP|JSONP]]
+Pour l'obtention des taux de change, on utilisera l'API Currency sur https://free.currencyconverterapi.com/ via Ajax et [[http://en.wikipedia.org/wiki/JSONP|JSONP]]
 __**Exemple d'interrogation :**__\\
-**<nowiki>http://free.currencyconverterapi.com/api/v3/convert?compact=y&q=USD_EUR&callback=JSON_CALLBACK</nowiki>**
+**<nowiki>https://free.currencyconverterapi.com/api/v3/convert?compact=y&q=USD_EUR</nowiki>**
 __**Résultat JSON :**__
@@ Ligne 66: / Ligne 66: @@
 <html><div class="note"></html>
 La récupération des données sur **free.currencyconverterapi.com** doit se faire par l'intermédiaire de **JSONP**, et non de **JSON**, ce qui impose l'appel de la méthode jsonp sur l'objet $http, et le passage du paramètre JSON_CALLBACK :
+Depuis Angular 1.6, il faut autoriser les URLs accessibles depuis l'application en les ajoutant à la liste blanche :
 <sxh javascript>
-	$http.jsonp('http://free.currencyconverterapi.com/api/v3/convert?compact=y&q='+from.code+'_'+to.code+'&callback=JSON_CALLBACK').
+angular.module('httpExample', [])
-		success(function(data, status, headers, config) {
+.config(['$sceDelegateProvider', function($sceDelegateProvider) {
-			self.result=data[self.from.code+'_'+self.to.code].val;
+  // We must whitelist the JSONP endpoint that we are using to show that we trust it
-...
+  $sceDelegateProvider.resourceUrlWhitelist([
+    'self',
+    'https://free.currencyconverterapi.com/**'
+  ]);
+}]);
+</sxh>
+<sxh javascript>
+	$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;
+	...
+	});
 </sxh>
@@ Ligne 119: / Ligne 134: @@
 		delta : //écart Avec première requête (tx actuel - tx initial) * somme
 		rate : //tx actuel,
-		what : //Somme, date : //date & heure de la requête,
+		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
@@ Ligne 136: / Ligne 152: @@
-<html><a target="_new" href="http://angular.kobject.net/ex4"><button style="width:400px" class="btn">Tester le converisseur</button></a></html>
+<html><a target="_new" href="http://angular.kobject.net/ex5"><button style="width:400px" class="btn">Tester le converisseur</button></a></html>
 ===== -- Exercice : Calculatrice =====
@@ Ligne 208: / Ligne 224: @@
   * créer la partie calcul dans 1 service, et injecter ce service dans le contrôleur.
+<html><a target="_new" href="http://angular.kobject.net/ex6"><button style="width:400px" class="btn">Tester la calculatrice</button></a></html>
 ===== -- Routage =====
 <html><div class="info"></html>