序言

目的

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

前情提要

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

当前的目录结构

确定目的

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

我们的代码结构

原则

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

每一个功能模块都会有一个*.module.js用于声明当前模块的名称与引入的其他模块的关系;
如果当年模块有router功能则,则有一个*.router.js我文件用户声明ui-router相关的state；
当前模块相关的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引入新的文件

建立新的模块

目的

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

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

我们回顾下刚才的说明，我们首先先新建一个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
天气情况

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;
            });
        }
    }

视图层调用结果

最后我们编写视图层

天气情况



   城市
   {{vm.city}}
   温度
   {{vm.temp}} 摄氏度

大功告成

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

运行画面

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

点击显示温度

下一期我们会做什么

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

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

序言

目的