Ionic - Navigazione Javascript

La navigazione è uno dei componenti principali di ogni app. Ionic sta usando ilAngularJS UI Router per la gestione della navigazione.

Utilizzo della navigazione

La navigazione può essere configurata in app.jsfile. Se stai usando uno dei modelli Ionic, noterai il file$stateProvider servizio iniettato nell'app config. Il modo più semplice per creare stati per l'app è mostrato nell'esempio seguente.

Il $stateProvider service eseguirà la scansione dell'URL, troverà lo stato corrispondente e caricherà il file, che abbiamo definito in app.config.

codice 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',});
});

Lo stato verrà caricato nel file ion-nav-view elemento, che può essere inserito nel file index.html corpo.

index.html Codice

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

Quando abbiamo creato gli stati nell'esempio sopra menzionato, stavamo usando il templateUrl, quindi quando lo stato viene caricato, cercherà la corrispondenza con il file modello. Ora apriremo il filetemplates cartella e creare un nuovo file state1.html, che verrà caricato quando l'URL dell'app viene modificato in /state1.

state1.html Code

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

Creazione del menu di navigazione

Puoi aggiungere una barra di navigazione alla tua app nel file index.html body aggiungendo il “ion-nav-bar”elemento. All'interno della barra di navigazione, aggiungeremo il fileion-nav-back-buttoncon un'icona. Questo verrà utilizzato per tornare allo stato precedente. Il pulsante apparirà automaticamente quando lo stato viene modificato. Assegneremo il filegoBack() funzione, che utilizzerà la $ionicHistoryservizio per la gestione di questa funzionalità. Pertanto, quando l'utente lascia lo stato di residenza e va astate1, apparirà il pulsante indietro che può essere registrato, se l'utente vuole tornare allo stato di casa.

index.html Codice

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

Codice controller

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

Aggiunta di elementi di navigazione

I pulsanti possono essere aggiunti alla barra di navigazione utilizzando il ion-nav-buttons. Questo elemento dovrebbe essere posizionato all'interno del fileion-nav-bar o il ion-view. Possiamo assegnare il filesideattributo con quattro valori di opzione. Ilprimary e secondaryi valori posizioneranno i pulsanti in base alla piattaforma utilizzata. A volte vuoi i pulsanti su un lato, non importa se è IOS o Android. In tal caso, puoi utilizzare l'estensioneleft o il right attributi invece.

Possiamo anche aggiungere il file ion-nav-titlealla barra di navigazione. Tutto il codice verrà inserito nel fileindex.html corpo, quindi può essere utilizzato ovunque.

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

Produrrà la seguente schermata:

Altri attributi di navigazione

La tabella seguente mostra alcune altre funzionalità che possono essere utilizzate con la navigazione Ionic.

Attributi di navigazione

Attributo	Opzioni	Dettaglio
nav-transizione	nessuno, iOS, Android	Utilizzato per impostare l'animazione da applicare quando si verifica la transizione.
direzione di navigazione	avanti, indietro, entra, esci, scambia	Utilizzato per impostare la direzione dell'animazione quando si verifica la transizione.
hardwareBackButtonClose	Booleano	Abiliterà la chiusura del modale quando si fa clic sul pulsante indietro dell'hardware. Il valore predefinito è vero.

Caching

Ionic ha la capacità di memorizzare nella cache fino a dieci visualizzazioni per migliorare le prestazioni. Offre anche un modo per gestire manualmente la memorizzazione nella cache. Poiché solo le visualizzazioni all'indietro vengono memorizzate nella cache e quelle in avanti vengono caricate ogni volta che gli utenti le visitano, possiamo facilmente impostare la cache delle visualizzazioni in avanti utilizzando il codice seguente.

$ionicCinfigProvider.views.forwardCache(true);

Possiamo anche impostare il numero di stati da memorizzare nella cache. Se vogliamo che tre viste vengano memorizzate nella cache, possiamo usare il codice seguente.

$ionicConfigProvider.views.maxCache(3);

La memorizzazione nella cache può essere disabilitata all'interno $stateProvider o impostando l'attributo su ion-view. Entrambi gli esempi sono di seguito.

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

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

Controllo della barra di navigazione

Possiamo controllare il comportamento della barra di navigazione utilizzando il $ionicNavBarDelegateservizio. Questo servizio deve essere inserito nel nostro controller.

Codice HTML

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

Codice controller

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

Il $ionicNavBarDelegateil servizio ha altri metodi utili. Alcuni di questi metodi sono elencati nella tabella seguente.

Metodi per $ ionicNavBarDelegate

Metodo	Parametro	genere	Dettaglio
allineare (parametro)	centro, sinistra, destra	corda	Utilizzato per allineare il titolo.
showBackButton (parametro)	spettacolo	Booleano	Utilizzato per mostrare o nascondere il pulsante Indietro.
titolo (parametro)	titolo	corda	Utilizzato per mostrare il nuovo titolo.

Cronologia di monitoraggio

È possibile tenere traccia della cronologia delle viste precedente, corrente e successiva utilizzando il $ionicHistoryservizio. La tabella seguente mostra tutti i metodi di questo servizio.

Metodi per $ ionicHistory

Metodo	Parametro	genere	Dettaglio
viewHistory	/	oggetto	Restituisce i dati della cronologia delle visualizzazioni dell'app.
vista corrente()	/	oggetto	Restituisce la visualizzazione corrente.
titolo (parametro)	titolo	corda	Restituisce l'ID della vista che è padre della vista corrente.
currentTitle (parametro)	val	corda	Restituisce il titolo della vista corrente. Può essere aggiornato impostando nuovoval valore.
vista posteriore()	/	corda	Restituisce l'ultima vista posteriore.
backTitle ()	/	corda	Restituisce il titolo dell'ultima vista posteriore.
forwardView ()	/	oggetto	Restituisce l'ultima vista in avanti.
currentStateName ()	/	corda	Restituisce il nome dello stato corrente.
torna indietro()	backCount	numero	Utilizzato per impostare quante visualizzazioni tornare indietro. Il numero dovrebbe essere negativo. Se è positivo o zero non avrà effetto.
cancellare la cronologia()	/	/	Utilizzato per cancellare l'intera cronologia delle visualizzazioni.
clearCache ()	/	promettere	Utilizzato per cancellare tutte le viste memorizzate nella cache.
nextViewOptions ()	/	oggetto	Imposta le opzioni della vista successiva. Puoi guardare il seguente esempio per maggiori informazioni.

Il nextViewOptions() ha le seguenti tre opzioni disponibili.

disableAnimate viene utilizzato per disabilitare l'animazione della successiva modifica della vista.
disableBack imposterà la vista posteriore su null.
historyRoot imposterà la vista successiva come vista principale.

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