也是freecodecamp的一个任务,要获取通过天气接口获取天气
html:
<div ng-app="Weather">
<div class="container" ng-controller="MainCtrl">
<div class="row">
<header class="col-xs-12 text-center">
<a href="https://www.juhe.cn"><img src="https://www.juhe.cn/themes/v5/public/images/loginlogo.png" class="img-responsive"></a>
<h1>天气应用</h1>
</header>
</div>
<div class="col-xs-12 col-md-12">
<div class="text-center status">
<p>{{Data.today.city}}</p>
<p>{{Data.today.week}}</p>
<p>{{Data.today.date_y}}</p>
<hr>
<h4>今天天气</h4>
<p>{{Data.today.weather}}</p>
<p>{{Data.today.temperature}}</p>
<p>湿度:{{Data.sk.humidity}}</p>
<p>{{Data.today.wind}}</p>
<p>穿衣指数:{{Data.today.dressing_index}}</p>
<p>洗车指数:{{Data.today.wash_index}}</p>
<p>旅行指数:{{Data.today.travel_index}}</p>
<p>锻炼指数:{{Data.today.exercise_index}}</p>
<p>紫外线指数:{{Data.today.uv_index}}</p>
</div>
<hr>
</div>
</div>
</div>
所需的东西:bootstrapcss angular.js 以及申请好的接口这个接口可以用聚合数据或者其他天气接口都行,我记得高德地图也有
<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/angular.js/1.5.11/angular.min.js"></script>
<!--angular.js得在1.6以下 因为有获取json的函数-->
js:
/*angular1.6版本以上url中不能包含callback这个参数,而是用jsonpCallbackParam来指定 因此这个获取json的方法只适用angular1.6 以下的*/
var app = angular.module('Weather', []);//创建模型
app.factory('WeatherApi', function($http) {//控制器 方法工厂 可以把方法写在这里面
var obj = {};
obj.getIP = function() {
return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK");
}
//通过ip来获取天气状况
obj.getCurrent = function(ip) {//拼接请求数据
var api = "http://v.juhe.cn/weather/ip?format=1";
//key要自己去聚合数据申请 每个人注册之后有免费的500次请求
//第一次1块钱可以买1000次请求之后可以花更多的钱买更多这里用xxxxx替代了,如果想要请自己申请--
var APPKey = "&key=xxxxxxx&&ip=";
var cb = "&callback=JSON_CALLBACK";
return $http.jsonp(api + APPKey + ip + cb);//发送跨站请求
};
return obj
});
app.controller('MainCtrl', function($scope, WeatherApi) {
$scope.Data = {};
WeatherApi.getIP().success(function(data){
var ip = data.ip;
WeatherApi.getCurrent(ip).success(function(data) {
$scope.Data = data.result;//获取get的结果
console.log(data.result);
//这里可以把未来几天的天气也列出来--需要加lists
$scope.items= data.result.future;//把未来几天的天天气对象数组存入
delete $scope.items[Object.keys($scope.items)[0]];
});
})
});
最为简单的效果表现 文字:后期会加入更多
获取天气预览
后期需要加入更多的表现效果