Ionic - Navigation Javascript

La navigation est l'un des composants essentiels de chaque application. Ionic utilise leAngularJS UI Router pour gérer la navigation.

Utilisation de la navigation

La navigation peut être configurée dans le app.jsfichier. Si vous utilisez l'un des modèles Ionic, vous remarquerez le$stateProvider service injecté dans l'application config. La manière la plus simple de créer des états pour l'application est illustrée dans l'exemple suivant.

le $stateProvider le service analysera l'URL, trouvera l'état correspondant et chargera le fichier, que nous avons défini dans app.config.

Code app.js

.config(function($stateProvider) {
   $stateProvider
   .state('index', { url: '/', templateUrl: 'templates/home.html'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1.html'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2.html',});
});

L'état sera chargé dans le ion-nav-view élément, qui peut être placé dans le index.html corps.

index.html Code

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

Lorsque nous avons créé des états dans l'exemple mentionné ci-dessus, nous utilisions le templateUrl, donc lorsque l'état est chargé, il recherchera la correspondance avec le fichier modèle. Maintenant, nous allons ouvrir letemplates dossier et créez un nouveau fichier state1.html, qui sera chargé lorsque l'URL de l'application sera remplacée par /state1.

state1.html Code

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

Création du menu de navigation

Vous pouvez ajouter une barre de navigation à votre application dans le index.html body en ajoutant le “ion-nav-bar”élément. Dans la barre de navigation, nous ajouterons leion-nav-back-buttonavec une icône. Cela sera utilisé pour revenir à l'état précédent. Le bouton apparaîtra automatiquement lorsque l'état est changé. Nous attribuerons legoBack() fonction, qui utilisera la $ionicHistoryservice pour gérer cette fonctionnalité. Par conséquent, lorsque l'utilisateur quitte son état d'origine et accède àstate1, le bouton de retour apparaîtra qui peut être enregistré, si l'utilisateur veut revenir à l'état d'origine.

index.html Code

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

Code du contrôleur

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

Ajout d'éléments de navigation

Des boutons peuvent être ajoutés à la barre de navigation à l'aide du ion-nav-buttons. Cet élément doit être placé à l'intérieur duion-nav-bar ou la ion-view. Nous pouvons attribuer lesideattribut avec quatre valeurs d'option. leprimary et secondaryvaleurs placeront les boutons en fonction de la plate-forme utilisée. Parfois, vous voulez les boutons d'un côté, qu'il s'agisse d'IOS ou d'Android. Si tel est le cas, vous pouvez utiliser leleft ou la right attributs à la place.

Nous pouvons également ajouter le ion-nav-titledans la barre de navigation. Tout le code sera placé dans leindex.html corps, il peut donc être utilisé partout.

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

Il produira l'écran suivant -

Autres attributs de navigation

Le tableau suivant présente quelques autres fonctionnalités qui peuvent être utilisées avec la navigation Ionic.

Attributs de navigation

Attribut	Options	Détail
nav-transition	aucun, iOS, Android	Utilisé pour définir l'animation à appliquer lors de la transition.
nav-direction	avancer, reculer, entrer, sortir, échanger	Utilisé pour définir la direction de l'animation lors de la transition.
matérielBackButtonClose	Booléen	Cela permettra de fermer le modal lorsque le bouton de retour matériel est cliqué. La valeur par défaut est true.

Mise en cache

Ionic a la capacité de mettre en cache jusqu'à dix vues pour améliorer les performances. Il offre également un moyen de gérer la mise en cache manuellement. Étant donné que seules les vues arrière sont mises en cache et que les vues avant se chargent chaque fois que les utilisateurs les visitent, nous pouvons facilement mettre en cache les vues avant en utilisant le code suivant.

$ionicCinfigProvider.views.forwardCache(true);

Nous pouvons également définir le nombre d'états à mettre en cache. Si nous voulons que trois vues soient mises en cache, nous pouvons utiliser le code suivant.

$ionicConfigProvider.views.maxCache(3);

La mise en cache peut être désactivée à l'intérieur $stateProvider ou en définissant l'attribut sur ion-view. Les deux exemples sont ci-dessous.

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

<ion-view cache-view = "false"></ion-view>

Contrôle de la barre de navigation

Nous pouvons contrôler le comportement de la barre de navigation en utilisant le $ionicNavBarDelegateun service. Ce service doit être injecté à notre contrôleur.

Code HTML

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

Code du contrôleur

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

le $ionicNavBarDelegateservice a d'autres méthodes utiles. Certaines de ces méthodes sont répertoriées dans le tableau suivant.

Méthodes pour $ ionicNavBarDelegate

Méthode	Paramètre	Type	Détail
align (paramètre)	centre, gauche, droite	chaîne	Utilisé pour aligner le titre.
showBackButton (paramètre)	spectacle	Booléen	Utilisé pour afficher ou masquer le bouton de retour.
title (paramètre)	Titre	chaîne	Utilisé pour afficher le nouveau titre.

Historique de suivi

Vous pouvez suivre l'historique des vues précédente, actuelle et avant en utilisant le $ionicHistoryun service. Le tableau suivant présente toutes les méthodes de ce service.

Méthodes pour $ ionicHistory

Méthode	Paramètre	Type	Détail
voir l'historique	/	objet	Renvoie les données d'historique d'affichage de l'application.
vue actuelle()	/	objet	Renvoie la vue actuelle.
title (paramètre)	Titre	chaîne	Renvoie l'ID de la vue qui est parent de la vue actuelle.
currentTitle (paramètre)	val	chaîne	Renvoie le titre de la vue actuelle. Il peut être mis à jour en définissant un nouveauval valeur.
vue arrière()	/	chaîne	Renvoie la dernière vue arrière.
backTitle ()	/	chaîne	Renvoie le titre de la dernière vue arrière.
forwardView ()	/	objet	Renvoie la dernière vue avant.
currentStateName ()	/	chaîne	Renvoie le nom de l'état actuel.
retourner()	backCount	nombre	Utilisé pour définir le nombre de vues à reculer. Le nombre doit être négatif. S'il est positif ou nul, il n'aura aucun effet.
histoire claire()	/	/	Utilisé pour effacer tout l'historique des vues.
vider le cache()	/	promettre	Utilisé pour effacer toutes les vues mises en cache.
nextViewOptions ()	/	objet	Définit les options de la vue suivante. Vous pouvez consulter l'exemple suivant pour plus d'informations.

le nextViewOptions() met à votre disposition les trois options suivantes.

disableAnimate est utilisé pour désactiver l'animation du prochain changement de vue.
disableBack définira la vue arrière sur null.
historyRoot définira la vue suivante comme vue racine.

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