angular-网络请求天气

最新推荐文章于 2022-08-10 16:15:00 发布
最新推荐文章于 2022-08-10 16:15:00 发布
阅读量521 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RenZjun/article/details/78242789
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        var app = angular.module("myApp", []);


        app.value("URL", "https://free-api.heweather.com/v5/weather?city=beijing&key=545d63e185fc48169a43cbabba6e74d2");


        app.factory("weather", function ($http, $q, URL) {
            return function () {
                return $http.get(URL).then(function (response) {
                    var data = response.data.HeWeather5[0];


                    var weather = {city: data.basic.city, txt: data.now.cond.txt, day3: [], hour4: []};


                    for (var i in data.daily_forecast) {
                        weather.day3.push({
                            date: data.daily_forecast[i].date,
                            txt: data.daily_forecast[i].cond.txt_d
                        });
                    }


                    for (var i in data.hourly_forecast) {
                        weather.hour4.push({
                            time: data.hourly_forecast[i].date,
                            txt: data.hourly_forecast[i].cond.txt
                        });
                    }


                    return weather;
                }, function (response) {
                    return $q.reject(response.status);
                });
            }
        });


        app.controller("myCtrl", function ($scope, weather) {
            weather().then(function (weather) {
                $scope.weather = weather;
            }, function (status) {
                console.log(status);
            });
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <div>
        城市：<i>{{ weather.city }}</i>
    </div>
    <div>
        天气：<i>{{ weather.txt }}</i>
    </div>
    <div>未来3天天气：</div>
    <table border="1">
        <tr>
            <th>日期</th>
            <th>天气</th>
        </tr>
        <tbody ng-repeat="value in weather.day3">
        <tr>
            <td>{{ value.date }}</td>
            <td>{{ value.txt }}</td>
        </tr>
        </tbody>
    </table>
    <div>未来几小时天气：</div>
    <table border="1">
        <tr>
            <th>时间</th>
            <th>天气</th>
        </tr>
        <tbody ng-repeat="value in weather.hour4">
        <tr>
            <td>{{ value.time }}</td>
            <td>{{ value.txt }}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
Ren15306
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angular-weather:Angular模块获取并显示某处的实际天气
05-20
#Angular天气 是一个Angular模块，用于获取和显示某处的实际天气。 该模块使用openweathermap.org API。 访问以获得使用此指令的许可证密钥。 ## WIP-披露 此生成器是“进行中的工作”，它定义了他的体系结构以及他的实现。 目前尚不能在live/production环境中使用它，但是如果您愿意，可以尝试，测试并做出贡献。 ##如何为项目添加角天气？ 安装模块bower install angular-weather --save 将库添加到您的项目 < script type =" text/javascript " src =" bower_components/angular-weather/src/angular-weather.js " > </ script > 在您的应用程序中声明模块 angular . module ( 'my
网络请求（天气查询Demo）
04-08
网络请求 天气查询Demo 初级
天气预报—网络请求
星星leslie的博客
09-05 404
还是觉得网络请求有点神奇吧 然后请求好数据后 如何去使用花了点时间 其实最简单的方法就是一个字典 一层一层得到目标数据就行 - (void)createURL { //1.创建请求地址 NSString *urlString = [NSString stringWithFormat:@"https://free-api.heweather.net/s6/weather?l...
angularJs 网络请求实现天气预报
余生|的博客
09-25 496
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="ajs/angular.min.js">script> script> var url1='https://free-api.heweather.com/v5/weather?city=';
angular.js查询天气
qq_40332973的博客
11-22 340
/** * * */ html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../angulatjs/angular-1.5.5/angular.min.js">script> script> var url1='https://fr
weather-web-app：天气网络应用程序
02-17
【天气网络应用程序】是一个基于JavaScript开发的Web应用，旨在提供实时天气信息。通过利用Web技术栈，该应用程序能够为用户提供方便、直观的界面，展示各地的天气状况。它利用了API（应用程序接口）来获取并处理...
weather-app:天气应用
04-02
6. **异步编程**：天气应用可能需要通过网络请求获取实时天气信息，因此需要掌握 Promise 或 async/await 进行异步操作。 7. **响应式编程**：如果应用采用现代前端框架（如 Angular 或 React），则需要了解响应式...
open-weather-map:Angular JS 网络应用
06-05
"open-weather-map" 是一个基于 AngularJS 构建的网络应用，主要目的是展示和查询全球各地的实时天气情况。AngularJS 是一个由 Google 主导并维护的前端 JavaScript 框架，它提供了丰富的功能来构建动态、交互式的...
angular学习资料
最新发布
06-20
- **天气预报应用**：可以作为初学者的第一个项目，涉及到HTTP请求、状态管理等基本概念。 - **电子商务网站**：涵盖复杂的路由配置、购物车功能、用户认证等。 - **社交网络应用**：实现类似Facebook的功能，如用户...
天气网络应用
02-13
【标题】：“天气网络应用”通常指的是一个在线的、基于Web的程序，它允许用户查询全球各地的实时或预测天气信息。这样的应用可以利用各种Weather APIs（应用程序接口）来获取和展示气象数据。 【描述】：“使用...
Angular实现的简单查询天气预报功能示例
10-18
主要介绍了Angular实现的简单查询天气预报功能,涉及AngularJS针对第三方API接口交互的相关操作技巧,需要的朋友可以参考下
angular-weather-forecast
05-11
预报 该项目是使用版本10.1.2生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看 。
Minimus一个全功能生产就绪的Angular6天气应用教程项目
08-10
Minimus 一个全功能生产就绪的Angular 6天气应用教程项目
ionic2微软官方查看天气demo
07-01
这是微软官方的查看天气的app源代码，已经用android真机调试通过。
Angular-Weather:使用Angular.js的天气应用
05-03
角度天气 使用Angular.js的天气应用
AngularJS获取天气预报(案例)
gyq04551的博客
02-18 1504
天气预报 {{weather.date}} {{weather.temperature}} {{weather.weather}} {{weather.wind}} var Weather = angular.module('Weather', []); Weather.co
angular实现对百度天气api跨域请求
Q18210994339的博客
02-14 204
申请秘钥：http://lbsyun.baidu.com/apiconsole/key ，有个百度账号就行ak=开发者秘钥 url地址 ：http://api.map.baidu.com/telematics/v3/weather?location=北京%E5%8C%97%E4%BA%AC&output=json&ak=tQydkkwXfEtSNgvAEHUr1v6...
angularjs实现查询天气的小案例(跨域请求)
irouduoduo的博客
05-27 915
效果图: 贴代码: Document .box { position: relative; width: 600px; height: 400px; margin: 0 auto; } .chaxun { bac
【iOS开发-天气预报】网络请求基础应用
weixin_61639290的博客
08-10 797
上周完成了学生管理系统之后继续开始了暑期任务的末尾- 天气预报天气预报的开始是要打好网络请求的基础，注意请求的位置和View刷新的时机，这些都是一些小的细节但是都是需要很注意的。暑期学习了不少东西也写了不少demo，临近放假，还是要多复习多看，暑假带给我最大的感受就是多看多写多尝试。关于小司。...
angular网络请求
08-29
Angular中进行网络请求有多种方式，最常用的是使用Angular的HttpClient模块。 首先，确保你的项目已经引入了`@angular/common/http`模块。然后，在你的组件或服务中引入HttpClient模块： ```typescript import { HttpClient } from '@angular/common/http'; ``` 接下来，你可以在构造函数中注入HttpClient服务： ```typescript constructor(private http: HttpClient) { } ``` 现在，你可以在你的组件或服务中使用HttpClient来发送请求。以下是一些常见的示例： 1. 发送GET请求并获取响应数据： ```typescript this.http.get('https://api.example.com/data').subscribe( data => { console.log(data); // 处理响应数据 }, error => { console.error(error); // 处理错误 } ); ``` 2. 发送POST请求并传递数据： ```typescript const data = { name: 'John', age: 25 }; this.http.post('https://api.example.com/user', data).subscribe( response => { console.log(response); // 处理响应数据 }, error => { console.error(error); // 处理错误 } ); ``` 3. 发送PUT请求更新数据： ```typescript const data = { name: 'John', age: 30 }; this.http.put('https://api.example.com/user/123', data).subscribe( response => { console.log(response); // 处理响应数据 }, error => { console.error(error); // 处理错误 } ); ``` 以上示例只是一些常见的用法，HttpClient还提供了其他的方法和功能，比如处理请求头、设置请求参数、处理响应拦截等。你可以参考Angular官方文档来深入了解更多信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值