VS2015 Cordova Ionic移動開發

感謝作者貢獻出如此好的文章，爲了方便學習轉載過來慢慢研究。

原文地址 http://www.cnblogs.com/UltimateAvalon/p/5328642.html

-------------------------------------------------------系列一---------------------------------------------------

一、Windows環境配置

1.如果已經安裝VS2015，打開【工具】-【選項】找到Cordova選項：

運行依賴關係查看器，用來檢測開發環境是否完整。

如果檢測顯示：

那麼就是環境配置完成了。可以直接開發了。

如果顯示有錯誤頁面，那麼按照錯誤頁面的提示，進行對應的環境配置即可。

一般錯誤頁面提示都是缺少對應的依賴組件，包括如下：

Git

Node.js

Android SDK

JDK

這些組件可以在安裝VS時選擇安裝，不過版本不是最新的。所以一般自己手動安裝就行了。

截至本文發佈前：VS2015 Cordova目前版本已經是Update 8了。我使用的是Update7，Cordova版本5.1.1，支持Android-23。

注意：Node.js最好安裝x86 32位版本。VS官方給的意見就是推薦使用32位版本，如果你安裝了64爲Node.js那麼依賴關係檢查有可能提示系統沒有安裝Node.js。如果始終提示沒有安裝Node，建議改爲32位。經測試，有的機器安裝64位正常，有的機器安裝64位後會提示找不到Node，根據官方意見改成32位就正常了。

2.如果VS中沒有Cordova選項請看下面步驟：

在【工具-選項】中沒有Cordova選項，那麼就是安裝VS時使用了默認安裝選項，默認安裝選項裏不安裝Cordova工具。重新打開VS2015的安裝包，執行安裝程序，選擇修改，會彈出所有可安裝的列表，將Cordova選項勾上，重新應用即可。建議在安裝之前把Android SDK裝上，VS安裝Android SDK默認使用Google地址，沒有VPN的話，會等相當長的時間。

打開VS安裝程序，選擇修改：

勾選Corvoda：

注意：勾選Cordova同時會自動默認勾選Android SDK和Git等工具選項，上圖沒有顯示Android SKD選項，因爲測試用的電腦沒有連網，切記安裝過程保證網絡通暢。

3.如果新裝VS

推薦使用VS2015 Update1及以上版本。安裝時，選擇自定義，將需要的選項勾選，建議安裝前將Android SDK安裝好。安裝步驟如上圖所示，同時保證網絡通暢。

二、Mac環境配置

1.自己有Mac電腦

下載並安裝Xcode工具，提供編譯和模擬器。

下載安裝Node.js

使用Node指令下載並安裝remotebuild等工具

記得使用前先解鎖root賬戶

su root
sudo npm install npm -g
sudo npm install remotebuild -g
sudo npm install ios-sim -g

安裝完成remotebuild工具後，啓動remotebuild服務：

remotebuild --secure false

注意：--secure false啓用非安全模式，在我機器上測試時使用安全鏈接，無法鏈接成功，建議使用非安全鏈接，啓動結果如下：

首次啓動時會生成一個PIN碼，記得一定要記下來，需要用來在VS中配置的，如果沒有生成PIN碼使用：

remotebuild -test

或者使用

remotebuild -certificates

來生成。默認首次啓動會生產對應信息：如下

IP：192.168.1.101

PIN：214021

Port:3000

以上的PIN值是默認生成的PIN碼，如果有忘記的，貌似可以使用，如果沒有IP信息，自己在Mac中查看下IP即可。

完成上述步驟，打開VS2015 【工具】-【選項】找到Cordova選項，選擇【IOS配置】：

將上述獲取的信息填入即可，備註：建議安全模式選擇false關掉。SSL安全鏈接我簡單試了下，貌似不行，還是關掉吧。

至此IOS環境全部配置完成，只要把Mac電腦和remotebuild遠程編譯服務開啓即可，同時保持網絡通暢。

Xcode的模擬，會在VS發出編譯請求後，自動開啓。

2.沒有Mac電腦

使用微軟賬號申請一個免費的Mac雲端虛擬機，或者自己搭建Mac虛擬機即可，環境配置同上。

-------------------------------------------------------系列二---------------------------------------------------

一、創建空白Cordova應用

打開VS，選擇【新建項目】，選擇其它語言JavaScript或者TypeScript，語言的話就按個人喜好，喜歡JS就用JS，喜歡TS就用TS，推薦使用TS書寫，代碼結構和可讀性相對更強。本文演示使用JS來書寫，方便不會TS的用戶閱讀。

創建完項目後，項目結構如下：

www目錄爲我們本地應用程序目錄，和一般靜態網站類似。默認主頁爲index.html。腳本對應爲scripts/index.js

config.xml爲項目配置文件，該文件在VS中是可視化操作的。

包括項目配置，平臺配置，以及Cordova插件管理，Cordova插件可以在此處添加。

打開index.html修改body內容爲：

<div class="app">
    <p id="deviceready" class="event">Hello Word!</p>
</div>

並把index.js中自動生成的代碼註釋掉：

function onDeviceReady() {
    // 處理 Cordova 暫停並恢復事件
    document.addEventListener( 'pause', onPause.bind( this ), false );
    document.addEventListener( 'resume', onResume.bind( this ), false );
        
    // TODO: Cordova 已加載。在此處執行任何需要 Cordova 的初始化。
    //var element = document.getElementById("deviceready");
    //element.innerHTML = 'Device Ready';
    //element.className += ' ready';
};

注意：Update7 之前版本中沒有上述標籤和代碼，將顯示文本改爲HelloWord後，直接啓動默認程序即可。

二、啓動Android預覽

選擇安卓和默認的Ripple模擬器來預覽程序。同時點開VS輸出面板，查看輸出內容。

第一次F5啓動程序的話，由於缺少部分組件和插件等，VS會自動聯網使用node下載，所以點開輸出面板查看輸出信息，如果提示正在應用第三方包，請稍等，或者信息輸出卡在某一個點，那麼就是在下載對應的內容，此時VS無法停止編譯，也無法編譯成功，須等部分包下載完成後才能編譯成功，該過程視網絡環境影響，需耐心等待（一般情況在5-10分鐘即可完成，其它情況在1小時以上也有，甚至幾小時也有，具體視網絡情況而定了，開VPN貌似有一定的幫助，但是幫助不是很大）。建議F5啓動後如果編譯不通過，那麼就把VS開着，讓它下載直到編譯成功，看到結果爲止。如果長時間沒有反應，建議結束VS進程，重啓項目，重新F5編譯。反覆幾次就行了。

首次啓動項目和編譯成apk都會有這樣問題，包下載完成後，以後再啓動預覽項目和編譯生成apk都會在一瞬間完成，就無須等待了。

1.Ripple-Android模擬器預覽結果如下：

Ripple模擬器是一個網頁版模擬器，開發建議使用，快速預覽界面，功能和兼容性，建議使用模擬器或者真機調試。

2.Android模擬器預覽：

首先啓動：AVD Manager.exe

安卓SDK的模擬器管理工具。一般在：C:\Program Files (x86)\Android\android-sdk\AVD Manager.exe

創建一個模擬器，分辨率適中即可：

確定後，啓動模擬器。由於模擬器啓動速度，運行效率都比較差，建議開啓Intel硬件加速功能，提升模擬器運行效率。

開啓硬件加速方式：

打開SDK Manager.exe 和AVD Manager.exe在同一目錄下：

勾選後下載下來。

示例機器目錄在：

C:\Program Files (x86)\Android\android-sdk\extras\intel\Hardware_Accelerated_Execution_Manager

安裝完成即可實現模擬器硬件加速效果。如果安裝過程中失敗，那麼重啓電腦進入BIOS設置界面，將Intel硬件加速功能設爲Enable，保存後重新進入系統安裝。即可安裝成功，硬件加速可以帶來性能的大幅度提升，效果不錯，模擬器主要針對不同機型用作適應性測試，正常開發直接使用Ripple或真機爲好。

模擬器效果如下：

3.Android真機預覽

連接手機到PC上，安裝手機對應的驅動程序。開啓手機USB調試模式。確認手機和PC已經正確連接後：

將項目啓動改爲【設備】,F5啓動即可：

手機畫面如下：

三、IOS預覽

1.IOS-Ripple預覽：

將設備改爲IOS，模擬器選擇Ripple F5啓動預覽後如下：

預覽效果和安卓無差別。

2.IOS模擬器預覽

首先確定Mac電腦已經啓動，remotebuild服務已經運行（配置方式見前文）。

確定無誤，F5啓動模擬器運行

運行結果如下：

remotebuild服務輸出信息：

Xcode模擬器顯示輸出：

由於IOS手機暫時沒有越獄，開發者賬戶已經停用了，暫時沒有真機測試的結果，理論上模擬器成功了，真機上跑問題不是很大。

四、打包APK文件

VS2015中很多人對於打包APK可能不會操作，其實很簡單：

右擊項目【在文件資源管理中打開文件夾】打開項目文件夾，找到build.bat文件。路徑如下：

項目路徑\platforms\android\cordova\build.bat

執行build.bat，執行成功後會在對應目錄中生成build文件夾。路徑如下：

項目路徑\platforms\android\build

APK路徑爲：

項目路徑\platforms\android\build\outputs\apk

此APK文件可以直接安裝使用了。

五、創建Ionic項目

目前主流的開發框架就是Cordova+Ionic+Angular。所以使用Ionic框架也是必不可少的。在VS上創建Ionic項目很簡單。

打開VS聯機模板，索搜並下載並安裝Ionic的VS模板

打開【新建項目】對話框，創建一個Ionic項目：

以創建一個側邊欄的Ionic項目爲例，創建完成，項目結構如下：

F5運行預覽結果如下：

結束語：至此基本的Hello Word程序開發就結束了，VS開發整體來說效果很好，很多地方很人性化，除了加載包有點慢的讓我抓狂以外，其它都很好。

-------------------------------------------------------系列三---------------------------------------------------

一、基礎設置

1.修改App名稱和程序起始頁

打開config.xml配置文件顯示如下，在【通用】選項卡中，將顯示名稱和起始頁，修改爲自己想要的名稱即可。

如需直接在xml文件中修改：右擊config.xml，使用【查看代碼】進行修改即可。

 

2.插件安裝

一般在項目開發中，免不了使用第三方的插件，在VS中安裝Cordova插件也是比較簡單的。

可視化打開config.xml文件。切換到【插件】選項卡：

核心插件：是包中內置的一些插件。

自定義：可以安裝第三方插件。

已安裝：當前項目已安裝的插件。

在自定義標籤中，有兩種安裝方式，一種是本地，一種是git安裝：

git安裝，只需粘貼git地址，點擊箭頭，解析成功後右側顯示插件信息，點擊安裝即可。

 

本地安裝，只需要選擇到本地插件所在的文件夾即可，文件目錄中需要包含plugin.xml文件。

例如，插件位於如下目錄中：

在VS中只需選擇對應文件夾即可：

一些常用插件列表和說明：

插件官網：

http://cordova.apache.org/plugins/

掃碼：

https://github.com/wildabeast/BarcodeScanner.git

應用程序角標：

https://github.com/katzer/cordova-plugin-badge.git

郵件系統：

https://github.com/katzer/cordova-plugin-email-composer.git

對話框：

https://github.com/apache/cordova-plugin-dialogs.git

內置瀏覽器：

https://github.com/apache/cordova-plugin-inappbrowser.git

推送服務（需註冊）：

https://github.com/jpush/jpush-phonegap-plugin.git

 

JPush插件在安裝時需要填寫AppKey，安裝顯示界面如下，先填寫申請到的Key再點添加就行了。

二、中文亂碼

如果遇到中文亂碼問題，記住一條就行了，統一所有編碼。

index.html顯示中文亂碼，首先保證<meta>設置爲utf-8，設置如下：

<meta charset="utf-8">

其次保證文件格式爲utf-8編碼，這樣就能解決所有中文亂碼問題了。

VS2015創建的js文件和Html文件默認爲GB2312，而Cordova和Ionic默認使用的utf-8.所以會顯示爲中文亂碼。一般在視圖模板和js文件中使用中文都會出現亂碼問題。最簡單的解決方案就是，打開html/js文件，點擊【文件】-【高級保存選項】，選擇UTF-8格式保存就行了。

結束語：今天時間有限，暫時寫到這裏，由於Cordova+Ionic開發涉及到很多的知識點，本文原本打算僅僅是介紹VS2015開發Cordova程序的一些注意事項和技巧。

-------------------------------------------------------系列四---------------------------------------------------

一、佈局

Ionic模板提供了一個側邊欄菜單示例項目和標籤選項卡示例項目。本案例將兩個佈局進行結合，簡單介紹下Ionic的佈局。Ionic採用自定義標籤和標準Html標籤相結合。相對於全部使用div方式來說，自定義標籤的可讀性更強。Ionic的界面呈現既可以使用靜態頁面方式呈現，也可以使用Angular提供的路由機制和控制器來控制控制頁面的呈現及數據綁定。

使用VS創建一個空白的Ionic項目。項目中包含一個index.html頁面和app.js的腳本。依照慣例修改項目的基本屬性後，打開index.html頁面和app.js腳本。

<body ng-app="starter">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-content>
        </ion-content>
    </ion-pane>
</body>

在body標籤上有一個自定義的屬性ng-app，該屬性是Angular用於標識應用程序模塊的，一般爲程序啓動模塊。<ion-pane>標籤內容爲ionic標籤，關於Ionic標籤請查閱相關文檔，這裏不再贅述。

angular.module('starter', ['ionic'])
.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();
        }
    });
})

angular.module('starter',[])用於定義應用程序的啓動模塊，同時加載ionic模塊。以上代碼是連綴寫法，正常寫法如下：

angular.module().run().config();

或者：

var app = angular.module();
app.run();
app.config();

這樣寫，基本閱讀起來就沒有問題了。

run()方法用於啓動運行程序。後續會加入config()等相關方法。

二、路由和控制器

在www目錄下創建一個templates文件夾並添加一個home.html空白頁面。同時在js文件夾中創建一個controllers.js文件。

修改index.html內容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/platformOverrides.js"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <!--添加controllers引用-->
    <script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
    <!--添加導航視圖標籤-->
    <ion-nav-view></ion-nav-view>
</body>
</html>

將原來body內容添加到home.html中，並添加一個視圖標籤：

<ion-view view-title="Home">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">標題</h1>
        </ion-header-bar>
        <ion-content>
        </ion-content>
    </ion-pane>
</ion-view>

打開app.js,在run()方法後連綴config()方法，配置內容如下：

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app', {
        url: '/app',
        templateUrl: 'templates/home.html'
    });

    $urlRouterProvider.otherwise('/app');
});

這裏使用$stateProvider.state()方法聲明一個狀態（路由）。$urlRouterProvider.otherwise('/app')設置默認路由。上述代碼功能是在程序啓動時，請求/app的路由，該路由導向home.html視圖模板，並將該視圖內容渲染到<ion-nav-view>導航視圖標籤上。

控制器的作用就是在視圖渲染前將數據送到視圖處理。而數據內容我們可以使用網絡請求從服務器上獲取，也可以使用本地數據等。

例如上述案例需要在視圖渲染之前，動態顯示標題，在控制器中處理如下：

打開controllers.js文件，添加如下代碼：

angular.module('starter.controllers', [])
.controller('HomeCtrl', function ($scope) {
    $scope.msg = 'Hello';
});

同時修改app.js文件相關配置，完整app.js爲內容如下：

angular.module('starter', ['ionic', "starter.controllers"]) //添加控制器模塊
.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) {
    $stateProvider.state('app', {
        url: '/app',
        templateUrl: 'templates/home.html',
        controller: 'HomeCtrl' //增加控制器處理
    });

    $urlRouterProvider.otherwise('/app');
});

在home.html中就可以使用表達式進行數據綁定了。

<ion-view view-title="Home">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <!--這裏修改爲數據綁定，動態上下文中獲取-->
            <h1 class="title">{{msg}}</h1>
        </ion-header-bar>
        <ion-content>
        </ion-content>
    </ion-pane>
</ion-view>

angular的綁定表達式使用{{}}這種方式。

結束語：以上就是一個最簡單的請求-路由-控制的案例。對於數據的操作一般是放在服務端處理的，手機程序使用$http對象從服務器上獲取數據即可。本地數據存儲，最簡單的方式就是使用json存儲。下篇給一個側邊欄菜單和標籤選項卡的案例，作爲日後開發的一個基礎骨架。

-------------------------------------------------------系列五---------------------------------------------------

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

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.最終預覽效果如下

左邊側滑菜單打開後，怎麼在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');

結束語：以上是一個簡單的整合案例，實現了側滑菜單和導航。詳細的代碼請下載源碼附件。

源碼