Maison > Article > développement back-end > Exemple détaillé d'Angular implémentant une fonction de prévision météorologique à requête simple

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

小云云original: 2017-12-27 16:29:131579parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple détaillé d'implémentation angulaire de l'affichage du contenu d'entrée ci-dessus après avoir cliqué sur un boutonArticle suivant：Exemple détaillé d'implémentation angulaire de l'affichage du contenu d'entrée ci-dessus après avoir cliqué sur un bouton

Articles Liés

Voir plus