Get local weather weather interface using aggregated data

It is also a task of freecodecamp. To get the weather
html through the weather interface:

<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>

What you need: bootstrapcss angular.js and the applied interface. This interface can use aggregated data or other weather interfaces. I remember that Gaode maps also have

<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]];
    });
  })
});

The simplest effect expression text: more will be added later to
get the

weather preview More performance effects will be added later