Home > Article > Web Front-end > How to query weather forecast in Angular

How to query weather forecast in Angular

亚连Original: 2018-06-15 11:14:261868browse

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>

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!

JavaScript angular 接口

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to determine holidays in jsNext article：How to determine holidays in js

See more

How to query weather forecast in Angular

Related articles