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

序言目的通过第三方平台的天气API,使用Angular做一个很简单的天气信息显示的应用。
前情提要我们使用gulp构建了一个基本的angular应用框架，并且通过了gulp-connect可是快速的进行部署开发的环境。
现在大致的目录结果是如下图：

文章图片
当前的目录结构确定目的我们将使用http://www.heweather.com/提供的免费天气API来做一个简单的显示天气信息的应用。
我们的代码结构原则原则上我们会使用"围绕模块的方法来组织"：

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

拆分第一个router 【一步一步构建Angular应用|一步一步构建Angular应用 Vol.2 - 天气情况】我们原有的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:

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

文章图片
增加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; }); } }

视图层调用结果
最后我们编写视图层