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

小云云
Freigeben: 2023-03-18 16:58:01
Original
1581 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!