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
});