How to query weather forecast in Angular-JS Tutorial-php.cn

How to query weather forecast in Angular

亚连

Release： 2018-06-15 11:14:26

Original

1933 people have browsed it

This article mainly introduces the simple query weather forecast function implemented by Angular, involving AngularJS related operating skills for third-party API interface interaction. Friends in need can refer to it

The example of this article describes the implementation of Angular Simple query weather forecast function. 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

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

How to use Bus in Vue component communication

##How to use Swiper to implement page image carousel

How to implement pagination using Swiper

How to implement automatic numerical increase in JavaScript

In React project How to use Redux (detailed tutorial)

The above is the detailed content of How to query weather forecast in Angular. For more information, please follow other related articles on the PHP Chinese website!