一步一步构建Angular应用 Vol.2 - 天气情况

序言

目的

通过第三方平台的天气API,使用Angular做一个很简单的天气信息显示的应用。

前情提要

我们使用gulp构建了一个基本的angular应用框架,并且通过了gulp-connect可是快速的进行部署开发的环境。
现在大致的目录结果是如下图:

当前的目录结构

确定目的

我们将使用http://www.heweather.com/提供的免费天气API来做一个简单的显示天气信息的应用。

我们的代码结构

原则

原则上我们会使用"围绕模块的方法来组织":

  1. 每一个功能模块都会有一个*.module.js用于声明当前模块的名称与引入的其他模块的关系;
  2. 如果当年模块有router功能则,则有一个*.router.js我文件用户声明ui-router相关的state;
  3. 当前模块相关的controller、service、directive都放置在该模块的文件夹下。

拆分第一个router

我们原有的app.module中不仅包含了module的声明,而且还包含了相关router的声明,这是一个很不好的做法,所以我们将其ui-router部分的代码单独分离出来并命名为app.router.js。

\\原有的app.module.js
(function ()
{
    'use strict';

    angular
        .module('app', [
            'ui.router'
        ])
        .config(routeConfig);;

    routeConfig.$inject = ['$stateProvider', '$urlRouterProvider','$locationProvider'];
    function routeConfig($stateProvider, $urlRouterProvider, $locationProvider)
    {

        $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: 'home.html',
                    controller: 'IndexController',
                    controllerAs: 'vm'
                });
    }
})();

将ui-router部分分离出来命名为index.router.js

\\index.router.js
(function ()
{
    'use strict';

    angular
        .module('app')
        .config(routerConfig);

    routerConfig.$inject = ['$stateProvider', '$urlRouterProvider','$locationProvider'];
    function routerConfig($stateProvider, $urlRouterProvider, $locationProvider)
    {

      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'home.html',
          controller: 'IndexController',
          controllerAs: 'vm'
        });
    }


})();

额外的需要在index.html引入新的文件

    <script src="scripts/index.module.js"></script>
    <script src="scripts/index.router.js"></script>

建立新的模块

目的

我们单独将显示天气部分的功能为一个独立的模块,区别于其他模块。

声明模块文件及相应的配套文件

我们回顾下刚才的说明,我们首先先新建一个weather的文件夹,然后在weather.module.js文件中声明模块,在weather.router.js中声明路由,然后在新建相应的controller与service:

增加weather模块后的目录结构

weather.module.js

通过使用module(name,[])的setter方法,向angular上下文中初始化一个名为app.weather的module。

(function ()
{
    'use strict';

    angular
        .module('app.weather', [
            'ui.router'
        ]);
})();

weather.router.js 路由配置文件

(function ()
{
    'use strict';

    angular
        .module('app.weather')
        .config(routerConfig);

    routerConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
    function routerConfig($stateProvider, $urlRouterProvider)
    {

      $stateProvider
        .state('weather', {
          url: '/weather',
          templateUrl: 'scripts/weather/index.html',  //注意index.html的路径写法
          controller: 'IndexController',
          controllerAs: 'vm'
        });
    }


})();

index.controller.js 的空文件

(function ()
{
    'use strict';

    angular
        .module('app.weather')
        .controller('IndexController', IndexController);

    function IndexController()
    {
        var vm = this;

    }

})();

weather.service.js

(function(){
    'use strict';

    angular
        .module('app.weather')
        .factory('WeatherService', WeatherService);

    WeatherService.$inject = ['$http', '$state'];
    function WeatherService($http, $state) {
        return {
           
        };
    }
})();

最后需要在index.html中增加引入,并且在index.module.js中引入app.weather的模块.

\\index.module.js
(function ()
{
    'use strict';

    angular
        .module('app', [
            'ui.router',
            'app.weather'

        ]);
})();

然后我们在地址栏里输入就可以看到我们在index.html输入的内容了

\\index.html
<h1>天气情况</h1>
weather模块加载正常

为和风填写编写service

天气API形式

和风天气API

则目标API地址便是https://api.heweather.com/x3/weather?cityid=城市ID&key=你的认证key
我们通过查阅知道上海的城市ID 是 CN101020100,再查一下自己的认证key

通过curl测试一下

我们通过curl的命令来测试一下这个api是不是可用,在mac控制端中输入

https://api.heweather.com/x3/weather?cityid=CN101020100&key=你的KEY
api返回结果

开始书写service

weather.service的目的是从和风天气的api中获取一个城市天气信息,并返回给controller使用。
首先对WeatherService中注入$http

    WeatherService.$inject = ['$http'];
    function WeatherService($http) {
    }

然后,我们使用$http.post方法结合then回调函数调用和风天气的API

    WeatherService.$inject = ['$http'];
    function WeatherService($http) {
        return {
            getWeather:function(){
                return $http
                    .post("https://api.heweather.com/x3/weather?cityid=CN101020100&key=替换成你的KEY")
                    .then(function(response) {
                        return response.data; // controller层获取的response
                    });
           }
        };
    }

在Controller层调用Service中的API。

我们在Controller中注入WeatherService后,我们编写一个showWeather的函数用于在controller层调用和风天气的API。

 function IndexController(WeatherService)
    {
        var vm = this;
        vm.city = "";
        vm.temp = "";
        vm.showWeather = showWeather;

        function showWeather(){

            WeatherService.getWeather().then(function(data){
                vm.city = data["HeWeather data service 3.0"][0].basic.city;
                vm.temp = data["HeWeather data service 3.0"][0].now.tmp;
            });
        }
    }

视图层调用结果

最后我们编写视图层

<h1>天气情况</h1>


<dl>
   <dt>城市</dt>
   <dd>{{vm.city}}</dd>
   <dt>温度</dt>
   <dd>{{vm.temp}} 摄氏度</dd>
</dl>

<button ng-click="vm.showWeather()">点击显示天气</button>

大功告成

在终端输入gulp运行开发服务器后,在浏览器输入http://127.0.0.1:8080/#/weather就可以看到下面的画面了。

运行画面

点击按钮则可以立刻显示上海的气温啦。

点击显示温度

下一期我们会做什么

下一期我们会继续完善这个天气应用,使用angular的指令来封装html层的一些组件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,423评论 25 707
  • 序言 目的 这将是一个系列文,动机是为了希望给公司及项目组其他的新人同学同事作为入门教材使用。整个系列将从零开始构...
    AkiraPan阅读 1,679评论 10 10
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,594评论 18 139
  • Angular面试题 一、ng-show/ng-hide与ng-if的区别? 第一点区别是,ng-if在后面表达式...
    w_zhuan阅读 5,515评论 0 26
  • 今天第二图,我们继续聊聊鲜肉小花的问题。 但这一次,我们想举一个反例。 濮存昕,一个真·演员。 现在的标题动不动就...
    Sir电影阅读 786评论 2 7