El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo crear y utilizar páginas en una aplicación Ionic. Las páginas son componentes fundamentales en cualquier aplicación móvil, ya que representan las diferentes vistas que el usuario puede navegar. Vamos a cubrir los siguientes puntos:

Creación de una nueva página
Estructura de una página en Ionic
Navegación entre páginas
Pasar datos entre páginas
Ejercicio práctico

Creación de una nueva página

Para crear una nueva página en Ionic, utilizamos el comando ionic generate. Este comando nos permite generar diferentes tipos de componentes, incluyendo páginas.

ionic generate page nombre-de-la-pagina

Por ejemplo, para crear una página llamada Home, ejecutamos:

ionic generate page Home

Este comando generará una carpeta home dentro del directorio src/app/ con los siguientes archivos:

home.module.ts
home.page.html
home.page.scss
home.page.ts

Estructura de una página en Ionic

Vamos a desglosar la estructura de los archivos generados para entender su propósito:

home.page.ts

Este archivo contiene la lógica de la página. Es un componente de Angular que define la clase HomePage.

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

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

home.page.html

Este archivo contiene la plantilla HTML de la página. Aquí es donde definimos la estructura visual de la página.

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

<ion-content>
  <p>Bienvenido a la página de inicio!</p>
</ion-content>

home.page.scss

Este archivo contiene los estilos específicos para la página. Podemos usar CSS o SCSS para estilizar nuestra página.

ion-content {
  p {
    font-size: 20px;
    text-align: center;
  }
}

home.module.ts

Este archivo define el módulo de la página. Es necesario para la carga perezosa (lazy loading) de la página.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

Navegación entre páginas

Para navegar entre páginas en Ionic, utilizamos el servicio NavController. Este servicio proporciona métodos para navegar hacia adelante y hacia atrás en la pila de navegación.

Ejemplo de navegación

Supongamos que tenemos otra página llamada About. Para navegar desde Home a About, primero asegurémonos de que la página About esté creada:

ionic generate page About

Luego, en el archivo home.page.ts, inyectamos el NavController y utilizamos el método navigateForward para navegar a la página About.

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

  goToAbout() {
    this.navCtrl.navigateForward('/about');
  }
}

En el archivo home.page.html, añadimos un botón para desencadenar la navegación:

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

<ion-content>
  <p>Bienvenido a la página de inicio!</p>
  <ion-button (click)="goToAbout()">Ir a About</ion-button>
</ion-content>

Pasar datos entre páginas

Para pasar datos entre páginas, podemos utilizar el método navigateForward con un objeto de opciones que incluya los datos.

Ejemplo de pasar datos

En el archivo home.page.ts, modificamos el método goToAbout para incluir datos:

goToAbout() {
  this.navCtrl.navigateForward('/about', {
    queryParams: {
      nombre: 'Juan',
      edad: 30
    }
  });
}

En la página About, podemos acceder a estos datos utilizando el ActivatedRoute de Angular.

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

@Component({
  selector: 'app-about',
  templateUrl: './about.page.html',
  styleUrls: ['./about.page.scss'],
})
export class AboutPage implements OnInit {
  nombre: string;
  edad: number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.nombre = params['nombre'];
      this.edad = params['edad'];
    });
  }
}

En el archivo about.page.html, mostramos los datos recibidos:

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

<ion-content>
  <p>Nombre: {{ nombre }}</p>
  <p>Edad: {{ edad }}</p>
</ion-content>

Ejercicio práctico

Ejercicio

Crea una nueva página llamada Profile.
En la página Home, añade un botón que navegue a la página Profile.
Pasa un objeto con los datos username y email desde la página Home a la página Profile.
En la página Profile, muestra los datos recibidos en la plantilla HTML.

Solución

Crear la página Profile:

ionic generate page Profile

Modificar home.page.ts:

goToProfile() {
  this.navCtrl.navigateForward('/profile', {
    queryParams: {
      username: 'johndoe',
      email: '[email protected]'
    }
  });
}

Modificar home.page.html:

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

<ion-content>
  <p>Bienvenido a la página de inicio!</p>
  <ion-button (click)="goToProfile()">Ir a Profile</ion-button>
</ion-content>

Modificar profile.page.ts:

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

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})
export class ProfilePage implements OnInit {
  username: string;
  email: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.username = params['username'];
      this.email = params['email'];
    });
  }
}

Modificar profile.page.html:

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

<ion-content>
  <p>Username: {{ username }}</p>
  <p>Email: {{ email }}</p>
</ion-content>

Conclusión

En esta sección, hemos aprendido cómo crear y utilizar páginas en Ionic, cómo navegar entre ellas y cómo pasar datos de una página a otra. Estos conceptos son fundamentales para construir aplicaciones móviles complejas y dinámicas. En el próximo módulo, exploraremos más sobre los componentes básicos y la navegación en Ionic.

Creando y Usando Páginas

Creación de una nueva página

Estructura de una página en Ionic

home.page.ts

home.page.html

home.page.scss

home.module.ts

Navegación entre páginas

Ejemplo de navegación

Pasar datos entre páginas

Ejemplo de pasar datos

Ejercicio práctico

Ejercicio

Solución

Conclusión

Curso de Desarrollo con Ionic

Módulo 1: Introducción a Ionic

Módulo 2: Componentes Básicos y Navegación

Módulo 3: Estilización y Tematización

Módulo 4: Trabajando con Datos

Módulo 5: Componentes y Funcionalidades Avanzadas

Módulo 6: Pruebas y Despliegue

Módulo 7: Temas Avanzados