Cet article présente principalement la fonction de prévision météorologique de requête simple implémentée par Angular, impliquant des compétences opérationnelles liées à AngularJS pour l'interaction avec l'interface API tierce. Les amis dans le besoin peuvent s'y référer
L'exemple de cet article décrit le. implémentation de la fonction de prévision météorologique de requête simple angulaire. 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='https://free-api.heweather.com/v5/weather?city=';
var url3='&key=545d63e185fc48169a43cbabba6e74d2';
var app = angular.module('myApp', []);
app.controller('siteCtrl', 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>Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles connexes :
Comment utiliser Bus dans la communication des composants Vue
Comment utiliser Swiper pour implémenter un carrousel d'images de page
Comment implémenter la pagination à l'aide de Swiper
Comment implémenter l'augmentation numérique automatique en JavaScript
dans le projet React Comment utiliser Redux (tutoriel détaillé)
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
