Ionic Mini Manual

Este manual interactivo te ayudará a comprender y utilizar los comandos y la estructura básica de un proyecto Ionic. ¡Explora cada sección para aprender a crear y gestionar tu aplicación!

---

Tabla de Contenidos

• Ionic Mini Manual
  • Tabla de Contenidos
  • Comandos Principales
  • Estructura del Proyecto
  • Creación de Módulo, Componente y Page
    • 1. Generar un Módulo
    • 2. Generar una Página (Componente)
    • 3. Generar un Componente (para usar en el Módulo)
  • Shared Module
  • Navegación entre Componentes
  • Configuración de TypeScript
  • Conclusión

---

Comandos Principales

Utiliza los siguientes comandos para iniciar y gestionar tu aplicación Ionic:

# Crear una nueva aplicación
ionic start my-app

# Ejecutar la aplicación
ionic serve

# Crear un módulo con soporte para rutas
ionic g m my-module --routing

# Crear un componente (sin archivo de pruebas)
ionic g c my-component --spec=false

Notas:

• ionic start crea una nueva aplicación.
• ionic serve inicia el servidor de desarrollo.
• ionic g m genera un módulo; al usar --routing, se añade soporte para rutas.
• ionic g c crea un componente; la opción --spec=false omite la creación del archivo de pruebas.

---

Estructura del Proyecto

A continuación, se muestra una estructura de carpetas recomendada para organizar tu aplicación:

src/
├── app/
│   ├── module/
│   │   ├── components/
│   │   └── pages/
│   ├── models/        # Interfaces y tipos
│   ├── services/
│   └── shared/
│       ├── component/
│       └── pages/
│           └── not-found/

Tip: Utiliza esta estructura como guía para mantener tu proyecto limpio y organizado.

---

Creación de Módulo, Componente y Page

1. Generar un Módulo

• Importar IonContent en el módulo:

  import { IonContent } from '@ionic/angular/standalone';

2. Generar una Página (Componente)

• Configuración:

  • La página se crea como no standalone (standalone: false).
  • Debe declararse en el módulo correspondiente.

• Registrar la Ruta en el Routing Module:

  { path: '', component: HomeComponent },

• Registrar la Ruta en App Routes (para carga perezosa):

  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(module => module.HomeModule),
  }

• Vista: Utiliza <ion-content> como contenedor principal:

  <ion-content>
    <!-- Contenido de la página -->
  </ion-content>

3. Generar un Componente (para usar en el Módulo)

• Configuración:
  • El componente se crea como no standalone.
  • Debe declararse en el módulo correspondiente.

Ver ejemplo interactivo

---

Shared Module

Los componentes compartidos que se utilizarán en toda la aplicación se organizan en un Shared Module:

1. Generar el Módulo (sin routing).
2. Crear un Componente:
   • Se crea como no standalone.
   • Se declara y se exporta en el módulo.
3. Uso del Componente:
   • Importa el SharedModule en el módulo donde necesites el componente.
4. Página NotFound (componente standalone):
   • Nota: Un componente standalone funciona como un módulo.
   • Genera el componente.
   • En el decorador @Component, importa IonContent y RouterModule.
   • Registrar la Ruta en App Routes para manejar rutas no existentes:

     {
       path: '**', // cualquier ruta que no exista
       loadComponent: () => import('./shared/pages/not-found/not-found.component')
                          .then(module => module.NotFoundComponent)
     }

   • Vista: Redirecciona utilizando routerLink:

     <ion-content>
       <button class="button-back" [routerLink]="['/']">Back</button>
     </ion-content>

---

Navegación entre Componentes

Para navegar entre diferentes páginas o componentes:

1. Configuración:
   • En el módulo correspondiente (o en un componente standalone), importa RouterModule.
2. Uso de [routerLink]:
   • Ejemplo:

     <a [routerLink]="['/store/home']">Ir a Home</a>

---

Configuración de TypeScript

Para permitir la declaración de variables sin inicializarlas previamente, ajusta las opciones en el archivo tsconfig.json dentro de compilerOptions:

{
  "compilerOptions": {
    "strictPropertyInitialization": false,
    "strictNullChecks": false
  }
}

---

Conclusión

Este manual interactivo te ofrece una guía clara y estructurada para trabajar con Ionic, desde la creación de la aplicación hasta la organización de módulos y navegación. ¡Explora, experimenta y sigue creando aplicaciones impresionantes!

Manual creado y optimizado para mejorar la experiencia visual e interactiva del desarrollador.

---

Puedes copiar este contenido en un archivo con extensión `.md` para disponer de un mini manual más atractivo y funcional. ¿Te gustaría agregar o modificar algún otro detalle?