1.1 Historia

Es importante conocer un poco la historia de Angular, ya que originalmente, la primera versión se llamaba AngularJS debido a que estaba basado en Javascript.

Tal como se puede ver, desde la versión 2 se reescribió para hacer uso de TypeScript.

1.2 Arquitectura básica de Angular

Una aplicación Angular se compone principalmente de:

• Componentes (Component): representan las pantallas o partes visuales. En la documentación oficial existe mucha información acerca de cómo funcionan, por lo que es recomendable ir a ella para ver todos los detalles.
• Servicios (Service): contienen la lógica o manipulan datos.
• Plantillas (templates): definen el HTML de cada componente.
• Rutas (Routing): gestionan la navegación entre páginas.

Estos elementos trabajan juntos siguiendo el patrón MVC (Modelo - Vista - Controlador) adaptado al entorno web.

En las últimas versiones de Angular los componentes por defecto son standalone (facilita la migración a otras aplicaciones) mientras que anteriormente eran de tipo NgModule.

2.1 Instalar Node

Desde la web para descargar Node, tenemos distintas opciones a elegir:

• Versión: Node.js cuenta con distintas versiones, que varían en su ciclo de vida y de mantenimiento. Algunas de las versiones son nombradas como LTS (Long Term Support, con soporte a largo plazo), ideales para usar en servidores.
• Sistema operativo: Debemos elegir el sistema donde queremos realizar la instalación.
• Sistema de instalación: Dependiendo del sistema operativo, podemos elegir distintas maneras de instalar Node. Podemos destacar:
  • NVM: node versión manager, es un gestor de versiones de Node. Nos permite tener distintas versiones instaladas en el mismo equipo, por lo que es ideal si desarrollamos con él.
  • Docker: para desarrollar usando imágenes Docker.
  • Brew: Es un gestor para instalar aplicaciones en MacOS, para no tener que ir a cada web para descargarlos. También nos facilita poder actualizarlas desde el propio gestor.
  • Chocolatey: Es un gestor para poder instalar aplicaciones en Windows desde la línea de comandos.
• Gestor de paquetes: Junto con Node se pueden instalar distintos gestores de paquetes, que después usaremos durante el desarrollo de nuestras aplicaciones.
  • npm: es el gestor de paquetes utilizado por defecto con Node.js. Originalmente creado por Isaac Z. Schlueter, hoy en día está bajo el amparo de Github.
  • yarn: la alternativa más extendida a npm, creado en una colaboración entre Facebook, Google y otras compañías.

Aparte de estos sistemas más “modernos”, en la propia web se puede descargar un instalador clásico para cada sistema.

2.2 Instalar Angular CLI

Tras instalar Node, vamos a instalar el cliente de consola de Angular. Para ello usaremos el gestor de paquetes npm:

ruben@vega:~$ npm install -g @angular/cli

ruben@vega:~$ npm -g ls
/home/ruben/.nvm/versions/node/v24.8.0/lib
├── @angular/cli@20.3.6
└── npm@11.6.0

ruben@vega:~$ ng version
Angular CLI: 20.3.6
Node: 24.8.0
Package Manager: npm 11.6.0
OS: linux x64

De esta manera tenemos instalado, de manera global, el CLI de Angular, por lo que ya podremos crear nuestra primera aplicación.

2.3 Desarrollar con Docker

Para no depender del sistema operativo, y poder realizar cambios de versiones en cualquier momento, se va a explicar cómo desarrollar usando Docker y Visual Studio Code como IDE (en inglés Integrated Development Environment, o entorno integrado de desarrollo).

Si estamos en un entorno Windows, se recomienda realizar lo siguiente desde un WSL, teniendo en cuenta el rendimiento de los sistemas de ficheros.

ruben@vega:~$ docker run  -it --name angular -p 4200:4200 \
--entrypoint /bin/bash -v "$(pwd):/workdir" --workdir /workdir node:24
root@a1d346824085:/workdir#

Los parámetros explicados:

• -p 4200:4200: por defecto es el puerto que se usa con Angular.
• --entrypoint /bin/bash: por defecto, la imagen ejecuta como entrypoint el comando node, y de esta manera lo sobreescribimos para usar /bin/bash al entrar en el contenedor.
• -v "$(pwd):/workdir": para enlazar el directorio en el que estamos como volumen persistente de datos, y configurado en la ruta /workdir dentro del contenedor.
• --workdir /workdir: el directorio que usamos al entrar en el contenedor.

Para poder desarrollar con Visual Studio Code dentro del contenedor vamos a necesitar la extensión remote development. Una vez instalada, nos aparecerá un nuevo icono en el lateral del IDE y podremos ver los contenedores que tenemos arrancados:

Con esta extensión podemos conectarnos al contenedor, se nos abrirá una nueva ventana del IDE, y desde ahí podremos abrir el directorio /workdir que está dentro del contenedor.

3.1 Estructura del proyecto

Una vez creado el proyecto podremos comprobar cómo se ha creado una estructura de directorios y ficheros donde estará nuestra aplicación. Es interesante comprobar cómo también nos ha generado un repositorio GIT con el primer commit ya generado.

Dentro de la estructura generada podemos destacar:

• angular.json: Es el fichero de configuración de nuestra aplicación. A pesar de no entender algunos aspectos de la configuración es conveniente echar un ojo, ya que otros son auto-explicativos.
• node_modules: El directorio donde se guardan las dependencias que necesita nuestro proyecto. Este directorio está ignorado en GIT.
• package.json: Es el fichero que contiene qué dependencias necesita nuestro proyecto, indicando la versión, si es para desarrollo o producción, y los scripts necesarios para ejecutar/“compilar”/testear nuestra aplicación.
• public: Es el directorio donde podemos guardar assets públicos.
• src: El directorio donde se va a guardar el código de nuestra aplicación. Vamos a detallar algunos de los ficheros que hay dentro de este directorio.
  • index.html: Es la plantilla principal del HTML que se va a generar alrededor de nuestra aplicación.
  • styles.scss: Son los estilos generales de nuestra aplicación. Más adelante hablaremos de ello.
  • app: Es el directorio donde van a estar los componentes y el código de nuestra aplicación. En el siguiente tema se detallará más.
    • app.routes.ts: Es el fichero de rutas a las que se puede acceder en nuestra aplicación. Más adelante se explicará cómo funcionan las rutas.

3.2 Ejecutar aplicación

Para ejecutar el proyecto recién creado, entramos al directorio y ejecutamos ng serve:

ruben@vega:~/pruebas $ ng serve --host 0.0.0.0
Initial chunk files | Names         | Raw size
main.js             | main          | 47.75 kB | 
styles.css          | styles        | 96 bytes | 
polyfills.js        | polyfills     | 95 bytes | 

                    | Initial total | 47.94 kB

Application bundle generation complete. 
[1.336 seconds] - 2025-10-23T16:19:11.364Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server 
per-request transformations.
  -  Local:   http://localhost:4200/
  -  Network: http://172.17.0.2:4200/
  -  press h + enter to show help

Si abrimos nuestro navegador en la dirección indicada http://localhost:4200, veremos lo siguiente:

6.1 Estructura de un componente

Un componente está formado por los siguientes ficheros:

• .css / .scss: Estilos propios del componente, para que de esta manera sea independiente a otros. Dependiendo del formato elegido al generar el proyecto, serán pre-procesados para generar un CSS válido.
• .html: Es la plantilla del componente, en formato HTML, donde se mostrará lo que queremos visualizar.
• .spec.ts: Fichero para realizar pruebas unitarias.
• .ts: Contiene la lógica y la clase del componente.

Al crear nuestra aplicación se ha generado el componente principal llamado app-root que está dentro del directorio src/app/.

En el fichero src/app/app.ts del proyecto tendremos:

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})

Podemos destacar:

• selector: es la manera que usaremos para posteriormente visualizar nuestro componente.
• imports: posibles importaciones que tendrá nuestro componente. Más adelante hablaremos de ello.
• templateUrl: fichero de plantilla HTML. En lugar de ser un fichero, podría ser código HTML directamente, pero para componentes grandes perderíamos facilidad de modificación.
• styleUrl: fichero de estilos. De nuevo, se podrían poner aquí los estilos.

6.2 Vistas con plantillas

Angular usa un sistema de enlace de datos (data binding) que permite conectar la lógica con la vista, pudiendo mostrar variables en la vista o llamar a funciones de la clase desde la vista.

Desde Angular 16, para las variables que van a cambiar en el tiempo, se hace uso de signals para rastrear cómo y dónde se cambian los estados de una aplicación. De esta manera el framework optimiza las actualizaciones en el renderizado de las vistas.

Las signals pueden contener cualquier tipo de dato, que puede ser leído a través de la función getter, y pueden ser tanto de lectura-escritura o de sólo lectura.

export class App {
  contador = signal(0);
}

<p>{{contador()}}</p>

export class App {
  contador = signal(0);
  public isDisabled = signal(false);
}

<button [disabled]="isDisabled()">
  Pulsa
</button>

incrementar() {
  this.contador.update((n) => n + 1);
}

<button [disabled]="isDisabled()"
        (click)="incrementar()">
  Pulsa
</button>

@if (isGod()) {
  <h2>God settings</h2>
  <!-- ... -->
} @else if (isAdmin()){
  <h2>Admin settings</h2>
  <!-- ... -->
} @else{
  <h2>User settings</h2>
  <!-- ... -->
}

@switch (userPermissions) {
  @case ('admin') {
    <app-admin-dashboard />
  }
  @case ('reviewer') {
    <app-reviewer-dashboard />
  }
  @case ('editor') {
    <app-editor-dashboard />
  }
  @default {
    <app-viewer-dashboard />
  }
}

frutas = ['Manzana', 'Pera',
          'Naranja', 'Banana',
          'Kiwi'];

@for (fruta of frutas; track fruta;
      let idx = $index) {
  <p class="{{$even ? 'even':''}}">
    {{fruta}} + {{idx}}
  </p>
}

import { DatePipe,
    DecimalPipe,
    CurrencyPipe,
  } from '@angular/common';

<!--Jan 1, 2025 -->
<p>{{"2025-01-01" | date}}</p>
<!--1,234.0000 -->
<p>{{ 1234 | number:'1.4' }}</p>
<!--€1,234.00 -->
<p>{{ 1234 | currency:'EUR' }}</p>

@let i = 1;
<p>{{i+i}}</p> <!--2 -->

6.3 Crear un componente

Para crear un componente nuevo vamos a hacer uso del CLI. Para ver todas las opciones se puede usar ng generate --help

ruben@vega:~/pruebas $ ng generate component prueba
CREATE src/app/prueba/prueba.scss (0 bytes)
CREATE src/app/prueba/prueba.spec.ts (528 bytes)
CREATE src/app/prueba/prueba.ts (186 bytes)
CREATE src/app/prueba/prueba.html (21 bytes)

Tal como se puede ver en la salida del comando, nos ha generado los cuatro ficheros dentro del directorio src/app/prueba. Cada componente es independiente y se mantiene en su directorio.

6.4 Uso de componentes

Para visualizar un componente creado debemos añadirlo a la vista donde queramos que aparezca, pudiendo ser la vista principal o la de otro componente.

Para añadirlo, usaremos el nombre que le hayamos dado en el apartado selector al componente, y lo añadiremos como una etiqueta HTML más.

<app-prueba />

export class App {
  listado = [1, 2, 3];
}

<app-prueba [lista]="listado"/>

export class Prueba {
  lista = input<number[]>([3,2,1]);
}

@if (lista().length > 0) {
  @for (item of lista();track item){
    <p>{{item}}</p>
  }
} @else {
  <p>Sin elementos en la lista</p>
}

export class HomePage {
  contador = signal(0);
  incrementar() {
    this.contador.update(
      (n) => n + 1
    );
  }
}

<p>{{contador()}}</p>
<button [disabled]="isDisabled()"
        (click)="incrementar()">
    Pulsa
</button>
<app-prueba
    [lista]="listado"
    [(contador)]="contador"/>

export class Prueba {
  contador = model<number>(0);

  incrementar() {
    this.contador.update((n) => n+1);
  }
}

<p>{{contador()}}</p>

<button (click)="incrementar()">
    Pulsa
</button>

6.5 Proyección de contenido con ng-content

Es posible que necesitemos crear componentes que sólo van a ser contenedores de contenido, en los que quizá no exista ninguna lógica aparte del aspecto visual. Para estos casos existe ng-content.

Desde el componente padre llamamos al componente hijo añadiendo contenido, y en el hijo simplemente ponemos ng-content para visualizarlo.

<custom-card>
  <p>Contenido proyectado</p>
</custom-card>

<div class="card-shadow">
  <ng-content />
</div>

6.6 Ciclo de vida de un componente

Cada componente Angular pasa por una serie de fases o hooks desde que se crea hasta que se destruye, lo que es conocido como el lifecycle del componente.

El ciclo de vida varía ligeramente al crearse el componente o durante sus actualizaciones posteriores. La explicación para todos los hooks se pueden encontrar en la documentación oficial.

Vamos a especificar las funciones más importantes que se ejecutan durante la creación/ejecución del componente. Tal como se puede ver en el dibujo previo, el ciclo de vida de los componentes varía en función de si es recién creado o si detecta alguna actualización:

7.1 Configuración básica del router

Para usar el sistema de rutas, debemos asegurar que provideRouter está en la configuración principal (app.config.ts) y se importa un conjunto de rutas, en este caso a través del fichero app.routes.ts.

import { ApplicationConfig, provideBrowserGlobalErrorListeners,
         provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes)
  ]
};

En el componente principal app deberíamos tener la configuración y en su template lo siguiente:

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

@Component({
  imports: [RouterOutlet],
  // ...
})

<router-outlet />

La directiva es un marcador de posición que indica la ubicación donde el enrutador debe renderizar el componente para la URL actual. Con los siguientes apartados se entenderá mejor

7.2 Ejemplo de rutas y navegación básica

Para entender cómo se crean las rutas necesarias de nuestra aplicación, vamos a suponer que nuestra aplicación cuenta con las siguientes URLs:

• /: página principal de la aplicación.
• /home: página principal del usuario.
• /login: página para poder loguearnos en la aplicación.

Para ello, en el fichero de rutas (app.routes.ts) añadiremos lo siguiente:

import { Routes } from '@angular/router';
import { Home } from './home/home';
import { Login } from './user/login/login';

export const routes: Routes = [
    {
        path: 'home',
        component: Home,
        title: 'Home Page'
    },
    {
        path: 'login',
        component: Login,
        title: 'Login Page'
    }
];

El apartado title de la configuración es opcional y sirve para modificar el título de la página, para que así sea más accesible.

Para poder navegar entre las rutas creadas se va a usar RouterLink, por lo que en el template de nuestro componente principal vamos a crear unos enlaces de la siguiente manera:

<ul>
  <li>
    <a routerLink="/home">Home</a>
  </li>
  <li>
    <a routerLink="/login">Login</a>
  </li>
</ul>
<router-outlet />
<div id="footer">footer</div>

Y añadiendo un poco de CSS para pruebas, nuestra vista debería quedar tal como aparece en la imagen.

7.3 Definir parámetros en la URL

En las aplicaciones web actuales es habitual tener URLs parametrizadas, que son rutas dinámicas que posibilitan mostrar datos diferentes teniendo en cuenta los parámetros de la URL.

Vamos a hacer un ejemplo con URLs del estilo:

• /user/:id/:social: nos mostrará la red :social del usuario :id.
• /user/:id: donde :id es el parámetro y que nos mostrará la página del usuario concreto.

Debemos añadir las rutas para que llamen a los componentes correspondientes:

export const routes: Routes = [
    {
        path: 'user/:id/:social',
        component: Social
    },
    {
        path: 'user/:id',
        component: UserProfile
    },
];

Y ahora en los componentes correspondientes se debe realizar la lectura de los parámetros para poder ser usados. Para ello se va a usar ActivatedRoute

import { ActivatedRoute } from '@angular/router';
// ...
export class UserProfile {
  readonly id: string | null;
  private route = inject(ActivatedRoute);

  constructor() {
    this.id = this.route.snapshot.paramMap.get('id');
  }
}

7.4 Ruta Wildcard

Para manejar URLs inexistentes, se debe usar la ruta comodín **, y debe colocarse la última dentro del array de rutas en el fichero app.routes.ts.

export const routes: Routes = [
  //...
  {
      path: '**',
      component: NotFound
  },
];

7.5 Orden de las rutas

Aunque no se ha dicho explícitamente, las rutas deben tener un orden concreto para que el funcionamiento sea el esperado. El router de Angular evalúa las rutas de arriba hacia abajo, siguiendo el orden en que aparecen en el array de configuración.

Cuando el usuario navega a una URL, Angular busca la primera ruta que coincide con ese patrón, y deja de buscar. Es por eso que es importante poner las rutas más específicas antes.

Comunicación cliente-servidor

9.1 Crear servicio

Para crear un servicio el CLI de Angular nos ofrece el siguiente comando:

ruben@vega:~/pruebas $ ng generate service calculadora

Y nos ha creado el fichero src/app/calculadora.ts que contiene:

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class Calculadora { }

Tal como se puede ver, tenemos:

• Import del decorator @Injectable() que es parte del core de Angular.
• Al usar @Injectable({ providedIn: 'root' }) en el servicio:
  • Crea una única instancia (singleton) para toda tu aplicación.
  • La hace disponible en todas partes sin necesidad de configuración adicional.
  • Habilita la eliminación de código muerto (tree-shaking) para que el servicio solo se incluya en el paquete JavaScript generado si realmente se utiliza.

En la clase creada en el servicio se pueden crear las funciones que necesitemos.

9.2 Inyectar servicio en un componente

Para inyectar nuestro servicio en un componente debemos hacer uso de inject() e importar el servicio.

import { Component, inject } from '@angular/core';
import { Calculadora } from '../calculadora';
//...
export class Prueba {
  calculadora = inject(Calculadora);
  suma = this.calculadora.sumar(2, 3);
}

Tal como se puede ver, se ha hecho la inyección del servicio y se ha llamado a la función sumar que se ha creado en el servicio.

10.1 Crear servicio para API

Vamos a crear un nuevo servicio llamado “Cliente” para realizar las peticiones a la API en las que se han incluido dos funciones. Para el ejemplo se ha utilizado la API de eventos culturales de OpenData Euskadi:

import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class Cliente {
  private http = inject(HttpClient);
  private apiUrl = "https://api.euskadi.eus/culture/events/v1.0";
  data = null;
  page = 0;
  elements = 20;

  get_events(): Observable<any[]> {
    this.page = this.page + 1;
    return this.http.get<any>(this.apiUrl+
        '/events?_elements='+this.elements+
        '&_page='+this.page);
  }

  get_event(id:number): Observable<any[]> {
    this.page = this.page + 1;
    return this.http.get<any>(this.apiUrl+
        '/events/'+id);
  }
}

En el código anterior se ha hecho uso de any como tipo de objeto de la respuesta, pero lo ideal sería tener en cuenta el modelo de datos recibido y tenerlo en cuenta.

10.2 Usar servicio de API

Una vez tengamos nuestro servicio creado, es momento de hacer uso de él y ver que funciona.

En este nuevo componente vamos a hacer que al ir a la URL correspondiente se realice la llamada para obtener todos los eventos. La idea es que al cargar el componente, a través de la función constructor() se realiza la llamada a la función del servicio que obtiene todos los eventos, y también lo manda a la consola de log para asegurar que está funcionando.

Por otro lado, en la plantilla se recorre el objeto obtenido en formato JSON y mostramos a modo de ejemplo el nombre del evento. Para ello, modifica la clase y la plantilla:

export class Events {
  cliente = inject(Cliente);
  data: any = signal(null);
  
  constructor() {
    this.cliente.get_events()
      .subscribe((response) => {
        this.data.set(response);
        console.log(this.data());
    });
  }
}

@if (data()) {
  @for (event of data().items;
    track event.id;
    let idx = $index) {
    <h3>
      <a href="/events/{{event.id}}">
      {{event.nameEs}}
      </a>
    </h3>

    <hr/>
  }
}

Con esto ya tendríamos el listado de todos los eventos recogidos a través de una función que llama a una API externa.

10.3 Uso de state para reutilizar datos

Dependiendo de cómo funcione la API a la que llamemos, es posible que hayamos obtenido los objetos completos, por lo que quizá no sea necesario volver a llamar a la API en ciertas situaciones.

Vamos a continuar con el ejemplo y visualizar un evento concreto. Al obtener el listado de eventos, pueden pasar dos cosas:

• Obtener sólo el título del evento y su identificador único: obtendríamos un listado de títulos e IDs, por lo que al querer visualizar un evento, tendríamos que volver a llamar a la API para obtener los datos de ese evento concreto.
• Obtener eventos y datos completos del listado: al obtener el listado de eventos, obtendríamos para cada evento todos los datos completos. Este es el caso de OpenData Euskadi, por lo que tenemos los datos de cada evento.

Estamos ante dos situaciones distintas:

1. Si venimos de la navegación de la aplicación, tenemos los datos del evento, por lo que podemos visualizarlos directamente.
2. Si venimos de la recarga de la web o de un acceso directo, no tenemos los datos, sólo tenemos el :id, por lo que hay que realizar la petición a la API.

Desde el componente Events, donde obtenemos todos, vamos a realizar un pequeño cambio para usarrouter.navigate y state para pasar el objeto.

export class Events {
  //...
  goto_event(event: any) {
    this.router.navigate(
      ['/events', event.id],
      { state: { event } }
    );
  }
}

<li>
  <a (click)="goto_event(event)">
    +Info
  </a>
</li>

En el nuevo componente vamos a comprobar lo siguiente:

• Obtenemos la ruta actual y comprobamos si tenemos el state del evento.
  • Eso significaría que venimos del otro componente.
  • Asignamos a la variable local el state para visualizarlo en la plantilla.
• En caso contrario:
  • Obtenemos el id de la URL
  • Llamamos a la función del servicio de la API para obtener el evento correspondiente.

import { Component, inject, signal } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Cliente } from '../cliente';
//...
export class Event {
  private router = inject(Router);
  private route = inject(ActivatedRoute);
  cliente = inject(Cliente);
  event = signal<any | null>(null);

  constructor() {
    const nav = this.router.currentNavigation();
    const stateEvent = nav?.extras?.state?.['event'];

    if (stateEvent) {
      this.event.set(stateEvent);
      console.log("Event from state:", stateEvent);
    } else {
      // cogemos el parámetro de la ruta
      const id = Number(this.route.snapshot.paramMap.get('id'));
      this.cliente.get_event(id).subscribe({
        next: (data) => this.event.set(data),
        error: (err) => console.error('Error cargando evento', err)
      });
    }
  }
}

10.4 Generar cliente API automáticamente

A la hora de crear una API habría que hacer uso de la especificación OpenAPI (OAS), para generar los archivos de interfaz que son legibles por máquinas para describir, producir, consumir y visualizar servicios web REST. Si la API que generamos sigue el estándar, generar un servicio que lo consuma puede ser automático, y lo mismo sucede al revés.

Si miramos la web de eventos culturales de OpenData Euskadi, que hemos usado previamente, veremos que tiene el logotipo OAS. El enlace donde podemos ver la especificación de la API es el siguiente: cultural-events.json. Partiendo de este fichero vamos a generar nuestro cliente automáticamente.

Tenemos que instalar el paquete OpenAPI Generator con nuestro gestor de paquetes npm:

ruben@vega:~/pruebas $ npm install @openapitools/openapi-generator-cli -g

Ahora podemos generar en nuestro proyecto Angular el nuevo servicio que automáticamente generará las funciones para llamar a la API:

ruben@vega:~/pruebas $ openapi-generator-cli generate \
 -i https://opendata.euskadi.eus/.../cultural-events.json \
 -g typescript-angular -o src/app/api

Al comando se le pasan los siguientes parámetros:

• generate: para generar el servicio.
• -i: se le indica el fichero o URL que contiene la especificación OpenAPI. En el ejemplo anterior se ha acortado la URL por motivos de espacio.
• -g: qué generador vamos a usar, en este caso [typescript-angular]
• -o: dónde vamos a guardar el resultado

Si ahora queremos hacer uso del nuevo servicio, en el componente Events vamos a cambiar todo lo que habíamos añadido del servicio Cliente (el antiguo servicio) para que aparezca el nuevo servicio:

import { EventsService } from '../api';

export class Events {
  //...
  private eventsService = inject(EventsService)
  
  constructor() {
    this.eventsService.findEvents().subscribe((response) => {
      this.data = response;
      console.log(this.data);
    });
  }
}

Como se puede apreciar, los cambios son menores, importar el nuevo servicio, inyectarlo y hacer uso de las nuevas funciones auto-generadas.

Introducción a Typescript

11.1 Ventajas de usar TypeScript

Entre las ventajas que nos podemos encontrar al usar TypeScript, se pueden destacar las siguientes:

• Detección de errores en tiempo de desarrollo gracias al tipado.
• Código más legible y mantenible.
• Autocompletado y ayuda contextual en el editor (por ejemplo, VS Code).
• Compatibilidad total con JavaScript: cualquier código JS válido también lo es en TS.

13.1 Tipos simples

TypeScript cuenta con tres tipos de datos simples:

• string: para representar cadenas de texto
• number: para tipos numéricos. No existe distinción como en otros lenguajes para int o float, aunque sí existe para bigint. También soporta números en binario, octal y hexadecimal:
• boolean: para tipos que sólo pueden ser true o false.

Existen otros tipos de datos especiales:

• any: desactiva el control de tipos. Se recomienda evitarlo salvo en casos especiales (uso de código que no se ha escrito en TypeScript, o librerías de terceros).
• unknown: es la contrapartida a any, ya que aunque puede ser de cualquier tipo, mantiene el tipado seguro.
• undefined: se puede asignar a cualquier tipo, pero es un tipo propio.
• null: igual que el anterior.

const nombre: string = "Rubén";
const pi: number = 3.1415;
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
let activado: boolean = true;

13.2 Tipos complejos

Existen otros tipos de datos, también habituales en otros lenguajes de programación.

// se infiere que el tipo es number[]
let prueba = [1, 2, 3];
// define un array con elementos de tipo number
let prueba2: number[] = [1,2, 3];
// usa la clase Array, indicando que contendrá datos number
let prueba3: Array<number> = [1, 2, 3];

// definir la tupla
let ejemplo: [number, boolean, string];
// inicializar con datos correctos
ejemplo = [5, false, 'Mi texto'];
let direccion: [calle: string, n: number];

const coche: { marca: string, year?: number } = {
  marca: "Toyota"
};
car.year = 2000;

interface Rectangle {
  height: number,
  width: number
}
interface ColoredRectangle extends Rectangle {
  color: string
}
const coloredRectangle: ColoredRectangle = {
  height: 20,
  width: 10,
  color: "red"
};

type Rol = "admin" | "usuario" | "invitado";
let rolActual: Rol = "usuario";

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

enum Direction {
  Up = "UP",
  Down = "DOWN",
}

14.1 Estructuras condicionales

A continuación las estructuras condicionales más habituales. Como en otros lenguajes de programación, se pueden hacer uso de los operadores lógicos && (AND), || (OR) y ! (NOT). También existe la posibilidad de utilizar el operador ternario: condition ? siTrue : siFalse .

A la hora de manejar una gran cantidad de condiciones, en lugar de usar if-else, lo ideal es hacer uso del sistema switch-case .

También tenemos las palabras reservadas break para salir de la función y default que se ejecutará cuando no coincide con ninguno de los casos expresados.

let num: number = 20;
if (num > 18) {
  console.log("Mayor");
}

let num: number = 10;
if (num > 18) {
  console.log("Mayor");
} else {
  console.log("Menor");
}

let num: number = 20;
if (num < 18) {
  console.log("Pequeño");
} else if (num > 65) {
  console.log("Muy mayor");
}

let num: number = 18;
switch(num){
  case 7:
    console.log("Siete");
    break;
  default:
    return "Otro numero";
}

14.2 Bucles

Existen distintos tipos de bucles. El bucle for es utilizado cuando conocemos previamente el número de veces que queremos itera, y también se puede utilizar para recorrer un array.

Dentro de los bucles, y utilizando una condicional, podemos usar continue si queremos omitir parte del bucle y saltar a la siguiente iteración.

for (let i = 0; i < 5; i++) {
  console.log(`Contador ${i}`);
}

const frutas: string[] = ["Manzana", "Pera"];
for (let i = 0; i < frutas.length; i++) {
  console.log(`Fruta ${i + 1}: ${frutas[i]}`);
}

const frutas: string[] =
      ["Manzana", "Pera"];
for (const f of frutas) {
  console.log(`Fruta: ${f}`);
}

const p = {
  name: "Ruben",
  job: "Teacher"
};
for (const key in p) {
  console.log(`${key}:
      ${p[key as keyof typeof p]}`
  );
}

Existe la variante for…of que nos permite iterar sobre los elementos de colecciones, como son los Arrays ([]), Strings (“”), Mapas (Map) y Conjuntos (Set). Y para poder iterar entre las propiedades de un objeto existe for…in, de esta manera tendremos acceso a sus posibles key y values.

También podemos hacer uso de bucles while y do-while.

while (condición) {
  // Código
}

do {
  // Código
} while (condición);

16.1 Herencia

Como en otros lenguajes de programación orientada a objetos, también se permite la herencia de una clase “padre”. Se permite expandir la funcionalidad con:

• implements: en la documentación se explica su uso, que sirve para comprobar que se satisface una interface concreta.
• extends: para extender una clase padre. La nueva clase contiene todos los atributos y métodos de la clase original, pudiendo añadir nuevos miembros.