简介：本节课我们会制作一款天气应用，这款应用允许用户查看当前的天气情况、天气预报以及地点，在模态框内显示日出和日落的数据，使用分页滚动面板显示天气信息，使用侧滑菜单实现导航。

6.1 项目配置

环境配置，我们在第二节课的时候讲过了呦~下面我们直接创建项目啦~

打开终端，在我们选择的目录下执行命令：

$ ionic start weatherApp blank

进入文件夹：

$ cd weatherApp

启动服务：

$ ionic serve

应用初始页面如下：

6.2 设置侧滑菜单和视图

本应用我们将会采用侧滑菜单作为主要的导航组件。侧滑菜单既可以在左边也可以在右边滑入展开，本应用将从左边滑入。使用ionSideMenus组件可以很容易实现这个功能，它允许右划显示侧滑菜单，或者使用在左上角已配置好的切换按钮。

现在我们打开index.html文件，配置侧滑菜单组件：

天气

侧滑菜单的定义十分简单，只要在代码中包含并使用ionSideMenus、ionSideMenuContent和ionSideMenu指令即可。首先我们需要用ionSideMenus包裹其他功能指令，否则菜单无法生效。在ionSideMenus内部需要增加ionSideMenuContent和ionSideMenu这两个元素，并使用side属性设置菜单位置，注意每个侧滑菜单组件中只能定义一个ionSideMenuContent元素，可以定义最多两个ionSideMenu元素。

ionNavButtons元素，设置menu-toggle属性来控制单击菜单时菜单的开启和显示，而menuclose属性，则控制菜单的关闭与隐藏。

下面我们来预览一下我们设置的侧滑菜单的样子~

6.3 制作搜索视图-->地理位置搜索

当用户第一次启动时，用户需要设置想要查看天气的地点。我们将创建一个新的视图用来允许用户搜索并查看结果列表。

要实现这个功能，需要使用state provider创建一个新的路由并定义模板和控制器，现在我们先来添加一个路由状态，打开app.js文件：

angular.module('starter', ['ionic']) //添加config()方法定义路由状态 .config(function($stateProvider, $urlRouterProvider) { $stateProvider //定义搜索路由的状态 .state('search', { url:'/search', controller:'SearchController', templateUrl:'views/search/search.html' }); //使用搜索页面作为默认视图 $urlRouterProvider.otherwise('/search'); })

搜索视图的路由状态我们已经设置好了，现在来建搜索视图模板，新建文件www/views/search/search.html：

然后我们来设置搜索视图的控制器，新建文件www/views/search/search.js文件：

angular.module('starter') //新建控制器SearchController并注入服务 .controller('SearchController', function($scope, $http) { //定义一个搜索数据模板 $scope.model = { term: '' }; $scope.search = function() { //从googleapis中搜索数据并存储结果到scope中 $http.get('https://maps.googleapis.com/maps/api/geocode/json', { params: { address: $scope.model.term } }) .success(function(response) { $scope.results = response.results; }); }; });

现在将搜索视图的控制器引入到index.html文件中：

然后我们来更新一下showModal()方法，打开weather.js文件：

//定义开启弹窗的方法 $scope.showModal = function(){ //如果弹窗已经存在，直接显示弹窗 if($scope.modal){ $scope.modal.show(); } //如果弹窗不存在，则导入弹窗模板，并注入作用域以备使用 else{ $ionicModal.fromTemplateUrl('views/weather/modal-chart.html', { scope:$scope }) //当模板加载完毕后，将弹窗实例存储到作用域中 .then(function(modal){ $scope.modal = modal; //创建变量 var days = []; var day = Date.now(); //为每一天增加对应数据 for(var i=0;i<365;i++){ day += 1000*60*60*24; //使用SunCalc基于经纬度和时间获取日出和日落的时间 days.push(SunCalc.getTimes(day, $scope.params.lat, $scope.params.lng)); }; //将最后生成的列表数据注入到作用域中 $scope.chart = days; //显示弹窗 $scope.modal.show(); }); } };

之后，我们来更新一下弹窗模板，使用collection repeat来渲染列表（对于collection-repeat和ng-repeat的区别，大家可以自己查一下哟），打开modal-chart.html文件：

现在我们再预览一下弹窗，看看效果~

天气视图最后一个功能-->弹框提示并确认地点修改功能。现在，我们点击活动菜单列表里的按钮时，应用只会默默的执行，不会给我们提示信息，这样不友好，用户在操作后没有得到反馈。

我们需要在Locations服务的切换方法中增加弹框方法。首先需要确认用户是否想要移除/添加地点，并且当地点移除/添加成功后提示用户，打开app.js文件：

//从地点中增加或者删除元素 toggle: function(item) { var index = Locations.getIndex(item); if (index >= 0) { //创建确认弹框，参数为预先定义好的对象；默认确认弹框带有确认和取消按钮 $ionicPopup.confirm({ title:'确定吗？', template:'不再' + Locations.data[index].city }) //当单击弹框中的某个按钮时，触发该函数，当用户点击确认的时候执行删除地点功能 .then(function(res){ if(res){ Locations.data.splice(index, 1); } }); } else { Locations.data.push(item); //创建一个带有标题的提示弹窗，告知用户成功，默认只有确认按钮 $ionicPopup.alert({ title:'成功' }); } },

现在我们来预览一下应用：

到现在，我们这款天气应用已经开发完了哦~

HTML JavaScript

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。