序言
目的
通过第三方平台的天气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引入新的文件
<script src="scripts/index.module.js"></script>
<script src="scripts/index.router.js"></script>
建立新的模块
目的
我们单独将显示天气部分的功能为一个独立的模块，区别于其他模块。
声明模块文件及相应的配套文件
我们回顾下刚才的说明，我们首先先新建一个weather的文件夹，然后在weather.module.js文件中声明模块，在weather.router.js中声明路由，然后在新建相应的controller与service:
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>
为和风填写编写service
天气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
开始书写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层的一些组件。
