2015年4月24日 星期五

Hybrid Apps開發系列之4.5：以HTTP連線取得JSON資料

開放資料當道，許多都可透過HTTP連線方式取得JSON格式資料，前文Hybrid Apps開發系列之4.4：多頁面App程式 (天氣app-非線上版)便以open weather map，離線取得天氣資料。但如果要線上即使取得資料，則必須使用AngularJS的$http模組。

$http連線取得JSON資料

$http實際上是發出http要求，進而取得回應資料。如果格式是JSON，在JavaScript中便可直接使用，其他格式則不一定。

$http連線使用方式如下：
$http.get("http://url/service", { params: { "key1": "value1", "key2": "value2" } })
    .success(function(response) {
        // 處理http回應資料; response為回傳資料
    })
    .error(function(err) {
        // 連線錯誤
    });
另一種寫法則是：
$http.get("http://url/service", { params: { "key1": "value1", "key2": "value2" } })
    .then(function(response) {
        // 建立天氣資料模型變數,response.data為回傳資料
    }, function(err) {
        // 連線錯誤
    });
兩者有所差別，可參考此討論串。在此建議用 
.then(function(resp),function(err))
以open weather map即時天氣資料為例，其api格式是： 
http://api.openweathermap.org/data/2.5/weather?q=Taipei
因此對應的程式碼為： 
$http.get("http://api.openweathermap.org/data/2.5/weather", { params: { "q": "Taipei"} })
    .then(function(response) {
        // 建立天氣資料模型變數,response.data為回傳資料
    }, function(err) {
        // 連線錯誤
    });
有了$http連線服務，取得天氣即時資訊變得非常簡單。

即時天氣資料呈現

以前文Hybrid Apps開發系列之4.4：多頁面App程式 (天氣app-非線上版)天氣概況頁面為基礎，並在controller處加上$http連線，便可呈現即時天氣資料。此處以單一頁面為例，將天氣概況頁面的程式碼直接放入index.html中，並加入一個按鈕，程式碼如下：
  1. <body ng-app="starter">
  2.   <ion-header-bar class="bar-stable">
  3.     <h1 class="title">天氣概況:Json版</h1>
  4.   </ion-header-bar>
  5.   <ion-content ng-controller="controller">
  6.     <button ng-show="!show" ng-click="getData()">取得資料</button>
  7.       <div class="list card" ng-show="show">
  8.           <div class="item">
  9.               <h2>City of {{weather.name}}</h2>                
  10.           </div>
  11.           <div class="item item-avatar">
  12.               <img src="{{img_base_url + weather.weather[0].icon + '.png'}}">
  13.               <h2>{{weather.main['temp'] - 273.15| number:1}}°C</h2>
  14.               <h2>{{(weather.dt)*1000 | date:'yyyy-MM-dd HH:mm:ss'}}</h2>
  15.           </div>
  16.           <div class="item">
  17.               <div class="row">
  18.                   <div class="col">濕度</div>
  19.                   <div class="col">{{weather.main.humidity}}%</div>
  20.               </div>
  21.               <div class="row">
  22.                   <div class="col">風速</div>
  23.                   <div class="col">{{weather.wind.speed}}哩/秒</div>
  24.               </div>
  25.           </div>
  26.       </div>         
  27.   </ion-content>
  28. </body>
  • 第5行：由於是單一頁面，故直接在<ion-content>設定處理此區塊的controller。
  • 第6行：加入按鈕，點選之後呼叫getData()取得資料，同時隱藏按鈕。
  • 第7行：ng-show的設定讓區塊先隱藏起來，取得資料後再呈現。
getData()定義於controller內程式碼如下：
  1. [...略...]
  2.    .controller('controller', function ($scope, $http) {
  3.         $scope.show = false;
  4.         $scope.img_base_url = image_base_url;
  5.         $scope.getData = function () {
  6.             $http.get("http://api.openweathermap.org/data/2.5/weather", {params: {"q": "Taipei"}})
  7.                     .then(function (resp) {
  8.                         $scope.weather = resp.data;
  9.                         $scope.show = true;
  10.                     }, function (err) {
  11.                         alert("Oops!");
  12.                     })
  13.         }
  14.     })
  15.     var image_base_url = "http://openweathermap.org/img/w/"; // open weather api icon
  • 第2行：定義controller時要加入$http模組。
  • 第3行：$scope.show用來控制按鈕與天氣概況的顯示狀態。
  • 第5-14行：getData()定義。
JSBin線上展示：
張貼者： 於
標籤： , , , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)