suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Detailliertes Beispiel für die Implementierung einer einfachen Abfrage-Wettervorhersagefunktion durch Angular

Detailliertes Beispiel für die Implementierung einer einfachen Abfrage-Wettervorhersagefunktion durch Angular

小云云
小云云Original
2017-12-27 16:29:131630Durchsuche

Dieser Artikel stellt hauptsächlich die von Angular implementierte einfache Abfrage-Wettervorhersagefunktion vor und beinhaltet die damit verbundenen Bedienfähigkeiten von AngularJS für die Interaktion mit der API-Schnittstelle von Drittanbietern. Ich hoffe, dass er allen helfen kann.

Das Beispiel in diesem Artikel beschreibt die einfache Abfrage-Wettervorhersagefunktion, die von Angular implementiert wird. 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>

Verwandte Empfehlungen:

Detaillierte Beispiele, wie Sie mit Ajax das Wetter am Standort eines Benutzers abrufen können

Erklärung, wie man WeChat-Chatblasen in CSS3 mit Beispielen nachahmt

Einführung in die Methode zum Aufrufen der API-Schnittstelle zum Abfragen der Wetterfunktion in PHP

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Implementierung einer einfachen Abfrage-Wettervorhersagefunktion durch Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Detailliertes Beispiel für die Angular-Implementierung der Anzeige von Eingabeinhalten oben nach dem Klicken auf eine SchaltflächeNächster Artikel：Detailliertes Beispiel für die Angular-Implementierung der Anzeige von Eingabeinhalten oben nach dem Klicken auf eine Schaltfläche

In Verbindung stehende Artikel

Mehr sehen