navigation ionique
ion-nav-view
Lorsque les utilisateurs naviguent dans votre application, ionic peut détecter l'historique de navigation. En détectant l'historique de navigation, vous pouvez changer correctement de vue lorsque vous faites glisser votre doigt vers la gauche ou la droite.
L'utilisation d'interfaces de programmation d'applications telles que le module de routeur AngularUI peut être divisée en différents $states. Le cœur d'Angular est le service de routage et les URL peuvent être utilisées pour contrôler les vues.
Le routage AngularUI offre une gestion des états plus puissante, c'est-à-dire que les états peuvent être nommés, imbriqués et fusionnés, permettant ainsi d'afficher plusieurs modèles 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 vers chaque état de manière plus flexible.
Dans l'exemple suivant, nous allons créer une vue de navigation qui contient différents états dans l'application.
Sélectionnez ionNavView comme directive de niveau supérieur dans notre balisage. Pour afficher une barre d'en-tête, nous utilisons la directive ionNavBar pour mettre à jour via la navigation.
Ensuite, nous devons définir nos valeurs d'état qui seront rendues.var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('music', {
url: '/music',
templateUrl: 'music.html'
});
});Ouvrez à nouveau l'application, $stateProvider interrogera l'URL pour voir si elle correspond à la valeur d'état de l'index, puis chargera index.html dans <ion-nav-view>.
C'est donc aussi une façon d'ajouter Home.html à notre APP :
<script id="home" type="text/ng-template"> <!-- The title of the ion-view will be shown on the 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>
C'est une très bonne approche, car le modèle se chargera rapidement et sera mis en cache au lieu de le charger sur le réseau.
Mise en cache
Lorsque nous passons à une vue qui a été mise en cache, la vue sera activée, son rôle sera reconnecté et ses éléments seront enregistrés dans le Dom. Cela permet également de conserver la position de défilement de la vue précédente.
Le cache peut également être activé et désactivé de plusieurs manières. Par défaut, Ionic mettra en cache un maximum de 10 pages, et ce n'est pas la seule chose qui peut être personnalisée. Les applications peuvent définir un état explicite pour définir si une vue doit être mise en cache ou non.
Notez que parce que nous mettons ces vues en cache, nous ne détruisons pas la vue. Au lieu de cela, sa vue est également supprimée de $watch.
Étant donné que la lunette de visualisation ultérieure n'est pas détruite ni reconstruite, le contrôleur n'est pas chargé à nouveau. Si l'application/le contrôleur a besoin de savoir quand entrer ou quitter une vue, il peut être utile d'émettre des événements de vue à partir de la fonction ionView, tels que $ionicView.enter.
Désactiver la mise en cache globalement
$ionicConfigProvider peut être utilisé pour définir le nombre maximum de vues autorisées à être mises en cache, en le définissant sur 0 pour désactiver toute mise en cache.
$ionicConfigProvider.views.maxCache(0);
Désactiver la mise en cache dans STATE PROVIDER
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})Désactiver la mise en cache via les propriétés
<ion-view cache-view="false" view-title="My Title!"> ... </ion-view>
Routeurs AngularUI
Veuillez consulter la documentation du routeur AngularUI pour en savoir plus.
API
| 属性 | 类型 | 详情 |
|---|---|---|
| name (可选) | 字符串 | 一个视图的名字。这个名字应该是在相同的状态下其他视图中唯一的。你可以在不同的状态中有相同名称的视图。欲了解详细信息，查看ui-router的 ui-view 文档。 |
ion-view
appartient à ionNavView. Conteneur de contenu utilisé pour afficher des informations sur la vue ou la barre de navigation.
Voici un exemple de page de chargement de barre de navigation avec le titre « 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
| Propriété | Type | Détails | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| titre (facultatif) | Chaîne |
ionNavBar parent. | ||||||||||||
| bouton masqué (facultatif) | Booléen value | Si le bouton de retour est masqué dans le | ||||||||||||
| masquer la barre de navigation (facultatif) | Booléen value | Si le |
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle (可选) | 字符串 | 该句柄用 |
| align-title (可选) | 字符串 | 导航栏标题对齐的位置。可用： 'left', 'right', 'center'。 默认为 'center'。 |
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| Attributs | Type< /th> | Détails |
|---|---|---|
| delegate-handle (facultatif) < / td> | String | Ce handle identifie cette barre de navigation avec $ionicNavBarDelegate. |
| align-title (facultatif) | Chaîne | La position où le titre de la barre de navigation est aligné. Disponible : « gauche », « droite », « centre ». La valeur par défaut est « centre ». |
boutons ion-nav
| 属性 | 类型 | 详情 |
|---|---|---|
| side | 字符串 | 在父 |
<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<🎜>
| Attributs | Type< /th> | Détails |
|---|---|---|
| côté | Chaîne | < td ><🎜>La position où le bouton est placé dans le
ion-nav-back-button
Crée un bouton dans une ionNavBar.
Le bouton retour s'affichera lorsque l'utilisateur pourra revenir en arrière dans la navigation en cours.
Utilisation
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>
Action de clic personnalisée, utilisez $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();
};
}pour afficher le titre précédent sur le bouton de retour, également Utilisez $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
nav-clear est une directive d'attribut utilisée lorsque vous cliquez sur un élément de la vue, tel qu'un <a href> ou un <button ui- sréf>.
Lorsque vous cliquez dessus, nav-clear fera en sorte que l'élément donné désactive la prochaine transition de vue. Cette commande est utile, par exemple, pour les liens dans les menus de la barre latérale.
Utilisation
Ce qui suit est un lien avec la commande nav-clear ajoutée au menu de la barre latérale. Cliquer sur ce lien désactivera toute animation entre les vues.
<a nav-clear menu-close href="#/home" class="item">首页</a>
ion-nav-title
ion-nav-title est utilisé pour définir le titre dans le modèle ion-view.
Utilisation
<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é, qui peut être : ios, android et aucun.
Utilisation
<a nav-transition="none" href="#/home">Home</a>
nav-direction
Définissez la direction de l'animation de transition dans la vue de navigation, qui peut être avant, arrière, entrée, sortie, échange .
Usage
<a nav-direction="forward" href="#/home">Home</a>
$ionicNavBarDelegate
L'autorisation contrôle 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éthode
align([direction])
Revenir dans l'historique de navigation.
| Paramètre | Type | Détails | ||||||
|---|---|---|---|---|---|---|---|---|
| événement (facultatif) | DOMEvent |
|
align([direction])Légende avec bouton aligné dans la direction spécifiée.
| 参数 | 类型 | 详情 |
|---|---|---|
| direction (可选) | 字符串 | 标题文字对齐的方向。可用: 'left', 'right', 'center'。 默认: 'center'。 |
| Paramètre | Type | Détails |
|---|---|---|
| direction (facultatif) | Chaîne | La direction dans laquelle le texte du titre est aligné. Disponible : « gauche », « droite », « centre ». Par défaut : « centre ». |
Valeur booléenne, si le bouton de retour est affiché.
showBar(show)
| 参数 | 类型 | 详情 |
|---|---|---|
| show | 布尔值 | 导航栏是否显示。 |
| Paramètre | Type | Détails |
|---|---|---|
| afficher | Valeur booléenne | Si la barre de navigation est affichée. |
Valeur de retour :
Valeur booléenne, si la barre de navigation est affichée.| 参数 | 类型 | 详情 |
|---|---|---|
| show (可选) | 布尔值 | 是否显示后退按钮 |
showBackButton([show])<🎜>Définissez ou obtenez si le bouton ion-nav-back-back est affiché. <🎜>
| Paramètre | Type | Détails |
|---|---|---|
| show (facultatif) | Valeur booléenne | <🎜>S'il faut afficher le bouton retour<🎜> |
title(title)
Définir le titre pour la barre ion-nav.
| Paramètre | Type | Détails | ||||||
|---|---|---|---|---|---|---|---|---|
| title | String |
|
viewHistory()est utilisée pour afficher l'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])Obtient ou définit le titre de la vue actuelle.
backView()Retour à la dernière vue consultée.
backTitle()Obtenez le titre de la dernière vue consultée.
forwardView()Renvoie la vue précédant immédiatement la vue actuelle dans la pile d'historique.
currentStateName()Renvoie le nom de l'état actuel.
goBack([backCount])vue de secours de l'application, si la vue de secours existe.
