navigation ionique

ion-nav-view

Lorsque les utilisateurs naviguent à votre application lorsque, ioniques capables de détecter l'historique de navigation. En détectant l'historique de navigation, balayez vers la gauche ou la droite pour atteindre lorsqu'il est correctement converti vues.

Utilisation des interfaces de module de routeur AngularUI et d'autres applications peuvent être divisés en différents $ state (état). noyau angulaire pour les services de routage, les URL peuvent être utilisées pour contrôler la vue.

AngularUI itinéraire fournit une gestion plus puissante d'état, cet état peut être nommé, imbriquée, et la fusion de vue, pour permettre plus d'un modèle présenté sur la même page.

En outre, chaque Etat ne doit pas être lié à une URL, et les données peuvent être plus flexibles pour pousser chaque état.

L'exemple suivant, nous allons créer une application de visualisation de navigation contient différents états.

Notre sélection ionNavView tag comme la commande top. Afficher un en-tête de colonne, nous ionNavBar instructions via la mise à jour de navigation.

Ensuite, nous devons définir notre rendre valeur d'état.

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

Ensuite, ouvrez l'application, $ stateProvider requêtes URL, pour voir si l'état correspond à la valeur d'index, puis charger le index.html <ion-nav-view>.

La page se charge à travers les URL configurées. Créer un modèle de la façon la plus simple est de directement angulaire le mettre dans le fichier de modèle html et utiliser <script type = "text / ng-template"> contient.

Donc, cela est un moyen de Home.html ajouté à notre APP dans le passé:

<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="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

Essayez »

Ceci est une bonne façon, parce que le modèle sera rapidement chargé et le cache est différent de passer par la charge du réseau.

Caching

Dans des circonstances normales, les vues sont mises en cache peut améliorer les performances. Quand hors de la vue, son élément est retenu dans le Dom, et son champ d'application est également retiré de la montre de $.

Quand nous sautons a été une vue mise en cache, la vue est activée, son champ d'application est reconnecté, Dom a également sauvé son élément. Cela permet également de maintenir la position de défilement vue précédente.

Caching peut aussi être de nombreuses façons d'activer et désactiver. Ionic nombre maximum par défaut de pages cache est de 10, ce qui est pas le seul personnalisable, l'application peut définir explicitement l'état d'affichage ne doit pas être mis en cache.

Notez que, puisque nous sommes la mise en cache de ces points de vue, nous ne détruisons pas la portée. Au lieu de cela, il est également retiré de la portée de la montre $.

Parce que le prochain champ de vision n'a pas été détruit et reconstruit, le contrôleur est pas chargé à nouveau. Si l'application / contrôleur doivent savoir quand entrer ou de quitter une vue, puis voir l'événement de l'émission d'action ionView, tels que $ ionicView.enter, il peut être utile.

désactive le cache global

cache $ IonicConfigProvider peut être utilisé pour définir le nombre maximal de points de vue par la mise à 0 pour désactiver tous les caches.

$ionicConfigProvider.views.maxCache(0);

Désactiver la mise en cache ÉTAT FOURNISSEUR

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

Désactivez le cache à travers la propriété

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

AngularUI itinéraire

Visitez les docs de AngularUI routeur pour plus.

API

propriété	type	détail
nom (Facultatif)	`字符串`	Un nom de la vue. Ce nom doit être les seuls autres vues dans le même état. Vous pouvez avoir une vue du même nom dans un état différent. Pour plus d' informations, consultez le ui-routeur ui-visionner document .

ion-vue

Affiliated ionNavView. Le contenu d'un conteneur pour une vue d'affichage ou des informations de navigation.

Voici une barre de navigation avec un "Ma Page" rubrique pour charger la page d'échantillons.

<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

propriété	type	détail
titre (Facultatif)	`字符串`	Il est affiché dans le parent `ionNavBar` titre.
hide-back bouton (Facultatif)	`布尔值`	Par défaut, si le parent `ionNavBar` cacher le bouton de retour.
hide-nav-bar (Facultatif)	`布尔值`	Par défaut, si vous masquez le parent `ionNavBar` .

ion-nav-bar

Créer une barre d'outils en haut, lorsque le programme met à jour le changement de statut.

usage

<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

propriété type détail

propriété	type	détail
délégué poignée (Facultatif)	`字符串`	La poignée avec `$ionicNavBarDelegate` identifie la barre de navigation.
alignez-titre (Facultatif)	`字符串`	Barre de navigation titre Position alignée. Disponible: «gauche», «droite», «centre». Par défaut est «centre».

délégué poignée

(Facultatif)

字符串

La poignée avec $ionicNavBarDelegate identifie la barre de navigation.

alignez-titre

(Facultatif)

字符串

Barre de navigation titre Position alignée. Disponible: «gauche», «droite», «centre». Par défaut est «centre».

ion-nav-boutons

Affiliated ionNavView

Sur ionNavBar ionView à l'intérieur avec le bouton ionNavButtons Paramètres.

Tout bouton que vous définissez sera placé dans la position appropriée de la barre de navigation, lorsque l'utilisateur quitte la vue parent sera détruit.

usage

<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

propriété	type	détail
côté	`字符串`	Le parent `ionNavBar` touche de position de placement. Disponible: «gauche» ou «droite».

ion-nav-back-bouton

Créer un bouton dans un ionNavBar en.

Lorsque l'utilisateur peut naviguer dans la récession actuelle, le bouton de retour sera affiché.

usage

action du bouton par défaut:

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

Personnalisé cliquez sur l'action, avec $ 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();
  };
}

Sur le bouton Retour affiche le titre précédent, mais aussi avec $ ionicNavBarDelegate.

<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

attributs nav-clairs ont utilisé une commande lorsque vous cliquez sur le point de vue de l'élément quand une telle <a href> ou un bouton <ui-sref>.

Lorsque vous cliquez dessus, nav-clear se traduira par un élément donné est interdit sous le chiffre d'affaires de vue. Cette commande est utile, par exemple, les liens du menu latéral.

usage

Voici un menu latéral pour ajouter un lien vers nav-clear instruction. En cliquant sur le lien permet de désactiver toute animation entre les vues.

<a nav-clear menu-close href="#/home" class="item">首页</a>

ion-nav-titre

ion-nav-titre ion-view modèle est utilisé pour définir le titre.

usage

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

nav-transition

Définissez le type de transition utilisé peut être: ios, android, et aucun.

usage

<a nav-transition="none" href="#/home">Home</a>

nav-direction

Set Nav vue transition direction d'animation, soit en avant, en arrière, entrer, sortir, swap.

usage

<a nav-direction="forward" href="#/home">Home</a>

$ IonicNavBarDelegate

contrôle d'admissibilité des instructions d'ions nav-bar.

usage

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

manière

align([direction])

Retour à l'historique de navigation.

Paramètres	type	détail
événement (Facultatif)	`DOMEvent`	Les objets Event (comme à partir d'un événement de clic)

align([direction])

Titre avec des boutons alignés à la direction spécifiée.

Paramètres	type	détail
direction (Facultatif)	`字符串`	La direction d'alignement de texte du titre. Disponible: «gauche», «droite», «centre». Valeur par défaut: «centre».

Valeur de retour: bouton Boolean valeur de retour est affiché.

showBar(show)

Obtient ou définit le-nav-bar ionique est affiché.

Paramètres	type	détail
show	`布尔值`	La barre de navigation est affichée.

Valeur de retour: barre de navigation booléen est affiché.

showBackButton([show])

Obtient ou définit le-nav-back bouton d'ions est affiché.

Paramètres	type	détail
show (Facultatif)	`布尔值`	Que ce soit pour afficher le bouton de retour

title(title)

Réglez l'ion-nav-barre de légende.

Paramètres	type	détail
titre	`字符串`	Afficher le nouveau titre.

$ IonicHistory

$ IonicHistory utilisé pour suivre l'historique de navigation d'un utilisateur dans l'application.

manière

viewHistory()

Pour visualiser l'histoire.

currentView()

La vue actuelle de l'application.

currentHistoryId()

Histoire pile ID, est le conteneur parent de la vue actuelle.

currentTitle([val])

Obtient ou définit le titre de la vue actuelle.

backView()

Retour à la dernière vue affichée.

backTitle()

Obtenez titre dernière vue de la navigation.

forwardView()

Vue arrière sur une vision historique de la pile actuelle.

currentStateName()

Retourne le nom de l'état actuel.

goBack([backCount])

app vue rollback, si la restauration de vue existe.

Précédent: Fenêtre modale ionique

Suivant: Plate - forme ionique

ionic cours

ionic CSS

ionic JavaScript

navigation ionique

navigation ionique

ion-nav-view

Caching

désactive le cache global

Désactiver la mise en cache ÉTAT FOURNISSEUR

Désactivez le cache à travers la propriété

AngularUI itinéraire

API

ion-vue

API

ion-nav-bar

usage

API

ion-nav-boutons

usage

API

ion-nav-back-bouton

usage

nav-clear

usage

ion-nav-titre

usage

nav-transition

usage

nav-direction

usage

$ IonicNavBarDelegate

usage

manière

$ IonicHistory

manière