

クラウドでできるHTML5ハイブリッドアプリ開発  
<http://www.amazon.co.jp/dp/4798140287/ref=rdr_ext_tmb>

という本のP305に乗っている天気予報のアプリを動作させたいのですが、うまく動きません。情報が古くなってしまっているのでしょうか？

新規プロジェクトの際に「Onsen UI Sliding Menu」を選択し、  
index.htmlの内容を下記の内容に書き換えました。

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css"></link>
        <link rel="stylesheet" href="css/style.css"></link>
        <style>
           .weather{
                 text-align: center;
                 font-size: 40px;
                 margin-top: 100px;
            }
            .description{
                 font-size: 20px;
            }
        </style>
        <script>
            var module = ons.bootstrap();
            module.controller('AppController',function($scope,$http){
              var config = {
                    params:{q:'Tokyo,jp'}
              }
              $http.get("http://api.openweathermap.org/data/2.5/weather",config)
              .success(function(data){
                    $scope.weather = data.weather[0].main;
                    $scope.description = data.weather[0].description;
                    $scope.icon = data.weather[0].icon;
              })
              .error(function(){
                    alert('天気情報の取得に失敗しました');            
              });
            });
          </script>
    </head>
    <body>
      <ons-page ng-controller="AppController">
        <ons-toolbar>
          <div class="center">東京の天気</dir>
        </ons-toolbar>
        <div class="weather">
          <img ng-src="http://openweathermap.org/img/w/{{icon}}.png">
          <br>
          {{weather}}
          <div class="description">{{description}}</div>
        </div>
      </ons-page>
    </body>
    </html>
    
[/code]

実行すると必ず、「天気情報の取得に失敗しました」が表示されます。  
内容が古くなってしまっているのでしょうか？  
amazonでレビューを見るなどしましたが、動かなくなっているという情報もなく問題点が探せ出せません。  
お分かりになる方いらっしゃいましたら教えていただけると助かります。  
よろしくお願いします。


CC BY-SA 3.0
2016-04-03T15:05:57.833
23705
2016-10-25T10:28:19.250
2016-04-04T00:28:47.777
9566
8823
question
monaca angularjs
monacaの「天気予報」サンプルアプリが動かない


APIの仕様が変わっていました。configのparamsにlat:,lon,cnt,APPIDを追加したら動きました。ありがとうございました。


CC BY-SA 3.0
2016-04-03T15:50:56.010
23707
2016-04-03T15:50:56.010
8823
23705
answer