El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Creant i Utilitzant Pàgines

Següent ►
►

En aquest tema, aprendrem com crear i utilitzar pàgines en una aplicació Ionic. Les pàgines són components essencials en qualsevol aplicació, ja que representen les diferents vistes o pantalles que l'usuari pot veure i interactuar.

Objectius

  • Entendre què són les pàgines en Ionic.
  • Aprendre a crear noves pàgines.
  • Navegar entre pàgines utilitzant el sistema de navegació d'Ionic.

Què és una Pàgina en Ionic?

Una pàgina en Ionic és un component Angular que representa una vista o pantalla de l'aplicació. Cada pàgina té el seu propi fitxer HTML, CSS i TypeScript, i es pot navegar entre elles utilitzant el sistema de navegació d'Ionic.

Creant una Nova Pàgina

Pas 1: Generar una Pàgina

Ionic CLI proporciona una manera fàcil de generar noves pàgines. Utilitza el següent comandament per crear una nova pàgina:

ionic generate page NomDeLaPagina

Per exemple, per crear una pàgina anomenada Home, executa:

ionic generate page Home

Aquest comandament crearà una nova carpeta home dins del directori src/app/ amb els següents fitxers:

  • home.module.ts
  • home.page.html
  • home.page.scss
  • home.page.ts
  • home-routing.module.ts

Pas 2: Entendre l'Estructura de la Pàgina

  • home.page.html: Conté el codi HTML de la pàgina.
  • home.page.scss: Conté els estils CSS específics per a la pàgina.
  • home.page.ts: Conté la lògica TypeScript de la pàgina.
  • home.module.ts: Defineix el mòdul Angular per a la pàgina.
  • home-routing.module.ts: Defineix les rutes per a la pàgina.

Pas 3: Editar la Pàgina

Obre el fitxer home.page.html i afegeix el següent codi per crear una interfície bàsica:

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

<ion-content>
  <ion-button (click)="navigateToDetails()">Go to Details</ion-button>
</ion-content>

En el fitxer home.page.ts, afegeix la lògica per navegar a una altra pàgina:

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

  navigateToDetails() {
    this.navCtrl.navigateForward('/details');
  }
}

Navegació entre Pàgines

Pas 1: Configurar les Rutes

Obre el fitxer src/app/app-routing.module.ts i afegeix la ruta per a la nova pàgina:

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

Pas 2: Crear la Pàgina de Destí

Genera una nova pàgina anomenada Details:

ionic generate page Details

Edita el fitxer details.page.html per mostrar un missatge simple:

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

<ion-content>
  <p>This is the details page.</p>
</ion-content>

Exercici Pràctic

Exercici 1: Crear una Pàgina de Perfil

  1. Genera una nova pàgina anomenada Profile.
  2. Edita el fitxer profile.page.html per mostrar informació bàsica del perfil.
  3. Afegeix un botó a la pàgina Home per navegar a la pàgina Profile.
  4. Configura les rutes necessàries en app-routing.module.ts.

Solució

  1. Genera la pàgina Profile:
ionic generate page Profile
  1. Edita profile.page.html:
<ion-header>
  <ion-toolbar>
    <ion-title>
      Profile
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p>This is the profile page.</p>
</ion-content>
  1. Afegeix un botó a home.page.html:
<ion-button (click)="navigateToProfile()">Go to Profile</ion-button>
  1. Afegeix la lògica de navegació a home.page.ts:
navigateToProfile() {
  this.navCtrl.navigateForward('/profile');
}
  1. Configura les rutes en app-routing.module.ts:
{
  path: 'profile',
  loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule)
}

Conclusió

En aquesta secció, hem après com crear i utilitzar pàgines en una aplicació Ionic. Hem vist com generar noves pàgines, editar-les i configurar la navegació entre elles. Aquestes habilitats són fonamentals per construir aplicacions mòbils complexes amb múltiples vistes i funcionalitats. En el proper mòdul, explorarem més components bàsics d'Ionic i com utilitzar-los per enriquir les nostres aplicacions.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats