Ionic-Javascriptナビゲーション

ナビゲーションは、すべてのアプリのコアコンポーネントの1つです。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 体。

index.htmlコード

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

上記の例で状態を作成したときは、 templateUrlしたがって、状態がロードされると、一致するテンプレートファイルが検索されます。今、私たちは開きますtemplates フォルダと新しいファイルを作成します state1.html、アプリのURLがに変更されたときに読み込まれます /state1

state1.html Code

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

ナビゲーションメニューの作成

でアプリにナビゲーションバーを追加できます index.html 追加することによってボディ “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。を割り当てることができますside4つのオプション値を持つ属性。ザ・primary そして secondary値は、使用されているプラ​​ットフォームに応じてボタンを配置します。IOSでもAndroidでも、片側にボタンが必要な場合があります。その場合は、left または right 代わりに属性。

追加することもできます ion-nav-titleナビゲーションバーに。すべてのコードはに配置されますindex.html ボディなので、どこでも使えます。

<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ナビゲーションで使用できる他のいくつかの機能を示しています。

ナビゲーション属性

属性 オプション 詳細
nav-transition なし、iOS、Android 遷移が発生したときに適用する必要があるアニメーションを設定するために使用されます。
nav-方向 進む、戻る、入る、出る、交換する 遷移が発生したときのアニメーションの方向を設定するために使用されます。
hardwareBackButtonClose ブール値 ハードウェアの戻るボタンがクリックされたときにモーダルを閉じることができます。デフォルト値はtrueです。

キャッシング

Ionicには、パフォーマンスを向上させるために最大10個のビューをキャッシュする機能があります。また、キャッシュを手動で処理する方法も提供します。後方ビューのみがキャッシュされ、ユーザーがアクセスするたびに前方ビューが読み込まれるため、コードに従うことで前方ビューをキャッシュするように簡単に設定できます。

$ionicCinfigProvider.views.forwardCache(true);

キャッシュする状態の数を設定することもできます。3つのビューをキャッシュする場合は、次のコードを使用できます。

$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のメソッド

方法 パラメータ タイプ 詳細
align(パラメータ) 中央、左、右 ストリング タイトルを揃えるために使用されます。
showBackButton(パラメータ) 公演 ブール値 戻るボタンを表示または非表示にするために使用されます。
タイトル(パラメータ) 題名 ストリング 新しいタイトルを表示するために使用されます。

追跡履歴

を使用して、過去、現在、および将来のビューの履歴を追跡できます。 $ionicHistoryサービス。次の表に、このサービスのすべてのメソッドを示します。

$ ionicHistoryのメソッド

方法 パラメータ タイプ 詳細
viewHistory / オブジェクト アプリビューの履歴データを返します。
currentView() / オブジェクト 現在のビューを返します。
タイトル(パラメータ) 題名 ストリング 現在のビューの親であるビューのIDを返します。
currentTitle(パラメータ) val ストリング 現在のビューのタイトルを返します。新規設定で更新できますval 値。
backView() / ストリング 最後の背面図を返します。
backTitle() / ストリング 最後の背面図のタイトルを返します。
forwardView() / オブジェクト 最後の前方ビューを返します。
currentStateName() / ストリング 現在の状態名を返します。
戻る() backCount 戻るビューの数を設定するために使用されます。数値は負である必要があります。正またはゼロの場合、効果はありません。
履歴をクリア() / / ビュー履歴全体をクリアするために使用されます。
キャッシュの消去() / 約束する キャッシュされたすべてのビューをクリアするために使用されます。
nextViewOptions() / オブジェクト 次のビューのオプションを設定します。詳細については、次の例を参照してください。

ザ・ nextViewOptions() メソッドには、次の3つのオプションがあります。

  • disableAnimate 次のビュー変更のアニメーションを無効にするために使用されます。

  • disableBack 背面図をnullに設定します。

  • historyRoot 次のビューをルートビューとして設定します。

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