cari

Rumah  >  Artikel  >  hujung hadapan web  >  在Angular中如何实现查询天气预报

在Angular中如何实现查询天气预报

亚连
亚连asal
2018-06-15 11:14:261896semak imbas

这篇文章主要介绍了Angular实现的简单查询天气预报功能,涉及AngularJS针对第三方API接口交互的相关操作技巧,需要的朋友可以参考下

本文实例讲述了Angular实现的简单查询天气预报功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="siteCtrl">
<p >
  <input type="text" ng-model="city2" value="beijing">
  <button ng-click="check()">btn</button>
  <p>未来3天的天气情况</p>
  <ul ng-show="toggle">
  <li>
    {{city.basic.city}};<span>跟新时间:{{city.basic.update.loc}}</span>
    <p>气温:{{city.now.tmp}}deg</p>
    <p>wind:{{city.now.wind.dir}}</p>
  </li>
</ul>
</p>
<script>
  var url1=&#39;https://free-api.heweather.com/v5/weather?city=&#39;;
  var url3=&#39;&key=545d63e185fc48169a43cbabba6e74d2&#39;;
  var app = angular.module(&#39;myApp&#39;, []);
  app.controller(&#39;siteCtrl&#39;, function($scope, $http) {
    $scope.toggle=false;
    $scope.check=function(){
      $scope.toggle=true;
      var url2=$scope.city2;
      $http({
        url:url1+url2+url3
      }).then(function(data){
        console.log(data.data);
        $scope.data=data.data;
        $scope.city=$scope.data.HeWeather5[0];
      });
    };
  });
</script>
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue组件通信中如何使用Bus

使用Swiper如何实现页面图片轮播

使用Swiper如何实现分页器使用

在JavaScript中如何实现数值自动增加

在React项目中如何使用Redux（详细教程）

Atas ialah kandungan terperinci 在Angular中如何实现查询天气预报. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript angular 接口
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在js中如何判断节假日Artikel seterusnya：在项目中如何应用swiper

Artikel berkaitan

Lihat lagi