Ionic-js-navigation

イオン-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/homel'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1l'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2l',});
});

状態は ion-nav-view 要素に読み込まれ、 indexl 本体に配置できます。

indexlコード

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

上記の例で状態を作成したときは、 templateUrl を使用していたため、状態が読み込まれると、テンプレートファイルに一致するものが検索されます。 次に、 templates フォルダーを開き、アプリのURLが /state1 に変更されたときに読み込まれる state1l という新しいファイルを作成します。

• state1lコード*

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

イオンナビゲーション状態

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

「ion-nav-bar」*要素を追加することで、 *indexl 本体のアプリにナビゲーションバーを追加できます。 ナビゲーションバー内に、アイコン付きの ion-nav-back-button を追加します。 これは、前の状態に戻るために使用されます。 状態が変更されると、ボタンが自動的に表示されます。 この機能を処理するために $ ionicHistory サービスを使用する* goBack（）関数を割り当てます。 したがって、ユーザーがホーム状態を離れて *state1 に移動すると、ユーザーがホーム状態に戻りたい場合、テープで貼り付けることができる戻るボタンが表示されます。

indexlコード

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

Ionic Navigation Back Button

ナビゲーション要素の追加

ボタンは、 ion-nav-buttons を使用してナビゲーションバーに追加できます。 この要素は、 ion-nav-bar または ion-view 内に配置する必要があります。 4つのオプション値を持つ side 属性を割り当てることができます。 primary および secondary の値は、使用されているプラ​​ットフォームに応じてボタンを配置します。 IOSでもAndroidでも、ボタンを片側に配置したい場合があります。 その場合は、代わりに left または right 属性を使用できます。

ナビゲーションバーに ion-nav-title を追加することもできます。 すべてのコードは indexl 本文に配置されるため、どこでも使用できます。

<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>

それは次の画面を生成します-

イオンナビゲーション要素

その他のナビゲーション属性

次の表は、イオンナビゲーションで使用できる他のいくつかの機能を示しています。

ナビゲーション属性

Attribute	Options	Detail
nav-transition	none, iOS, Android	Used to set animation that should be applied when transition occurs.
nav-direction	forward, back, enter, exit, swap	Used to set the direction of the animation when transition occurs.
hardwareBackButtonClose	Boolean	It will enable closing the modal when hardware back button is clicked. Default value is true.

キャッシング

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

$ionicCinfigProvider.views.forwardCache(true);

キャッシュするステートの数も設定できます。 3つのビューをキャッシュする場合、次のコードを使用できます。

$ionicConfigProvider.views.maxCache(3);

キャッシュは、 $ stateProvider 内で、または属性を ion-view に設定することで無効にできます。 両方の例を以下に示します。

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

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

Method	Parameter	Type	Detail
align(parameter)	center, left, right	string	Used to align the title.
showBackButton(parameter)	show	Boolean	Used to show or hide the back button.
title(parameter)	title	string	Used to show the new title.

追跡履歴

*$ ionicHistory* サービスを使用して、以前のビュー、現在のビュー、およびフォワードビューの履歴を追跡できます。 次の表に、このサービスのすべてのメソッドを示します。

$ ionicHistoryのメソッド

Method	Parameter	Type	Detail
viewHistory	/	object	Returns the app view history data.
currentView()	/	object	Returns the current view.
title(parameter)	title	string	Returns the ID of the view which is parent of the current view.
currentTitle(parameter)	val	string	Returns the title of the current view. It can be updated by setting new val value.
backView()	/	string	Returns the last back view.
backTitle()	/	string	Returns the title of last back view.
forwardView()	/	object	Returns the last forward view.
currentStateName()	/	string	Returns the current state name.
goBack()	backCount	number	Used to set how many views to go back. Number should be negative. If it is positive or zero it will have no effect.
clearHistory()	/	/	Used to clear entire view history.
clearCache()	/	promise	Used to clear all cached views.
nextViewOptions()	/	object	Sets the options of the next view. You can look the following example for more info.

• nextViewOptions（）*メソッドには、次の3つのオプションがあります。
• disableAnimate は、次のビュー変更のアニメーションを無効にするために使用されます。
• disableBack は、背面ビューをヌルに設定します。
• historyRoot は、次のビューをルートビューとして設定します。

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