Archivo de la etiqueta: navegaci贸n

Tutorial de IONIC: Navegaci贸n

Hola a todos, en el post anterior vimos聽 una app simple, un minijuego de adivinar n煤meros que nos sirvi贸 para aprender c贸mo se programa la l贸gica de una p谩gina en Ionic.

La aplicaci贸n era extremadamente sencilla y toda la l贸gica se desarrollaba en la misma p谩gina, sin embargo lo normal en cualquier aplicaci贸n que sea m铆nimamente completa es que tenga varias vistas o p谩ginas y haya que navegar entre ellas.

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

Vamos a crear un nuevo proyecto de prueba para observar c贸mo funciona la navegaci贸n entre p谩ginas en ionic.

Nos situamos en la carpeta donde queramos crear nuestro proyecto y desde consola escribimos el siguiente comando:

 ionic start navegacion blank

Seleccionamos Angular como framework y esperamos a que se termine de crear el proyecto.

Nos situamos dentro de la carpeta del proyecto que acabamos de crear:

cd navegacion

Ahora vamos a crear una nueva p谩gina para poder navegar entre dos p谩ginas, pero antes de seguir vamos a conocer Ionic Generator, una herramienta de nos ofrece Ionic para crear componentes autom谩ticamente.

Ionic Generator

Nosotros podemos crear las p谩ginas a mano creando una carpeta para nuestra p谩gina con su vista html y su controlador .ts, y su archivo de estilo .scss, tambi茅n podemos crear y configurar otros elementos a mano, pero el cli (command line interface o interfaz de l铆nea de comandos) de ionic nos facilita much铆simo el trabajo. Ionic dispone de una herramienta llamada ionic generator.

Ionic generator nos permite generar plantillas con los componentes que queramos.

Con el siguiente comando obtenemos la lista de elementos disponible que podemos generar con ionic generator:

ionic g

La lista de elementos que podemos generar autom谩ticamente con ionic generator son:

  • page: P谩ginas.
  • component: Los componentes son un conjunto de html, con su css y su comportamiento que podemos reutilizar en cualquier lugar sin tener que reescribir de nuevo todo.
  • service: Los services son proveedores que se encargan del manejo de datos, bien extra铆dos de la base de datos, desde una api, etc. En versiones anterioes a la 4 de ionic se llamaban providers.
  • module: Nos permite crear un m贸dulo.
  • class: Nos permite crear una clase.
  • directive: Una directiva sirve para modificar atributos de un elemento.
  • guard: Genera un 鈥済uardi谩n鈥 que nos permite crear una protecci贸n para permitir que los componentes solo se activen si se cumple alguna condici贸n, como por ejemplo si el usuario est谩 logueado.
  • pipe: Los pipes nos permiten crear filtros para aplicar a la informaci贸n que mostramos en la plantilla, por ejemplo podemos aplicar un filtro que convierta un texto en may煤sculas.
  • interface: Nos permite crear una interfaz.
  • enum: genera una enumeraci贸n.

Veremos con m谩s detalle cada elemento seg煤n lo vayamos necesitando, para este ejemplo de momento nos interesa聽 page as铆 que con las flechas del cursor seleccionamos page y pulsamos enter, despu茅s nos pregunta el nombre que queremos darle a la p谩gina, le llamamos por ejemplo Pagina2 y pulsamos enter.

Tambi茅n podr铆amos haber creado la p谩gina directamente escribiendo:

ionic g page Pagina2 

Est谩 es la manera que utilizaremos a partir de ahora para crear p谩ginas.

Podemos observar que en la carpeta app se ha creado una nueva carpeta llamada pagina2:

Vemos que al crear una p谩gina con ionic generator adem谩s del archivo pagina2.page.ts tambi茅n se genera un archivo pagina2.module.ts y otro pagina2-routing.module.ts en cada p谩gina generada, este archivo se utiliza para poder realizar lo que se conoce como Lazy Loading, que permite cargar p谩ginas y recursos bajo demanda acelerando as铆 la carga de las p谩ginas.

En versiones anteriores a ionic 4, utiliz谩bamos algo parecido a esto para navegar hacia una p谩gina:

this.navCtrl.push(‘miPagina’);

Aunque todav铆a se puede utilizar este sistema lo recomendable es utilizar el routing de angular basado en diferentes URL para cada p谩gina o componente a mostrar.

Si echamos un vistazo al archivo app-routing.module.ts vemos que contiene lo siguiente:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  {
    path: 'pagina2',
    loadChildren: () => import('./pagina2/pagina2.module').then( m => m.Pagina2PageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

C贸mo podemos observar contiene una constante llamada Routes donde se han generado autom谩ticamente las rutas a nuestras dos p谩ginas home y Pagina2.

El primer path que se define est谩 vac铆o y redirecciona a home, esto indica que home ser谩 la p谩gina por defecto cuando no se especifique ninguna.

Vemos tambi茅n que la ruta que se especifica en loadChildren de las dos p谩ginas no apunta a componente de la p谩gina si no a su m贸dulo, de esta manera se definen las rutas para hacer lazy loading.

Vamos a ver a continuaci贸n las diferentes opciones que tenemos para navegar entre p谩ginas.

Navegar entre p谩ginas utilizando routerLink en la plantilla html

Podemos utilizar routerLink directamente para indicar la ruta de la p谩gina que queremos mostrar.

Vamos a editar home.page.html, eliminamos el contenido que se genera por defecto y vamos a crear una p谩gina sencilla con un bot贸n para ir a la p谩gina 2.

<ion-header>
 <ion-toolbar>
   <ion-title>
     Ionic Blank
   </ion-title>
 </ion-toolbar>
</ion-header>
 
<ion-content>
  <div class="ion-padding">
    <ion-button routerLink="/pagina2" routerDirection="forward">Ir a la p谩gina 2</ion-button>
  </div>
</ion-content>

Ahora vamos a editar pagina2.page.html y lo dejamos de la siguiente manera:

<ion-header>
  <ion-toolbar>
    <ion-title>Pagina2</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <p>Soy la p谩gina 2</p>
    <ion-button routerLink="/home" routerDirection="back">Volver a home</ion-button>
  </div>
</ion-content>

Aunque no es obligatorio podemos utilizar como en el ejemplo el par谩metro routerDirection para indicar la direcci贸n de la animaci贸n. Los valores posibles son tres: fordward, back y root, puedes hacer pruebas cambiando el valor de routerDirection para que entiendas mejor qu茅 hace cada uno.聽

Vemos que simplemente poniendo la ruta de la p谩gina dentro de href podemos navegar entre dos p谩ginas, si ejecutamos ionic serve -l veremos algo como esto:

Navegar entre p谩ginas program谩ticamente

Si bien podemos navegar entre las distintas p谩ginas de nuestra aplicaci贸n utilizando href en un bot贸n o en un 铆tem de nuestra plantilla html, a veces necesitaremos que se muestre una p谩gina desde la l贸gica del controlador.聽

Lo primero que vamos a hacer es modificar el bot贸n de la p谩gina home.page.html, en lugar de la propiedad href le vamos a asignar un evento (click) que llame a una funci贸n del controlador que vamos a llamar goToPagina2:

<ion-content>
  <div class="ion-padding">
    <ion-button (click)="goToPagina2()" routerDirection="forward">Ir a la p谩gina 2</ion-button>
  </div>
</ion-content>

Ahora vamos a editar home.page.ts para crear esta funci贸n que nos permita navegar hasta la p谩gina 2.

Aunque podr铆amos importar y utilizar el聽 Router de angular con el m茅todo navigateByUrl, este m茅todo no nos permite definir la direcci贸n de la navegaci贸n, por lo que es mejor utilizar NavController.

Lo primero que debemos hacer es importar NavController:

import { NavController } from '@ionic/angular';

Ahora debemos inyectarlo en el constructor:

constructor(private navCtrl: NavController){

}

Al inyectar un elemento en el constructor nos permite acceder a sus m茅todos desde cualquier sitio de la p谩gina.

Para finalizar vamos a crear la funci贸n goToPagina2 a la que hac铆amos referencia desde el bot贸n de la plantilla:

goToPagina2(){
  this.navCtrl.navigateForward('/pagina2');
}

Tenemos tres m茅todos que podemos utilizar para navegar seg煤n la direcci贸n al igual que lo hac铆amos cuando hemos utilizado href, estos tres m茅todos son: navigateForward, navigateBack y navigateRoot.

Una vez m谩s te animo a que experimentes con ellos para que entiendas mejor lo que hace cada uno.

El c贸digo completo de home.page.ts quedar铆a de la siguiente manera:

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
})
export class HomePage {

 constructor(private navCtrl: NavController){

 }
 goToPagina2(){
   this.navCtrl.navigateForward('/Pagina2');
 }

}

Volver a la p谩gina anterior

Para volver a la p谩gina anterior podemos utilizar el componente ion-back-button en nuestra plantilla, lo podemos utilizar para poner el t铆pico bot贸n de volver en la cabecera.

Para probarlo vamos a editar el archivo pagina2.page.html y vamos a a帽adir lo siguiente en la cabecera:

<ion-header>
 <ion-toolbar>
   <ion-title>Pagina2</ion-title>
   <ion-buttons slot="start">
     <ion-back-button defaultHref="/home"></ion-back-button>
    </ion-buttons>
 </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <p>Soy la p谩gina 2</p>
    <ion-button routerLink="/home" routerDirection="back">Volver a home</ion-button>
  </div>
</ion-content>

Podemos observar que hemos puesto una propiedad llamada defaultHref, con esto le estamos indicando que la ruta por defecto sea /home. Al pulsar este bot贸n vamos a navegar hacia atr谩s a la p谩gina anterior en el historial, si por alg煤n motivo no encontrase la p谩gina anterior por defecto cargar铆a home.聽

En este caso como solo tenemos dos p谩ginas coincide que la p谩gina anterior siempre va a ser home.

Por otro lado hemos creado el elemento ion-back-button dentro del contenedor ion-buttons, esto nos sirve para contener botones. Podemos observar que ion-buttons tiene un atributo llamado slot聽 al que hemos asignado el valor start. Con esto le indicamos que los botones que contenga se van a mostrar al inicio, es decir a la izquierda.

El atributo slot indica para indicar la posici贸n o el estilo que van a tener los elementos.

Existen diferentes valores que podemos utilizar con slot, como por ejemplo: item-left, end, start, icon-left, range-left, range-right, icon-only, etc, dependiendo del componente puede aceptar o no diferentes tipos de slot por lo deberemos revisar la documentaci贸n del componente para ver qu茅 posibilidades nos ofrece.

Como podemos ver si ejecutamos ionic serve ion-back-button nos ha creado un bot贸n de volver atr谩s en la cabecera:

Pasando datos entre p谩ginas

Muchas veces nos interesa pasar datos al llamar a una p谩gina.

Por ejemplo podemos tener un listado de productos y al pulsar en un producto queremos llamar a una p谩gina donde se muestre el detalle de ese producto.

Al utilizar el router de Angular debemos pasar los datos que necesitemos en la url.

Aunque podr铆amos pasar toda la informaci贸n del producto en la propia url convertido en json no es lo m谩s pr谩ctico, lo m谩s usual es pasar el id del producto y con el id utilizar un servicio para obtener los datos relacionados con el producto seleccionado. Aprenderemos m谩s adelante a crear y utilizar servicios, de momento vamos a ver c贸mo podemos pasar un id a la p谩gina a la que llamamos.

Vamos a seguir haciendo pruebas con el proyecto navegaci贸n, lo primero que vamos a hacer es editar el archivo app-routing.module.ts que es el archivo donde de definen las rutas de nuestras p谩ginas.聽

Al crear una p谩gina con ionic generator ya se crea autom谩ticamente la ruta en app-routing.module.ts , sin embargo para poder a帽adir datos a la url debemos especificar el nombre del dato que vamos a enviar, en este ejemplo queremos mandar un dato llamado id as铆 que debemos a帽adir /:id a la ruta de la p谩gina 2:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  {
    path: 'pagina2/:id',
    loadChildren: () => import('./pagina2/pagina2.module').then( m => m.Pagina2PageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

 

Como podemos observar hemos hemos definido la el path de la ruta de la Pagina2 como:聽 pagina2/:id 聽a帽adiendo /:id por detr谩s, as铆 despu茅s podremos hacer referencia a id desde la p谩gina 2.

Ahora vamos a pasarle por ejemplo el id 14 cuando llamamos a la p谩gina 2 desde la p谩gina Home, para ello editamos el archivo home.page.ts y modificamos la funci贸n goToPagina2() a帽adiendo el n煤mero 14 a la url:

goToPagina2(){
  this.navCtrl.navigateForward('/pagina2/14');
}

Por 煤ltimo vamos a ver c贸mo obtenemos el id en Pagina2, editamos el archivo pagina2.page.ts y lo primero que necesitamos hacer es importar ActivatedRoute para poder obtener los par谩metros recibidos en la url:

import { ActivatedRoute } from '@angular/router';

Ahora debemos inyectarlo en el constructor:

constructor(private route: ActivatedRoute) { }

Finalmente en la funci贸n ngOnInit que se ejecuta al iniciar la p谩gina recogemos el id y simplemente lo vamos a mostrar a trav茅s de un alert:

ngOnInit() {
   let id = this.route.snapshot.paramMap.get('id');
   alert(id);
 }

Para recoger el id utilizamos this.route.snapshot.paramMap.get(‘id’).

El c贸digo completo de pagina2.page.ts por lo tanto quedar铆a de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-pagina2',
  templateUrl: './pagina2.page.html',
  styleUrls: ['./pagina2.page.scss'],
})
export class Pagina2Page implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    let id = this.route.snapshot.paramMap.get('id');
    alert(id);
  } 

}

Si corremos la aplicaci贸n con ionic serve veremos que al pasar a la p谩gina 2 saca un alert con el n煤mero 14.

Puedes descargar o clonar este proyecto desde GitHub en el siguiente link:

https://github.com/edurevilla/libro-ionic-navegacion

Para no hacer este post demasiado largo por hoy lo vamos a dejar aqu铆. En el pr贸ximo post veremos c贸mo utilizar men煤s laterales, navegaci贸n por tabs etc.

 

Eso es todo por hoy,聽 nos vemos en el pr贸ximo post :).