Detailed example of Angular implementing simple query weather forecast function-PHP Tutorial-php.cn

Detailed example of Angular implementing simple query weather forecast function

小云云

Release： 2023-03-18 16:58:01

Original

1581 people have browsed it

This article mainly introduces the simple query weather forecast function implemented by Angular, and involves AngularJS's related operating skills for third-party API interface interaction. Friends in need can refer to it. I hope it can help everyone.

The example in this article describes the simple query weather forecast function implemented by Angular. Share it with everyone for your reference, the details are as follows:

Let’s take a look at the running effect first:

The specific code is as follows:

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

Copy after login

Related Recommendation:

Detailed example of how to get the weather in the user’s location via ajax

Example of how to imitate WeChat chat bubbles using CSS3

Introduction to the method of calling the API interface to query the weather function in php

The above is the detailed content of Detailed example of Angular implementing simple query weather forecast function. For more information, please follow other related articles on the PHP Chinese website!