VS2015 Cordova Ionic移動開發（五）

一、創建側邊菜單和導航項目

1.使用VS創建一個Ionic空項目，同時創建一個Ionic SideMenu和Ionic Tabs項目。將SideMenu和Tabs項目里的templates和js文件合并到空項目里，修改js對應的代碼即可。完整項目工程如下：

2.App.js代碼修改如下：

/** 加載所需要的各個模塊* 上篇教程中加載了controllers控制器模塊* 本篇教程加載了services服務模塊*/
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function ($ionicPlatform) {$ionicPlatform.ready(function () {if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);cordova.plugins.Keyboard.disableScroll(true);}if (window.StatusBar) {StatusBar.styleDefault();}});
})
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {//用來配置各個平臺導航條樣式（統一導航條位置）$ionicConfigProvider.platform.ios.tabs.style('standard');$ionicConfigProvider.platform.ios.tabs.position('bottom');$ionicConfigProvider.platform.android.tabs.style('standard');$ionicConfigProvider.platform.android.tabs.position('standard');$ionicConfigProvider.platform.ios.navBar.alignTitle('center');$ionicConfigProvider.platform.android.navBar.alignTitle('left');$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');$ionicConfigProvider.platform.ios.views.transition('ios');$ionicConfigProvider.platform.android.views.transition('android');//配置路由
    $stateProvider.state('app', {url: '/app',abstract: true,templateUrl: 'templates/menu.html',controller: 'AppCtrl'}).state('app.search', {url: '/search',views: {'menuContent': {templateUrl: 'templates/search.html'}}}).state('app.browse', {url: '/browse',views: {'menuContent': {templateUrl: 'templates/browse.html'}}}).state('app.playlists', {url: '/playlists',views: {'menuContent': {templateUrl: 'templates/playlists.html',controller: 'PlaylistsCtrl'}}}).state('app.single', {url: '/playlists/:playlistId',views: {'menuContent': {templateUrl: 'templates/playlist.html',controller: 'PlaylistCtrl'}}}).state('app.tab', {url: '/tab',abstract: true,views: {'menuContent': {templateUrl: 'templates/tabs.html'}}}).state('app.tab.dash', {url: '/dash',views: {'tab-dash': {templateUrl: 'templates/tab-dash.html',controller: 'DashCtrl'}}}).state('app.tab.chats', {url: '/chats',views: {'tab-chats': {templateUrl: 'templates/tab-chats.html',controller: 'ChatsCtrl'}}}).state('app.tab.chat-detail', {url: '/chats/:chatId',views: {'tab-chats': {templateUrl: 'templates/chat-detail.html',controller: 'ChatDetailCtrl'}}}).state('app.tab.account', {url: '/account',views: {'tab-account': {templateUrl: 'templates/tab-account.html',controller: 'AccountCtrl'}}});$urlRouterProvider.otherwise('/app/tab/dash');
});

controllers.js和services.js文件這里就不貼代碼了，因為不涉及到關鍵代碼的講解。

3.修改menu.html內容，注意注釋說明部分

<ion-side-menus enable-menu-with-back-views="false"><ion-side-menu-content><ion-nav-bar class="bar-stable"><ion-nav-back-button></ion-nav-back-button><ion-nav-buttons side="left"><button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button></ion-nav-buttons></ion-nav-bar><ion-nav-view name="menuContent"></ion-nav-view></ion-side-menu-content><ion-side-menu side="left"><ion-header-bar class="bar-stable"><h1 class="title">Left</h1></ion-header-bar><ion-content><ion-list><!--這里去掉menu-close屬性，改成menu-toggle="left"，不然使用返回鍵退出菜單時會自動關閉視圖，從而導致應用程序退出。--><ion-item ng-click="login()" menu-toggle="left">Login</ion-item><ion-item href="#/app/search" menu-toggle="left">Search</ion-item><ion-item href="#/app/browse" menu-toggle="left">Browse</ion-item><ion-item href="#/app/playlists" menu-toggle="left">Playlists</ion-item></ion-list></ion-content></ion-side-menu>
</ion-side-menus>

4.最終預覽效果如下

Animation

左邊側滑菜單打開后，怎么在Ripple模擬器中使用返回鍵來退出菜單到主界面：

在Ripple的Events菜單中選擇回退按鈕，點擊FireEvent即可模擬點擊返回鍵。

二、路由和視圖詳解

1.視圖加載順序

在index.html中有一個主視圖的標簽：

<ion-nav-view></ion-nav-view>

在menu.html中一個menu內容的視圖標簽：

<ion-nav-view name="menuContent"></ion-nav-view>

在選項卡tabs.html中有3個視圖標簽：

<ion-tabs class="tabs-icon-top tabs-color-active-positive"><!--重新設置路由--><ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/tab/dash"><ion-nav-view name="tab-dash"></ion-nav-view></ion-tab><!--重新設置路由--><ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/tab/chats"><ion-nav-view name="tab-chats"></ion-nav-view></ion-tab><!--重新設置路由--><ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/app/tab/account"><ion-nav-view name="tab-account"></ion-nav-view></ion-tab>
</ion-tabs>

我們需要在程序啟動時，加載第一個標簽選項卡內容（tab-dash.html）、標簽選項卡（tabs.html）、左側菜單（menu.html）

視圖的渲染方式:

首先將tab-dash.html喧渲染到tabs.html的<ion-nav-view name="tab-dash"></ion-nav-view>

其次將tabs.html渲染到menu.html的<ion-nav-view name="menuContent"></ion-nav-view>

最后將menu.html渲染到index.html

視圖切換方式：

在點擊menu.html中的菜單項時，會把菜單項所對應的頁面重新渲染到<ion-nav-view name="menuContent"></ion-nav-view>上覆蓋原來的標簽選項卡視圖，這樣在顯示區域就會顯示從菜單打開的視圖了。如果需要返回到之前的標簽選項卡視圖，只需使用返回按鈕就行了。導航視圖的作用就在于可以使用返回按鈕在各層視圖時間切換實現導航作用。

2.狀態繼承和激活順序

在上述視圖加載時需要用到如下狀態：

dash狀態：

.state('app.tab.dash', {url: '/dash',views: {'tab-dash': {templateUrl: 'templates/tab-dash.html',controller: 'DashCtrl'}}})

tab狀態：

.state('app.tab', {url: '/tab',abstract: true,views: {'menuContent': {templateUrl: 'templates/tabs.html'}}})

app狀態：

.state('app', {url: '/app',abstract: true,templateUrl: 'templates/menu.html',controller: 'AppCtrl'})

狀態繼承：

在AngularJs中狀態繼承使用：app.tab.dash，訪問路徑相對也是繼承的：#/app/tab/dash

每個狀態之間使用 . 隔開。父級狀態可以聲明為abstract:true。當abstract為true時，父級狀態默認不激活，只有當子狀態被激活時，父級狀態才被激活。

激活狀態代碼如下：

$urlRouterProvider.otherwise('/app/tab/dash');

該代碼的作用就是默認激活：app.tab.dash狀態。由于app.tab.dash狀態從app.tab繼承的，并且app.tab為abstract，所以app.tab.dash激活時同時會激活app.tab。同理，app是app.tab的父級狀態并且為abstract，所以當app.tab被激活時，會同時激活app狀態。

也就是說該代碼同時激活了3個狀態分別為：app.tab.dash、app.tab、app 。這3個狀態分別對應tab-dash.html選項卡內容頁、tabs.html選項卡頁面、menu.html菜單頁面。所以最終顯示成預覽的效果。

Ionic開發中一個難點就在于怎么使用路由控制視圖的顯示。各個路由（狀態）的激活順序，以及視圖的加載順序都尤為重要。不然就要走很多彎路。比如上述案例，有另外幾種做法，要么是把menu.html內容往各個視圖里粘貼，要么就是把tabs.html內容往各個內容頁粘貼。這種實現方式理論上都可以，但是效率不高，維護起來麻煩。充分利用好狀態的繼承關系，合理的安排視圖布局，是做好Ionic開發的基礎。

三、導航條設置

由于Ionic的導航條在IOS和Android呈現的位置不一致，所以使用以下代碼來讓導航條在各個平臺上顯示一致：

//用來配置各個平臺導航條樣式（統一導航條位置）$ionicConfigProvider.platform.ios.tabs.style('standard');$ionicConfigProvider.platform.ios.tabs.position('bottom');$ionicConfigProvider.platform.android.tabs.style('standard');$ionicConfigProvider.platform.android.tabs.position('standard');$ionicConfigProvider.platform.ios.navBar.alignTitle('center');$ionicConfigProvider.platform.android.navBar.alignTitle('left');$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');$ionicConfigProvider.platform.ios.views.transition('ios');$ionicConfigProvider.platform.android.views.transition('android');