Navigation Ionic

ion-nav-view

Lorsque les utilisateurs naviguent dans votre application, Ionic est capable de détecter l'historique de navigation. En détectant l'historique de navigation, les vues peuvent être correctement transitionnées lors d'un balayage vers la gauche ou la droite.

En utilisant le module AngularUI Router, les interfaces de l'application peuvent être divisées en différents $states (états). Au cœur d'Angular se trouve le service de routage, où les URL peuvent être utilisées pour contrôler les vues.

AngularUI Router offre une gestion d'état plus puissante, ce qui signifie que les états peuvent être nommés, imbriqués et les vues combinées, permettant de rendre plus d'un modèle sur la même page.

De plus, chaque état n'a pas besoin d'être lié à une URL, et les données peuvent être transmises à chaque état de manière plus flexible.

Dans l'exemple suivant, nous allons créer une application contenant des vues de navigation avec différents états.

Dans notre balisage, nous sélectionnons ionNavView comme directive de niveau supérieur. Pour afficher une barre d'en-tête, nous utilisons la directive ionNavBar, qui est mise à jour via la navigation.

Ensuite, nous devons définir la valeur d'état que notre application va afficher.

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

Lorsque l'application s'ouvre, $stateProvider interrogera l'URL pour voir si elle correspond à l'état index, puis chargera index.html dans `<ion-nav-view>`.

Le chargement des pages est configuré via des URL. Dans Angular, l'une des façons les plus simples de créer un modèle est de le placer directement dans un fichier de modèle HTML et de l'inclure avec `<script type="text/ng-template">`.

C'est donc aussi une façon d'inclure Home.html dans notre application :

<script id="home" type="text/ng-template">
  <!--  ion-view 标题将显示在 navbar 中 -->
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="../index.html">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

Essayez-le »

C'est une bonne approche car le template sera chargé rapidement et mis en cache, il n'est donc pas nécessaire de le charger à nouveau via le réseau.

Cache

Habituellement, les vues sont mises en cache pour améliorer les performances. Lorsque vous quittez une vue, ses éléments sont conservés dans le DOM, et son scope est retiré de $watch.

Lorsque nous naviguons vers une vue qui a déjà été mise en cache, la vue est activée, son scope est reconnecté, et ses éléments sont conservés dans le DOM. Cela permet également de préserver la position de défilement précédente de la vue.

La mise en cache peut également être activée et désactivée de plusieurs façons. Par défaut, Ionic est limité à 10 pages mises en cache, et ce n'est pas la seule chose qui peut être personnalisée ; les applications peuvent définir explicitement si une vue doit être mise en cache.

Notez que, comme nous mettons en cache ces vues, nous ne détruisons pas les scopes. Au lieu de cela, son scope est également retiré de $watch.

Comme les scopes de ces vues ne sont pas détruits et reconstruits, les contrôleurs ne sont pas rechargés. Si une application/un contrôleur a besoin de savoir quand on entre ou sort d'une vue, les événements de vue émis depuis le scope ionView, tels que $ionicView.enter, peuvent être utiles.

Désactiver la mise en cache globalement

$ionicConfigProvider peut être utilisé pour définir le nombre maximal de vues mises en cache autorisées, et en le définissant sur 0, toute la mise en cache peut être désactivée.

$ionicConfigProvider.views.maxCache(0);

Désactiver la mise en cache dans le fournisseur d'état

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

Désactiver la mise en cache via des attributs

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI Router

Veuillez consulterla documentation d'AngularUI Routerpour en savoir plus.

API

Attributes	Type	Détails
name (Facultatif)	`string`	Un nom de la vue. Ce nom doit être unique parmi les autres vues dans le même état. Vous pouvez avoir des vues portant le même nom dans différents états. Pour plus de détails, consultez la documentationui-view d'ui-router。

ion-view

Appartient à ionNavView. Un conteneur de contenu pour afficher des vues ou des informations de barre de navigation.

Voici un exemple de page chargée avec une barre de navigation intitulée "Ma page".

<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
  <ion-view title="我的页面">
    <ion-content>
      你好!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

Attributes	Type	Détails
title (Facultatif)	`string`	Affiché sur le parent`ionNavBar`titre.
hide-back-button (Facultatif)	`boolean`	Par défaut, si sur le parent`ionNavBar`masquer le bouton Retour.
hide-nav-bar (Facultatif)	`boolean`	Par défaut, s'il faut masquer le parent`ionNavBar`。

ion-nav-bar

Crée une barre d'outils supérieure qui se met à jour lorsque l'état de l'application change.

Utilisation

<body ng-app="starter">
  <!-- 当我们浏览时，导航栏会随之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->
  <ion-nav-view></ion-nav-view>
</body>

API

Attributes Type Détails

Attributes	Type	Détails
delegate-handle (Facultatif)	`string`	Cet identifiant est utilisé pour`$ionicNavBarDelegate`identifier cette barre de navigation.
align-title (Facultatif)	`string`	La position d'alignement du titre de la barre de navigation. Options : 'left', 'right', 'center'. Par défaut : 'center'.

delegate-handle

(Facultatif)

string

Cet identifiant est utilisé pour$ionicNavBarDelegateidentifier cette barre de navigation.

align-title

(Facultatif)

string

La position d'alignement du titre de la barre de navigation. Options : 'left', 'right', 'center'. Par défaut : 'center'.

ion-nav-buttons

Appartient à ionNavView

Utilisez ionNavButtons pour définir des boutons sur ionNavBar dans une ionView.

Tous les boutons que vous définissez seront placés aux positions correspondantes dans la barre de navigation et seront détruits lorsque l'utilisateur quitte la vue parente.

Utilisation

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        我是一个在导航栏左侧的按钮！
      </button>
    </ion-nav-buttons>
    <ion-content>
      这里是一些内容！
    </ion-content>
  </ion-view>
</ion-nav-view>

API

Attributes	Type	Détails
side	`string`	Sur le parent`ionNavBar`la position où les boutons sont placés. Options : 'left' ou 'right'.

ion-nav-back-button

Crée un bouton dans une ionNavBar.

Le bouton de retour s'affichera lorsque l'utilisateur peut revenir en arrière dans la navigation actuelle.

Utilisation

Comportement par défaut du bouton :

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

Action de clic personnalisée, utilisant $ionicNavBarDelegate :

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-clear"
    ng-click="canGoBack && goBack()">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

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

Utilisez également $ionicNavBarDelegate pour afficher le titre précédent sur le bouton de retour.

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-icon">
    <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
  </ion-nav-back-button>
</ion-nav-bar>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.getPreviousTitle = function() {
    return $ionicNavBarDelegate.getPreviousTitle();
  };
}

nav-clear

nav-clear est une directive d'attribut utilisée lors du clic sur des éléments dans une vue, tels qu'un `<a href>` ou un `<button ui-sref>`.

Lorsqu'il est cliqué, nav-clear fera en sorte que l'élément donné désactive la prochaine transition de vue. Cette directive est utile, par exemple, pour les liens à l'intérieur d'un menu latéral.

Utilisation

Ci-dessous se trouve un lien à l'intérieur d'un menu latéral auquel la directive nav-clear a été ajoutée. Cliquer sur ce lien désactivera toutes les animations entre les vues.

<a nav-clear menu-close href="../index.html" class="item">首页</a>

ion-nav-title

ion-nav-title sert à définir le titre dans le template ion-view.

Utilisation

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-title>
      <img src="logo.svg.html">
    </ion-nav-title>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

nav-transition

Définit le type de transition utilisé, qui peut être : ios, android et none.

Utilisation

<a nav-transition="none" href="../index.html">Home</a>

nav

Définit la direction de l'animation de transition dans la vue de navigation, qui peut être forward, back, enter, exit, swap.

Utilisation

<a nav-direction="forward" href="../index.html">Home</a>

$ionicNavBarDelegate

Délégué pour contrôler la directive ion-nav-bar.

Utilisation

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

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

Méthodes

align([direction])

Revenir en arrière dans l'historique de navigation.

Parameters	Type	Détails
event (Facultatif)	`DOMEvent`	Objet d'événement (par exemple, depuis un clic)

align([direction])

Aligne le titre avec les boutons selon la direction spécifiée.

Parameters	Type	Détails
direction (Facultatif)	`string`	La direction d'alignement du texte du titre. Options : 'left', 'right', 'center'. Par défaut : 'center'.

Valeur de retour :Booléen, si le bouton de retour est affiché.

showBar(show)

Définit ou récupère si la ion-nav-bar est affichée.

Parameters	Type	Détails
show	`boolean`	Indique si la barre de navigation est affichée.

Valeur de retour :Booléen, indique si la barre de navigation est affichée.

showBackButton([show])

Définir ou obtenir si ion-nav-back-button est affiché.

Parameters	Type	Détails
show (Facultatif)	`boolean`	Indique s'il faut afficher le bouton de retour

title(title)

Définit le titre pour ion-nav-bar.

Parameters	Type	Détails
title	`string`	Le nouveau titre à afficher.

$ionicHistory

$ionicHistory est utilisé pour suivre l'historique de navigation de l'utilisateur dans l'application.

Méthodes

viewHistory()

Utilisé pour consulter les enregistrements d'historique.

currentView()

La vue actuelle de l'application.

currentHistoryId()

L'ID de la pile d'historique, qui est le conteneur parent de la vue actuelle.

currentTitle([val])

Obtenir ou définir le titre de la vue actuelle.

backView()

Renvoie la dernière vue consultée.

backTitle()

Obtenir le titre de la dernière vue consultée.

forwardView()

Retourner à la vue précédente de la vue actuelle dans la pile d'historique.

currentStateName()

Renvoie le nom de l'état actuel.

goBack([backCount])

L'application se rabat sur la vue, si la vue de secours existe.

Autres extensions

ionic CSS

ionic JavaScript

Navigation Ionic

ion-nav-view

Cache

Désactiver la mise en cache globalement

Désactiver la mise en cache dans le fournisseur d'état

Désactiver la mise en cache via des attributs

AngularUI Router

API

ion-view

API

ion-nav-bar

Utilisation

API

ion-nav-buttons

Utilisation

API

ion-nav-back-button

Utilisation

nav-clear

Utilisation

ion-nav-title

Utilisation

nav-transition

Utilisation

nav

Utilisation

$ionicNavBarDelegate

Utilisation

Méthodes

$ionicHistory

Méthodes