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