快捷導(dǎo)航

Angular實(shí)現(xiàn)的簡(jiǎn)單查詢天氣預(yù)報(bào)功能示例

更新時(shí)間：2017年12月27日 12:15:07 作者：當(dāng)愛0201

這篇文章主要介紹了Angular實(shí)現(xiàn)的簡(jiǎn)單查詢天氣預(yù)報(bào)功能,涉及AngularJS針對(duì)第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Angular實(shí)現(xiàn)的簡(jiǎn)單查詢天氣預(yù)報(bào)功能。分享給大家供大家參考，具體如下：

先來看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="siteCtrl">
<div >
  <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>跟新時(shí)間:{{city.basic.update.loc}}</span>
    <p>氣溫:{{city.now.tmp}}deg</p>
    <p>wind:{{city.now.wind.dir}}</p>
  </li>
</ul>
</div>
<script>
  var url1='https://free-api.heweather.com/v5/weather?city=';
  var url3='&key=545d63e185fc48169a43cbabba6e74d2';
  var app = angular.module('myApp', []);
  app.controller('siteCtrl', 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>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼
本篇文章主要介紹了AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
Angular2關(guān)于@angular/cli默認(rèn)端口號(hào)配置的問題
本篇文章主要介紹了Angular2關(guān)于@angular/cli默認(rèn)端口號(hào)配置的問題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-07-07
angularjs 頁面自適應(yīng)高度的方法
本篇文章主要介紹了angularjs 頁面自適應(yīng)高度的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
angular簡(jiǎn)介和其特點(diǎn)介紹
這篇文章主要介紹了angular簡(jiǎn)介和其特點(diǎn)介紹,本文講解了關(guān)于和jquery的比較、關(guān)于適用場(chǎng)合、關(guān)于UI的結(jié)合、關(guān)于angularjs的特點(diǎn)等內(nèi)容,需要的朋友可以參考下
2015-01-01
angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法
這篇文章主要介紹了angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章
2015-10-10
AngularJS操作鍵值對(duì)象類似java的hashmap(填坑小結(jié))
我們知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法，那么在angularJS中如何創(chuàng)造（使用）這樣一個(gè)對(duì)象呢？今天小編通過本文給大家分享下，感興趣的朋友一起學(xué)習(xí)吧
2016-11-11
使用AngularJS制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程
這篇文章主要介紹了使用Angular.js制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程,AngularJS是一個(gè)非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下
2015-06-06
angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼
本篇文章主要介紹了angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-07-07