Cordova+angularjs+ionic+vs2015開發（五）

時間 2019-11-30

標籤 cordova+angularjs+ionic+vs2015 cordova angularjs ionic 開發欄目 Cordova 简体版

原文原文鏈接

歡迎加羣學習：457351423 這裏有4000多部學習視頻，涵蓋各類技術，有須要的歡迎進羣學習！html

1、建立側邊菜單和導航項目android

1.使用VS建立一個Ionic空項目，同時建立一個Ionic SideMenu和Ionic Tabs項目。將SideMenu和Tabs項目裏的templates和js文件合併到空項目裏，修改js對應的代碼便可。完整項目工程以下：ios

2.App.js代碼修改以下：app

/*
 * 加載所須要的各個模塊
 * 上篇教程中加載了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文件這裏就不貼代碼了，由於不涉及到關鍵代碼的講解。ionic

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

<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便可模擬點擊返回鍵。url

2、路由和視圖詳解spa

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開發的基礎。

3、導航條設置

因爲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');

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

示例代碼

歡迎加羣學習：457351423 這裏有4000多部學習視頻，涵蓋各類技術，有須要的歡迎進羣學習！