Ejemplo de Aplicación Básica

Ejemplo de Aplicación Básica

1.Configuración Inicial

Para comenzar, crea un nuevo proyecto Ionic:

ionic start myApp blank --type=angular
cd myApp

2.Crear un Componente

Generar una nueva página:

ionic generate page home

3.Editar home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  title: string = 'Welcome to Home Page';

  constructor(private alertController: AlertController) {}

  async showAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      subHeader: 'Important message',
      message: 'This is an alert!',
      buttons: ['OK']
    });

    await alert.present();
  }
}

Comentarios:
- HomePage es el componente principal de la página Home.
- title es una propiedad que almacena el título de la página.
- showAlert es una función que muestra una alerta utilizando AlertController.

4.Editar home.page.html

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

<ion-content class="ion-padding">
  <h2>{{ title }}</h2>
  <ion-button (click)="showAlert()">Show Alert</ion-button>
</ion-content>

5.Configurar la Navegación en app-routing.module.ts

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

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

Comentarios:
- routes define las rutas de la aplicación.
- Redirige la ruta vacía ('') a la página home.
- Carga el módulo de la página HomePage de manera perezosa (lazy load).