So fragen Sie die Wettervorhersage in Angular ab-js-Tutorial-php.cn

So fragen Sie die Wettervorhersage in Angular ab

亚连

Freigeben： 2018-06-15 11:14:26

Original

1818 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!