Heim > Artikel > Web-Frontend > So fragen Sie die Wettervorhersage in Angular ab

So fragen Sie die Wettervorhersage in Angular ab

亚连Original: 2018-06-15 11:14:261875Durchsuche

In diesem Artikel wird hauptsächlich die von Angular implementierte einfache Abfrage-Wettervorhersagefunktion vorgestellt, die AngularJS-bezogene Bedienfähigkeiten für die Interaktion mit API-Schnittstellen von Drittanbietern umfasst.

Das Beispiel dieses Artikels beschreibt Implementierung der Angular Simple Query-Wettervorhersagefunktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt folgt:

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

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Bus in der Vue-Komponentenkommunikation

So verwenden Sie Swiper, um ein Seitenbildkarussell zu implementieren

So implementieren Sie die Paginierung mit Swiper

So implementieren Sie die automatische numerische Inkrementierung in JavaScript

im React-Projekt So verwenden Sie Redux (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo fragen Sie die Wettervorhersage in Angular ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript angular 接口

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So bestimmen Sie Feiertage in jsNächster Artikel：So bestimmen Sie Feiertage in js

In Verbindung stehende Artikel

Mehr sehen