1. 程式人生 > >ionic之ui-view巢狀檢視配置路由

ionic之ui-view巢狀檢視配置路由

實現的效果是點選左側導航,切換右側檢視內容。

首先建立一個固定檢視的程式碼片段檔案,這個這個程式碼片段分為兩塊區域,一塊為左側導航固定內容,一塊為右側更換內容的ui-view檢視

<body>

<h1>歡迎來到郵箱</h1>

<div class="row">

    <div class="col col-33">

        <ion-list>

            <ion-item ui-sref="sider.home">收件箱</ion-item>

            <ion-item ui-sref="sider.detail">發件箱</ion-item>

        </ion-list>

    </div>

    <div class="col">

        <div ui-view></div>

    </div>

</div>

</body>

在完整的HTML檢視承載檔案中建立一個主ui-view檢視

<body>

      <ion-header-bar class="bar-balanced" align-title="center">

             <h1 class="title">專案首頁頭</h1>

      </ion-header-bar>

     <ion-content>

           <div ui-view> </div>

    </ion-content>


    <ion-footer-bar class="bar-balanced">

            <h1 class="title">專案首頁尾</h1>

    </ion-footer-bar>

</body>

配置路由,相對於普通路由配置而言,就是在配置每個要載入到右側區域的內容程式碼片段檔案時,路由名稱前加上固定頁面的路由配置名稱

<script>

    var app = angular.module('myApp', ['ionic']);

    app.config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider .state("sider", {                                                  //配置固定導航程式碼片段路由

                url: '/mySider',

                templateUrl: 'template/sider.html',

            })

            .state("sider.home", {                                                             //配置右側更換內容的路由,注意在路由名稱前加上固定導航程式碼片段路由的名稱 

                url: '/myHome',

                templateUrl: 'template/main.html',

            })
            .state("sider.detail", {                                                              //配置右側更換內容的路由,注意在路由名稱前加上固定導航程式碼片段路由的名稱

                url: '/myDetail/:id',

                templateUrl: 'template/detail.html',

            });

        $urlRouterProvider.otherwise('mySider')                              //配置異常處理,當url錯誤時自動跳轉到指定的頁面

    })

</script>