Developing HTML5 Hybrid Apps in the Cloud
http://www.amazon.co.jp/dp/4798140287/ref=rdr_ext_tmb
I'd like to run the weather forecast app on P305 of the book, but it doesn't work well.Is the information old?
Select "Onsen UI Sliding Menu" for a new project and
The contents of index.html have been rewritten to the following:
<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=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>
varmodule=ons.bootstrap();
module.controller('AppController', function($scope,$http){
varconfig = {
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('Failed to get weather information');
});
});
</script>
</head>
<body>
<ons-pageing-controller="AppController">
<ons-toolbar>
<div class="center">Tokyo weather</dir>
</ons-toolbar>
<div class="weather">
<imng-src="http://openweathermap.org/img/w/ {{icon}}.png">
<br>
{{weather}}
<div class="description">{{description}}</div>
</div>
</ons-page>
</body>
</html>
Every time you run it, "Failed to get weather information" appears.
Is the content old?
I read reviews on Amazon, but there is no information that it has stopped working, so I can't find any problems.
I would appreciate it if you could let me know if anyone understands.
Thank you for your cooperation.
The API specification was changed.I added lat:,lon,cnt,APPID to params in config and it worked.Thank you.
© 2024 OneMinuteCode. All rights reserved.