Exemple détaillé d'Angular implémentant une fonction de prévision météorologique à requête simple-tutoriel php-php.cn

Exemple détaillé d'Angular implémentant une fonction de prévision météorologique à requête simple

小云云

Libérer： 2023-03-18 16:58:01

original

1630 Les gens l'ont consulté

Cet article présente principalement la fonction de prévision météorologique de requête simple implémentée par Angular et implique les compétences opérationnelles associées d'AngularJS pour l'interaction avec l'interface API tierce. J'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit la fonction de prévision météorologique simple implémentée par Angular. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant suit :

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

Copier après la connexion

Recommandations associées :

Exemples détaillés de la façon d'obtenir la météo à l'emplacement d'un utilisateur avec ajax

Explication de comment utiliser CSS3 pour imiter les bulles de chat WeChat

Introduction à la méthode d'appel de l'interface API pour interroger la fonction météo en php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!