Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 8D : 8H : 22M : 40S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Navegación básica entre pages

8/57

En la clase anterior vimos como hacer una navegación básica mediante el sidemenu, pero esto no es muy buena idea pues hay paginas a las cuales no se debería poder acceder directamente.

Haciendo uso de NavController haremos que desde Home se pueda acceder a Conversation y Login, además desde estas últimas páginas se pueda acceder de regreso a Home.

La navegación la realizaremos a partir de hacer click en un botón, si quieres experimentar con los distintos botones que proporciona Ionic siempre puedes acceder a su documentación oficial.

NavController cuenta con varios métodos, los que usaremos para nuestra navegación son:

  • push: añade una nueva página al stack de navegación, además esto genera un botón de back en nuestro header de la página.
  • pop: quita la última página del stack de navegación.

Recuerda nunca uses el método push para regresar a una página, siempre usa pop.

Para regresar al inicio correctamente se debe utilizar:

this.navCtrl.setRoot(HomePage);

En la última versión de ionic el sistema de navegación ha cambiado.

para crear botones que interactuen con las páginas basta con escribir

<ion-button href="/conversation">Conversation</ion-button>
<ion-button href="/login">Login</ion-button>

en la pagina home.html

this.navCtrl.push(NombrePagina); para navegar hacia delante
this.navCtrl.pop(); para volver a la página anterior

Debemos tener cuidado si navegamos inicialmente con el sidemenu a ConversationPage y luego hacemos el .pop tendremos un error en el stack de navegación

si usan ionic 4 tienen que crear la pagina y al agregar la página ionic cli le asignaraá una ruta por defecto en router module.

ahí siguen los mismos pasos del instructor

salvo que tienen que colocar asi el nav ctrl

goToConversation(){
this.navCtrl.navigateForward(’/conversation’); //name de la página en root module
}

para mostrar el boton de regresar en Ionic v4 usar:
<ion-buttons slot=“start”>
<ion-back-button></ion-back-button>
</ion-buttons>

Lo de los módulos y IonicPage también sirve para realizar el Lazy Loading, es decir, que el primer javascript no contenga todas las páginas, sino ir descargando el js necesario a medida que se vaya navegando. Así la aplicación de carga más rápido y consume menos datos de golpe.

Guía para hacer Lazy Loading en Ionic 3

Cada vez más me enamoro más de IONIC.

Para los que estan usando Ionic 4, pueden crear un proyecto de Ionic 3 usando el comando ionic start Myapp sidemenu --type=ionic-angular

En mi caso para mostrar el boton de Back hacia el home en la pagina de login, debí adicionar este codigo en el HTML utilizando la versión Ionic 5.2.4.

<ion-header>
<ion-toolbar>
<ion-buttons slot=“start”>
<ion-back-button defaultHref=“home”></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

Para regresar al inicio correctamente se debe utilizar:

this.navCtrl.setRoot(HomePage);

En la última versión de ionic el sistema de navegación ha cambiado.

para crear botones que interactuen con las páginas basta con escribir

<ion-button href="/conversation">Conversation</ion-button>
<ion-button href="/login">Login</ion-button>

en la pagina home.html

this.navCtrl.push(NombrePagina); para navegar hacia delante
this.navCtrl.pop(); para volver a la página anterior

Debemos tener cuidado si navegamos inicialmente con el sidemenu a ConversationPage y luego hacemos el .pop tendremos un error en el stack de navegación

si usan ionic 4 tienen que crear la pagina y al agregar la página ionic cli le asignaraá una ruta por defecto en router module.

ahí siguen los mismos pasos del instructor

salvo que tienen que colocar asi el nav ctrl

goToConversation(){
this.navCtrl.navigateForward(’/conversation’); //name de la página en root module
}

para mostrar el boton de regresar en Ionic v4 usar:
<ion-buttons slot=“start”>
<ion-back-button></ion-back-button>
</ion-buttons>

Lo de los módulos y IonicPage también sirve para realizar el Lazy Loading, es decir, que el primer javascript no contenga todas las páginas, sino ir descargando el js necesario a medida que se vaya navegando. Así la aplicación de carga más rápido y consume menos datos de golpe.

Guía para hacer Lazy Loading en Ionic 3

Cada vez más me enamoro más de IONIC.

Para los que estan usando Ionic 4, pueden crear un proyecto de Ionic 3 usando el comando ionic start Myapp sidemenu --type=ionic-angular

En mi caso para mostrar el boton de Back hacia el home en la pagina de login, debí adicionar este codigo en el HTML utilizando la versión Ionic 5.2.4.

<ion-header>
<ion-toolbar>
<ion-buttons slot=“start”>
<ion-back-button defaultHref=“home”></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>