Ionic - JavaScript 導航

---

---

導航是每個應用程式的核心元件之一。Ionic 使用AngularJS UI Router處理導航。

使用導航

導航可以在app.js檔案中配置。如果您使用的是 Ionic 模板之一，您會注意到$stateProvider服務被注入到應用程式config中。建立應用程式狀態的最簡單方法如下例所示。

$stateProvider服務將掃描 URL，找到對應的狀態並載入我們在app.config中定義的檔案。

app.js 程式碼

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

狀態將載入到ion-nav-view元素中，該元素可以放置在index.html的 body 中。

index.html 程式碼

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

當我們在上面提到的示例中建立狀態時，我們使用了templateUrl，因此當狀態載入時，它將搜尋匹配的模板檔案。現在，我們將開啟templates資料夾並建立一個新檔案state1.html，當應用程式 URL 更改為/state1時，將載入該檔案。

state1.html 程式碼

<ion-view>
   <ion-content>
      This is State 1 !!!
   </ion-content>
</ion-view>

建立導航選單

您可以透過在index.html的 body 中新增“ion-nav-bar”元素，在您的應用程式中新增導航欄。在導航欄內，我們將新增帶有圖示的ion-nav-back-button。這將用於返回到上一個狀態。當狀態更改時，按鈕將自動出現。我們將分配goBack()函式，該函式將使用$ionicHistory服務來處理此功能。因此，當用戶離開首頁狀態並轉到state1時，將出現後退按鈕，如果使用者想要返回首頁狀態，可以點選該按鈕。

index.html 程式碼

<ion-nav-bar class = "bar-positive">
   <ion-nav-back-button class = "button-clear" ng-click = "goBack()">
      <i class = "icon ion-arrow-left-c"></i> Back
   </ion-nav-back-button>
</ion-nav-bar>

控制器程式碼

.MyCtrl($scope, $ionicHistory) {
   $scope.goBack = function() {
      $ionicHistory.goBack();
   };
}  

新增導航元素

可以使用ion-nav-buttons將按鈕新增到導航欄。此元素應放置在ion-nav-bar或ion-view內。我們可以使用四個選項值分配side屬性。primary和secondary值將根據使用的平臺放置按鈕。有時您希望按鈕位於一側，無論它是 iOS 還是 Android。如果是這種情況，您可以使用left或right屬性代替。

我們還可以將ion-nav-title新增到導航欄。所有程式碼都將放置在index.html的 body 中，因此可以在任何地方使用。

<ion-nav-bar class = "bar-positive">
   <ion-nav-title>
      Title
   </ion-nav-title>
	
   <ion-nav-buttons side = "primary">
      <button class = "button">
         Button 1
      </button>
   </ion-nav-buttons>
</ion-nav-bar>

它將生成以下螢幕：

其他導航屬性

下表顯示了一些其他功能，這些功能可以與 Ionic 導航一起使用。

導航屬性

快取

Ionic 能夠快取多達十個檢視以提高效能。它還提供了一種手動處理快取的方法。由於僅快取後退檢視，而前進檢視每次使用者訪問時都會載入，因此我們可以透過使用以下程式碼輕鬆設定快取前進檢視。

$ionicCinfigProvider.views.forwardCache(true);

我們還可以設定應快取多少個狀態。如果我們希望快取三個檢視，我們可以使用以下程式碼。

$ionicConfigProvider.views.maxCache(3);

可以在$stateProvider內部或透過將屬性設定為ion-view來停用快取。這兩個示例如下所示。

$stateProvider.state('state1', {
   cache: false,
   url : '/state1',
   templateUrl: 'templates/state1.html'
})

<ion-view cache-view = "false"></ion-view>

控制導航欄

我們可以使用$ionicNavBarDelegate服務來控制導航欄的行為。此服務需要注入到我們的控制器中。

HTML 程式碼

<ion-nav-bar>
   <button ng-click = "setNavTitle('title')">
      Set title to banana!
   </button>
</ion-nav-bar>

控制器程式碼

$scope.setNavTitle = function(title) {
   $ionicNavBarDelegate.title(title);
}

$ionicNavBarDelegate服務還有其他有用的方法。下表列出了一些這些方法。

用於 $ionicNavBarDelegate 的方法

跟蹤歷史記錄

您可以使用$ionicHistory服務跟蹤上一個、當前和下一個檢視的歷史記錄。下表顯示了此服務的所有方法。

用於 $ionicHistory 的方法

nextViewOptions()方法有以下三個選項可用。

• disableAnimate用於停用下一個檢視更改的動畫。

• disableBack將後退檢視設定為 null。

• historyRoot將下一個檢視設定為根檢視。

$ionicHistory.nextViewOptions({
   disableAnimate: true,
   disableBack: true
});