Ionic-js-navigation

提供：Dev Guides
移動先:案内、検索

イオン-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
});
「https://www.finddevguides.com/index.php?title=Ionic-js-navigation&oldid=4291」から取得
Powered by MediaWiki