Crea tu primera app con Ionic y Angular

José María Agüero Atmitim

hace 1 día

¿Quieres dar tus primeros pasos en el desarrollo mobile sin complicarte demasiado? Con Ionic y Angular puedes crear aplicaciones híbridas que se ejecutan en iOS, Android y en la web desde un único código base. En este tutorial crearás tu primera app usando Standalone Components, la forma moderna de trabajar con Angular. Puedes echar un vistazo al post que escribí sobre Standalone Components si aún no has escuchado hablar de ellos.

1. ¿Por qué Ionic + Angular?

En un post anterior sobre Ionic puedes encontrar una buena introducción de lo que ofrece y cuáles son sus ventajas. Aún así aquí tienes un muy breve resumen:

Ionic proporciona componentes UI nativos (botones, menús, listas, modales…) con un look & feel moderno.
Angular es un framework sólido para estructurar tu aplicación, con bindings, servicios y routing. Además con la implementación de los componentes Standalone se elimina la necesidad de módulos, simplificando el código y acelerando el arranque.
Un solo código para Android, iOS y web.
Curva de aprendizaje suave si ya vienes de HTML, CSS y TypeScript.

2. Configuración inicial

Primero, asegúrate de tener Node.js instalado. Puedes comprobarlo así:

node -v
npm -v

Si no lo tienes instalado puedes hacerlo siguiendo las instrucciones del sitio web de Node.js.

Luego instala el CLI de Angular e Ionic globalmente:

npm install -g @angular/cli
npm install -g @ionic/cli

Nota: Si tienes problemas al instalar Ionic o Angular actualiza la versión de Node.js.

Para crear un nuevo proyecto:

ionic start myFirstApp blank --type=angular
cd myFirstApp
ionic serve

Desde las versiones de Angular 15 e Ionic 7, al crear un proyecto nuevo te preguntan si quieres usar Standalone Components o NgModules. Elige Standalone Componentes.

Esto abrirá tu app en el navegador en http://localhost:8100.

3. Estructura con Standalone

La estructura principal que genera por defecto Ionic con los componentes Standalone de Angular es la siguiente:

myFirstApp/
├── node_modules/   # Dependencias instaladas con npm
├── src/            # Código fuente principal
│   ├── app/        # Componentes, páginas y lógica de la app
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.routes.ts   # definición de rutas
│   │   └── home/
│   │       ├── home.page.html # Página Home creada por defecto
│   │       ├── home.page.scss
│   │       └── home.page.ts   # Componente standalone de Home
│   ├── assets/        # Imágenes, iconos, ficheros estáticos
│   ├── environments/  # Configuración para distintos entornos
│   ├── global.scss    # Estilos globales
│   ├── index.html     # HTML raíz
│   ├── main.ts        # Punto de entrada para arrancar la app
│   └── theme/         # Variables de estilo (colores, fuentes...)
│       └── variables.scss
├── .editorconfig
├── .gitignore
├── ionic.config.json      # Configuración del proyecto Ionic
├── angular.json
├── ionic.config.json
├── package.json           # Dependencias y scripts npm 
├── tsconfig.app.json
└── tsconfig.json          # Configuración de TypeScript

Al usar standalone, ya no hay app.module.ts. En su lugar tendrás:

main.ts que arranca la app con bootstrapApplication.
app.component.ts como componente raíz standalone.
app.routes.ts para definir las rutas.
Páginas creadas como componentes standalone (home).

Haz un pequeño cambio en el componente home para ver cómo queda en la aplicación:

src/app/home.page.ts

import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/angular/standalone';

@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
 imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
})
export class HomePage {
 constructor() {}
 message: string | null = null;

 showMessage() {
   this.message = '¡Felicidades! Has creado tu primera app con Ionic y Standalone Components.';
 }
}

src/app/home.page.html

<ion-header [translucent]="true">
 <ion-toolbar>
   <ion-title>
     Mi primera app en Ionic
   </ion-title>
 </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
 <ion-header collapse="condense">
   <ion-toolbar>
     <ion-title size="large">Mi primera app en Ionic </ion-title>
   </ion-toolbar>
 </ion-header>

 <h2>¡Hola mundo desde Ionic + Angular Standalone!</h2>
 <ion-button expand="block" (click)="showMessage()">Haz clic aquí</ion-button>
 @if (message) {
   <p >{{ message }}</p>
 }
</ion-content>

Verás que automáticamente en el navegador (http://localhost:8100/home) tendrás:

Y si haces click en el botón:

4. Navegación entre páginas

Genera una nueva página con el comando ionic generate page about. Esto genera el directorio about al mismo nivel que home con sus archivos correspondientes:

Puedes comprobar que el archivo app.routes.ts se ha modificado añadiendo el path correspondiente a la nueva página:

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

export const routes: Routes = [
 {
   path: 'home',
   loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
 },
 {
   path: '',
   redirectTo: 'home',
   pathMatch: 'full',
 },
 {
   path: 'about',
   loadComponent: () => import('./about/about.page').then( m => m.AboutPage)
 },
];

Añade un botón en home para poder navegar a la página que acabas de crear:

<ion-button expand="block" [routerLink]="['/about']">Ir a About</ion-button>

Nota: No olvides de importar RouterLink en home.page.ts.

import {RouterLink} from "@angular/router";

@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss'],
 imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton, RouterLink],
})

Con esto ya tienes todo lo necesario para poder navegar a la nueva página que has creado.

5. Estilos

Con Ionic puedes personalizar fácilmente por ejemplo en home.page.scss:

h2 {
  color: #3880ff;
  font-weight: bold;
}

ion-button {
  margin-top: 15px;
}

También puedes editar variables.scss para cambiar los colores globales de la app.

6. Extra: Consumir una API

Hasta ahora has trabajado con contenido estático, pero una app real casi siempre necesita traer datos desde Internet: noticias, productos, usuarios…

En Ionic + Angular puedes hacerlo de forma muy sencilla usando servicios y el módulo HttpClient, que ya viene incluido en el framework.

6.1. Definir un modelo de datos

Puedes empezar con una interfaz que represente los objetos que vas a recibir de la API. Para ello, crea un archivo post.model.ts dentro de src/app/models/:

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

6.2. Crear un servicio

Con el comando ionic generate service services/posts se genera el archivo correspondiente:

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

@Injectable({
 providedIn: 'root'
})
export class Posts {

}

A este archivo autogenerado añade el siguiente código para consumir una API pública de posts:

private API = 'https://jsonplaceholder.typicode.com/posts';
  constructor(private http: HttpClient) {}
  getPosts(): Observable<Post[]> {
    return this.http.get<Post[]>(this.API);
}

Este servicio se encargará de hacer las peticiones HTTP y devolver los datos.

Nota: No olvides actualizar el main.ts añadiendo al array de providers provideHttpClient().

6.3. Usar el servicio en la página Home

En home.page.ts, importa la interfaz y tipa la variable que almacena los posts. Además, añade los componentes de Ionic que vas a usar: IonList e IonItem.

import {Component, OnInit} from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonList, IonItem } from '@ionic/angular/standalone';
import {RouterLink} from "@angular/router";
import {Post} from "../models/post.model";
import {PostsService} from "../services/posts";

@Component({
 selector: 'app-home',
 templateUrl: './home.page.html',
 styleUrls: ['./home.page.scss'],
 standalone: true,
 imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonList, IonItem, RouterLink],
})
export class HomePage implements OnInit {
 message : string | null = null;
 posts: Post[] = []

 constructor(private postsService: PostsService) {}

 ngOnInit() {
   this.postsService.getPosts().subscribe(data => {
     this.posts = data.slice(0, 5); // Solo los 5 primeros
   });
 }

 showMessage() {
   this.message = '¡Felicidades! Has creado tu primera app con Ionic y Standalone Components.';
 }
}

6.4. Mostrar los datos en la vista

En home.page.html, usa ion-list y ion-item para mostrar los títulos de los posts:

<ion-list>
 @for (post of posts; track post.id) {
   <ion-item>
     {{ post.id }}. Título: {{ post.title }}
   </ion-item>
 }
</ion-list>

Finalmente podrás ver los cambios con la información de los posts obtenida de la API:

Conclusión

En este recorrido has aprendido a dar tus primeros pasos con Ionic y Angular con componentes Standalone:

Has configurado tu proyecto y entendido su nueva estructura sin NgModules.
Has creado páginas, añadido navegación y aplicado estilos.
Has consumido datos de una API externa usando buenas prácticas de tipado y la sintaxis moderna de Angular (@if y @for).

Con unas pocas líneas de código ya tienes en tus manos una app móvil multiplataforma que puedes ejecutar en tu navegador o en un dispositivo real.

A partir de aquí, te animo a seguir explorando más información sobre Ionic en la documentación oficial de Ionic, para integrar nuevas funcionalidades como autenticación, almacenamiento local o notificaciones.

Pronto podrás consultar en este blog sobre Capacitor que permite trabajar con funcionalidades nativas de Android e iOS directamente desde el proyecto en Ionic, y llevar tu proyecto al siguiente nivel.