Hybrid Apps開發系列之7.2：SideMenu側欄選單(Spotify歌曲試聽範例)

隨著Apps功能越來越豐富，為讓使用者能有較佳的介面操作體驗，通常會以「側欄選單」(sidemenu, 如圖) 的方式解決。

圖1. 側欄選單

「側欄選單」和「頁籤」(參考Hybrid Apps開發系列之4.4：多頁面App程式 (天氣app-非線上版))一樣都是屬於主頁面類型，實作時會將「側欄選單」所在頁面設定為parent state，其他頁面則共用「側欄選單」所在的parent state。

建立「側欄選單」

假設要在home.html建立「側欄選單」的主要頁面則必須完成下列基本內容：

<ion-side-menus>
    <!-- 主要內容 -->
    <ion-side-menu-content>
        <!-- 主要內容頁面區塊 -->
        <ion-nav-view animation="slide-left-right" name="menuContent">

        </ion-nav-view>
    </ion-side-menu-content>
    <!-- 左側選單 -->
    <ion-side-menu side="left">

    </ion-side-menu>
    <!-- 右側選單 -->
    <ion-side-menu side="right">

    </ion-side-menu>
</ion-side-menus> 

其中包括：

1. 使用<ion-side-menus>主要指令，包含所有側欄選單的內容，包括：主要內容區、左側選單區、與右側選單區。左右側選單如無定義內容，則不會顯示。
2. 使用<ion-side-menu-content>定義主要內容區：裡面除了使用<ion-nav-view>建立主要區塊，同時設定name屬性（如第5行menuContent即為view的名稱）外，也可加入<ion-nav-bar>等其他用來建立多頁面apps的指令。
3. 使用<ion-side-menu>建立左右側選單。至於選單出現在哪一側，則由side屬性決定之（如第10行與第14行）。

除此之外還必須在.config()裡以"abstract:true"的方式，將home.html設定為parent state。而其他需要共用home.html也必須在.config()定義"views"屬性，決定"menuContent"的組態設定（templaeUrl, Controller等等），例如：

.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/app/members");
    $stateProvider
        .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: 'templates/home.html'
        })
        .state('app.members', {
            url: '/members',
            views: {
                'menuContent': {
                    templateUrl: 'templates/members.html',
                    controller: 'memberCtrl'
                }
            }
        })
    ...[略]... 

完成這兩部分之後，便可透過左右滑動手勢，帶出或隱藏兩側選單。

範例：Spotify歌曲試聽

此範例使用Spotify Web API取得歌手資料，如專輯、熱門歌曲等，並提供30秒的歌曲試聽。其中使用了三個API－搜尋、取得專輯列表、取得熱門歌曲，後兩者都必須先有歌手id才能進行查詢：

https://api.spotify.com/v1/search
https://api.spotify.com/v1/artists/{id}/albums
https://api.spotify.com/v1/artists/{id}/top-tracks

其他API說明，可參考Spotify API Console。

範例程式由圖2畫面為程式進入點，該畫面由sidemenu.html為parent state，並帶入artists.html，顯示歌手基本資料。

圖2. Spotify歌曲試聽App

Parent state檔: templates/sidemenu.html如下：

• 第16行：定義主要內容頁面區塊的name屬性值為menuContent。
• 第21-35行：定義左側選單共兩個項目。

js/app.js設定config()如下：

• 第17-21行：定義parent state，頁面檔案即為上述 templates/sidemenu.html。

其餘頁面以artists.html為例說明。artists.html顯示圖2內容，需要歌手的基本資料、專輯、以及熱門歌曲連結，檔案內容為：

搭配的js/controllers.js如下：

• 第38-89行：為artists.html的controller: artistsCtrl。主要透過自訂service：MusicPlayer以Spotify API取得基本資料等內容。第38行singers為自訂常數 (定義於js/services.js)，內為要搜尋的歌手姓名。
• 第44-80行：以Spotify API擷取資料的主要流程，分為第44行的搜尋歌手基本資料(自訂服務basicData())，並利用第45行取得的歌手id，在第50行(自訂服務getAlbums())進一步查詢專輯、以及第63行(自訂服務getTracks())查詢熱門歌曲。

提供Spotify Web API服務js/services.js如下：

• 第2-19行：以$http.get(api)使用Spotify Web API取得資料
• 第20-33行：自訂三個服務－basicData(singer)透過搜尋歌手姓名取得基本資料(需注意搜尋結果有時不止一筆)、getAlbums(id)取得指定id的專輯列表、getTracks(id)取得指定id的歌手熱門歌曲列表及對應的試聽網址。
• 第35行：定義4位歌手姓名的常數陣列。

其餘程式碼，包括templates/artist-details.html(歌手基本資料細節)、templates/artist-tracks.html(熱門歌曲列表)、templates/tracks.html(所有歌手的熱門歌曲列表)、templates/track-details.html (試聽歌曲播放介面)以及index.html等，請參考 Gist。