簡介：本節(jié)課我們會制作一款天氣應(yīng)用，這款應(yīng)用允許用戶查看當(dāng)前的天氣情況、天氣預(yù)報以及地點，在模態(tài)框內(nèi)顯示日出和日落的數(shù)據(jù)，使用分頁滾動面板顯示天氣信息，使用側(cè)滑菜單實現(xiàn)導(dǎo)航。

6.1 項目配置

環(huán)境配置，我們在第二節(jié)課的時候講過了呦~下面我們直接創(chuàng)建項目啦~

打開終端，在我們選擇的目錄下執(zhí)行命令：

$ ionic start weatherApp blank

進入文件夾：

$ cd weatherApp

啟動服務(wù)：

$ ionic serve

應(yīng)用初始頁面如下：

6.2 設(shè)置側(cè)滑菜單和視圖

本應(yīng)用我們將會采用側(cè)滑菜單作為主要的導(dǎo)航組件。側(cè)滑菜單既可以在左邊也可以在右邊滑入展開，本應(yīng)用將從左邊滑入。使用ionSideMenus組件可以很容易實現(xiàn)這個功能，它允許右劃顯示側(cè)滑菜單，或者使用在左上角已配置好的切換按鈕。

現(xiàn)在我們打開index.html文件，配置側(cè)滑菜單組件：

天氣

側(cè)滑菜單的定義十分簡單，只要在代碼中包含并使用ionSideMenus、ionSideMenuContent和ionSideMenu指令即可。首先我們需要用ionSideMenus包裹其他功能指令，否則菜單無法生效。在ionSideMenus內(nèi)部需要增加ionSideMenuContent和ionSideMenu這兩個元素，并使用side屬性設(shè)置菜單位置，注意每個側(cè)滑菜單組件中只能定義一個ionSideMenuContent元素，可以定義最多兩個ionSideMenu元素。

ionNavButtons元素，設(shè)置menu-toggle屬性來控制單擊菜單時菜單的開啟和顯示，而menuclose屬性，則控制菜單的關(guān)閉與隱藏。

下面我們來預(yù)覽一下我們設(shè)置的側(cè)滑菜單的樣子~

6.3 制作搜索視圖-->地理位置搜索

當(dāng)用戶第一次啟動時，用戶需要設(shè)置想要查看天氣的地點。我們將創(chuàng)建一個新的視圖用來允許用戶搜索并查看結(jié)果列表。

要實現(xiàn)這個功能，需要使用state provider創(chuàng)建一個新的路由并定義模板和控制器，現(xiàn)在我們先來添加一個路由狀態(tài)，打開app.js文件：

angular.module('starter', ['ionic']) //添加config()方法定義路由狀態(tài) .config(function($stateProvider, $urlRouterProvider) { $stateProvider //定義搜索路由的狀態(tài) .state('search', { url:'/search', controller:'SearchController', templateUrl:'views/search/search.html' }); //使用搜索頁面作為默認(rèn)視圖 $urlRouterProvider.otherwise('/search'); })

搜索視圖的路由狀態(tài)我們已經(jīng)設(shè)置好了，現(xiàn)在來建搜索視圖模板，新建文件www/views/search/search.html：

然后我們來設(shè)置搜索視圖的控制器，新建文件www/views/search/search.js文件：

angular.module('starter') //新建控制器SearchController并注入服務(wù) .controller('SearchController', function($scope, $http) { //定義一個搜索數(shù)據(jù)模板 $scope.model = { term: '' }; $scope.search = function() { //從googleapis中搜索數(shù)據(jù)并存儲結(jié)果到scope中 $http.get('https://maps.googleapis.com/maps/api/geocode/json', { params: { address: $scope.model.term } }) .success(function(response) { $scope.results = response.results; }); }; });

現(xiàn)在將搜索視圖的控制器引入到index.html文件中：

然后我們來更新一下showModal()方法，打開weather.js文件：

//定義開啟彈窗的方法 $scope.showModal = function(){ //如果彈窗已經(jīng)存在，直接顯示彈窗 if($scope.modal){ $scope.modal.show(); } //如果彈窗不存在，則導(dǎo)入彈窗模板，并注入作用域以備使用 else{ $ionicModal.fromTemplateUrl('views/weather/modal-chart.html', { scope:$scope }) //當(dāng)模板加載完畢后，將彈窗實例存儲到作用域中 .then(function(modal){ $scope.modal = modal; //創(chuàng)建變量 var days = []; var day = Date.now(); //為每一天增加對應(yīng)數(shù)據(jù) for(var i=0;i<365;i++){ day += 1000*60*60*24; //使用SunCalc基于經(jīng)緯度和時間獲取日出和日落的時間 days.push(SunCalc.getTimes(day, $scope.params.lat, $scope.params.lng)); }; //將最后生成的列表數(shù)據(jù)注入到作用域中 $scope.chart = days; //顯示彈窗 $scope.modal.show(); }); } };

之后，我們來更新一下彈窗模板，使用collection repeat來渲染列表（對于collection-repeat和ng-repeat的區(qū)別，大家可以自己查一下喲），打開modal-chart.html文件：

現(xiàn)在我們再預(yù)覽一下彈窗，看看效果~

天氣視圖最后一個功能-->彈框提示并確認(rèn)地點修改功能。現(xiàn)在，我們點擊活動菜單列表里的按鈕時，應(yīng)用只會默默的執(zhí)行，不會給我們提示信息，這樣不友好，用戶在操作后沒有得到反饋。

我們需要在Locations服務(wù)的切換方法中增加彈框方法。首先需要確認(rèn)用戶是否想要移除/添加地點，并且當(dāng)?shù)攸c移除/添加成功后提示用戶，打開app.js文件：

//從地點中增加或者刪除元素 toggle: function(item) { var index = Locations.getIndex(item); if (index >= 0) { //創(chuàng)建確認(rèn)彈框，參數(shù)為預(yù)先定義好的對象；默認(rèn)確認(rèn)彈框帶有確認(rèn)和取消按鈕 $ionicPopup.confirm({ title:'確定嗎？', template:'不再' + Locations.data[index].city }) //當(dāng)單擊彈框中的某個按鈕時，觸發(fā)該函數(shù)，當(dāng)用戶點擊確認(rèn)的時候執(zhí)行刪除地點功能 .then(function(res){ if(res){ Locations.data.splice(index, 1); } }); } else { Locations.data.push(item); //創(chuàng)建一個帶有標(biāo)題的提示彈窗，告知用戶成功，默認(rèn)只有確認(rèn)按鈕 $ionicPopup.alert({ title:'成功' }); } },

現(xiàn)在我們來預(yù)覽一下應(yīng)用：

到現(xiàn)在，我們這款天氣應(yīng)用已經(jīng)開發(fā)完了哦~

HTML JavaScript

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。