slam4:richclient:angularjs:td3

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
slam4:richclient:angularjs:td3 [2016/02/24 01:03] – [1.7- Service] jcheronslam4:richclient:angularjs:td3 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 40: Ligne 40:
 <sxh javascript> <sxh javascript>
 $http.get('app/data/currencymap.json'). $http.get('app/data/currencymap.json').
- success(function(data, status, headers, config) { + then(function(response) { 
- $scope.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> </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 :**__\\ __**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 :**__ __**Résultat JSON :**__
Ligne 66: Ligne 66:
 <html><div class="note"></html> <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 : 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> <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> </sxh>
  
Ligne 119: Ligne 134:
  delta : //écart Avec première requête (tx actuel - tx initial) * somme   delta : //écart Avec première requête (tx actuel - tx initial) * somme 
  rate : //tx actuel,   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),   update: //Flag pour "en cours de mise à jour" (requête ajax), 
  initialRate : //tx initial  : invariant depuis la première requête  initialRate : //tx initial  : invariant depuis la première requête
Ligne 133: Ligne 149:
 ^**Service** | **CurrencyService** (app/currencyService.js) | ^**Service** | **CurrencyService** (app/currencyService.js) |
 ^::: | <html><span class="variable">historique</span></html>\\ Tableau de conversions | ^::: | <html><span class="variable">historique</span></html>\\ Tableau de conversions |
-^::: | <html><span class="methode">update(from,to,what,hasHisto,result)</span></html>\\ Effectue une requête vers le serveur, met à jour l'historique et le paramètre **result** |+^::: | <html><span class="method">update(from,to,what,hasHisto,result)</span></html>\\ Effectue une requête vers le serveur, met à jour l'historique et le paramètre **result** | 
 + 
 + 
 +<html><a target="_new" href="http://angular.kobject.net/ex5"><button style="width:400px" class="btn">Tester le converisseur</button></a></html>
  
 ===== -- Exercice : Calculatrice ===== ===== -- Exercice : Calculatrice =====
Ligne 205: Ligne 224:
   * créer la partie calcul dans 1 service, et injecter ce service dans le contrôleur.    * 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 ===== ===== -- Routage =====
 <html><div class="info"></html> <html><div class="info"></html>
  • slam4/richclient/angularjs/td3.1456272206.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)