Lección 1 de 412 min
Angular: panorama y arquitectura
Framework frente a biblioteca, aplicaciones de una sola página, Angular CLI, componentes standalone y cómo se organiza un proyecto.
Imagina una tienda online: buscas un producto, lo añades al carrito, pasas a otra sección y el carrito sigue ahí, sin que la pantalla parpadee. Detrás hay mucho trabajo: pintar la interfaz, reaccionar a los clics, navegar, pedir datos al servidor, validar formularios. Un framework frontend te da todo eso organizado para que no tengas que reinventarlo en cada proyecto.
En este módulo aprenderás Angular, el framework de Google. Esta primera lección es el mapa: qué lo diferencia de una biblioteca, qué es una aplicación de una sola página, cómo se crea un proyecto con Angular CLI y cómo se organiza por dentro.
Frameworks, bibliotecas y aplicaciones de una sola página
Antes de escribir una línea de Angular conviene tener claros dos conceptos que aparecen en cualquier conversación sobre frontend.
Framework frente a biblioteca
A una biblioteca la llamas tú; un framework te llama a ti.
- Idea clave:
- Inversión de control
Una biblioteca es un conjunto de funciones que usas cuando quieres: tú controlas el flujo del programa y la llamas para una tarea concreta, como formatear una fecha o dibujar un gráfico. Un framework invierte esa relación: define la estructura de la aplicación y es él quien llama a tu código en el momento oportuno. A esto se le llama inversión de control.
En Angular nunca escribes new Tarjeta(): declaras el componente y Angular decide cuándo crearlo, cuándo actualizar su vista y cuándo destruirlo. React, en cambio, se presenta como una biblioteca para construir interfaces: el router, los formularios o la gestión de datos los eliges tú entre varias opciones.
Úsalo cuando
Un framework compensa cuando quieres convenciones comunes para todo el equipo y piezas que evolucionan juntas. Una biblioteca, cuando prefieres montar tu propia combinación o solo necesitas resolver una parte.
Ten en cuenta
La frontera no siempre es nítida: alrededor de React han surgido frameworks como Next.js. Lo que importa es quién manda en el flujo y cuántas decisiones te tocan a ti.
// Biblioteca: tú decides cuándo llamarla
import { format } from "date-fns";
const hoy = format(new Date(), "dd/MM/yyyy");
// Framework: Angular crea el componente y llama a tu código
@Component({
selector: "app-reloj",
template: `<p>{{ hora() }}</p>`,
})
export class Reloj implements OnInit {
hora = signal("");
// Angular llama a este método cuando el componente está listo
ngOnInit() {
this.hora.set(new Date().toLocaleTimeString());
}
}Aplicación de una sola página (SPA)
Una sola carga de HTML; después, JavaScript cambia la vista sin recargar.
- Siglas de:
- Single Page Application
En una web tradicional, cada clic en un enlace pide una página HTML nueva al servidor y el navegador la pinta desde cero. En una SPA (Single Page Application) el servidor entrega una página casi vacía y un paquete de JavaScript; a partir de ahí, la aplicación dibuja cada pantalla en el navegador y solo pide datos al servidor, normalmente en JSON.
Para que se comporte como una web normal, un router en el cliente cambia la URL con la History API del navegador y muestra el componente que corresponde. Así funcionan los botones de atrás y adelante, y puedes compartir el enlace a cualquier pantalla. Lo verás a fondo en la lección de Angular Router.
Úsalo cuando
En aplicaciones muy interactivas en las que el usuario pasa mucho rato: paneles de gestión, herramientas internas, clientes de correo o tiendas con carrito.
Ten en cuenta
La primera carga pesa más y, sin ayuda, los buscadores y las conexiones lentas ven una página en blanco hasta que llega el JavaScript. Para eso Angular ofrece renderizado en el servidor (SSR), que verás en la lección de rendimiento.
<!doctype html>
<html lang="es">
<head>
<title>Mi tienda</title>
<base href="/">
</head>
<body>
<!-- Casi vacío: Angular pinta toda la app aquí dentro -->
<app-root></app-root>
</body>
</html>Angular
El framework de Google para aplicaciones grandes, con TypeScript y «baterías incluidas».
- Mantiene:
- Lenguaje:
- TypeScript
- Licencia:
- MIT
Angular es un framework de código abierto mantenido por un equipo de Google. Usa TypeScript por defecto y viene con baterías incluidas: componentes, router, formularios, cliente HTTP, inyección de dependencias, internacionalización, renderizado en el servidor y herramientas de pruebas, todo diseñado y versionado a la vez.
En los últimos años se ha modernizado mucho: componentes standalone, señales, un control de flujo nuevo en las plantillas y detección de cambios sin Zone.js. Lo irás viendo en este módulo.
Úsalo cuando
Para aplicaciones medianas o grandes con equipos que agradecen convenciones fuertes: banca, administraciones públicas, intranets, paneles de gestión.
Ten en cuenta
Al principio tiene más conceptos que aprender que una biblioteca pequeña. Y como ha cambiado tanto, encontrarás tutoriales con APIs antiguas: comprueba siempre la documentación oficial en angular.dev.
import { Component, inject, signal } from "@angular/core";
import { RouterLink } from "@angular/router";
import { HttpClient } from "@angular/common/http";
import { ReactiveFormsModule } from "@angular/forms";Angular no es AngularJS
AngularJS (la versión 1.x, de 2010) estaba escrito en JavaScript y tenía otra arquitectura; ya no tiene soporte. En 2016 llegó Angular 2, una reescritura completa en TypeScript, y desde entonces se llama simplemente «Angular». Si un tutorial habla de $scope o de controladores, es AngularJS.
Angular CLI y la estructura de un proyecto
Angular CLI
La herramienta de línea de comandos que crea, sirve, genera y compila tu proyecto.
- Comando:
- ng
- Puerto de desarrollo:
- 4200
Angular CLI es el comando ng. Con ng new creas un proyecto con todo configurado: TypeScript, el sistema de build, las pruebas y la estructura de carpetas. Con ng serve arrancas un servidor de desarrollo que recompila y recarga el navegador cada vez que guardas.
ng generate (o ng g) crea piezas siguiendo las convenciones: componentes, servicios, guards, pipes… Y ng build compila la aplicación optimizada para producción en la carpeta dist/. Por debajo, las versiones recientes usan esbuild y Vite, que conocerás en el módulo de herramientas de build.
Úsalo cuando
Siempre que trabajes con Angular: para crear el proyecto, generar código, añadir librerías con ng add y actualizar de versión con ng update, que además aplica migraciones automáticas.
Ten en cuenta
Puedes instalarlo de forma global (npm install -g @angular/cli) o usarlo sin instalar con npx @angular/cli. Dentro de un proyecto, manda la versión de la CLI que figura en su package.json.
# Crear un proyecto nuevo
ng new tienda
# Servidor de desarrollo en http://localhost:4200
ng serve
# Generar un componente y un servicio
ng generate component productos/tarjeta
ng g service productos/carrito
# Compilar para producción en dist/
ng buildLa estructura de un proyecto
main.ts arranca, app.config.ts configura y app.routes.ts define las rutas.
- Entrada:
- main.ts
- Componente raíz:
- App
Un proyecto recién creado tiene una carpeta src/ con index.html, styles.css (los estilos globales) y main.ts, el punto de entrada: llama a bootstrapApplication() con el componente raíz y la configuración. Los archivos estáticos, como el favicon, van en public/.
Dentro de src/app/ están el componente raíz (app.ts, con su plantilla app.html y sus estilos app.css), app.config.ts, donde registras los proveedores globales (el router, la hidratación, los interceptores HTTP…), y app.routes.ts, con la lista de rutas. En proyectos creados con versiones anteriores verás nombres con sufijo, como app.component.ts.
Úsalo cuando
Cuando necesites algo para toda la aplicación sabrás a qué archivo ir: una ruta nueva, a app.routes.ts; un proveedor global, a app.config.ts.
Ten en cuenta
main.ts debería quedarse casi vacío. Si ves lógica de negocio ahí o en el componente raíz, falta repartirla en componentes y servicios.
// main.ts
bootstrapApplication(App, appConfig).catch((err) => console.error(err));
// app/app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
// aquí irán más proveedores globales
],
};
// app/app.routes.ts
export const routes: Routes = [
{ path: "", component: Inicio },
{ path: "productos", component: ListaProductos },
];Pruébalo
Si tienes Node.js instalado, ejecuta npx @angular/cli new prueba, entra en la carpeta y lanza npx ng serve. Abre src/ en tu editor: reconocerás cada archivo de esta sección.
Standalone, NgModules y versiones
Angular ha cambiado su forma de organizar el código. Conviene conocer las dos, porque convivirás con ambas durante años.
Componentes standalone
Cada componente declara por sí mismo lo que usa, sin módulos intermedios.
- En proyectos nuevos:
- Por defecto
Un componente standalone lista en su propiedad imports los componentes, directivas y pipes que aparecen en su plantilla. Es autosuficiente: puedes usarlo en otro componente con solo importarlo, cargarlo de forma diferida desde una ruta o probarlo aislado.
Es la forma por defecto desde hace varias versiones: ya no hace falta escribir standalone: true y ng generate component crea componentes standalone. La aplicación arranca con bootstrapApplication() y la configuración global vive en app.config.ts.
Úsalo cuando
En todo código nuevo: es lo que recomienda el equipo de Angular y lo que genera la CLI.
Ten en cuenta
Si usas un componente en la plantilla y olvidas añadirlo a imports, el compilador te dice que no reconoce el elemento. Es el error más común al empezar.
import { Component, input } from "@angular/core";
import { CurrencyPipe } from "@angular/common";
import { Valoracion } from "./valoracion";
@Component({
selector: "app-tarjeta",
imports: [CurrencyPipe, Valoracion],
template: `
<h3>{{ nombre() }}</h3>
<p>{{ precio() | currency: "EUR" }}</p>
<app-valoracion [estrellas]="4" />
`,
})
export class Tarjeta {
nombre = input.required<string>();
precio = input(0);
}NgModules
La forma clásica de agrupar componentes: un módulo los declara y los comparte.
- Estado:
- Soportado; no recomendado en código nuevo
Antes de standalone, cada componente debía declararse en un @NgModule. El módulo listaba sus componentes en declarations, los módulos que necesitaba en imports y lo que ofrecía a otros en exports. La aplicación arrancaba desde un AppModule raíz.
Los NgModules no están obsoletos y siguen funcionando, así que los encontrarás en muchos proyectos existentes y en algunas librerías. Las dos formas conviven: un componente standalone puede importar un NgModule, como ReactiveFormsModule, y al revés.
Úsalo cuando
Al mantener una aplicación que ya los usa. Para pasarla a standalone, Angular ofrece una migración automática: ng generate @angular/core:standalone.
Ten en cuenta
Con módulos, las dependencias de un componente quedan lejos, en otro archivo, y es fácil acabar con un SharedModule gigante que lo importa todo. Es una de las razones del cambio a standalone.
@NgModule({
// Componentes que pertenecen a este módulo
declarations: [App, Tarjeta, Valoracion],
// Módulos cuyas piezas usan sus plantillas
imports: [BrowserModule, ReactiveFormsModule],
// Componente con el que arranca la app
bootstrap: [App],
})
export class AppModule {}Versiones y soporte
Versiones mayores periódicas, migraciones con ng update y soporte a largo plazo (LTS).
- Soporte por versión:
- ~24 meses
- LTS:
- Solo parches críticos
Angular sigue el versionado semántico: una versión mayor puede romper compatibilidad; las menores y los parches, no. Durante años publicó una versión mayor cada seis meses; según su calendario oficial, desde la v22 el ritmo pasa a una al año, con varias versiones menores entre medias.
Cada versión mayor tiene unos 24 meses de soporte: primero un periodo activo, con actualizaciones normales, y después un periodo LTS (Long-Term Support), en el que solo recibe correcciones críticas y de seguridad. Pasado ese plazo ya no recibe parches.
Úsalo cuando
Para planificar el mantenimiento: reserva tiempo para actualizar de versión mayor al menos una vez al año y usa ng update, que aplica migraciones de código automáticas.
Ten en cuenta
Sube de una versión mayor en una, sin saltarte ninguna, y consulta la guía de actualización, que te dice qué cambia entre tu versión y la de destino.
# Qué se puede actualizar en este proyecto
ng update
# Pasar Angular a la siguiente versión mayor, con migraciones
ng update @angular/core @angular/cliInteractivo
Standalone frente a NgModules
Activa o desactiva opciones para compararlas cara a cara.
| Característica | Componentes standalone | NgModules |
|---|---|---|
| Dónde se declaran las dependencias | En el propio componente, con imports | En el @NgModule que declara el componente |
| Arranque de la app | bootstrapApplication(App, appConfig) | bootstrapModule(AppModule) |
| Configuración global | providers en app.config.ts | providers e imports del AppModule |
| Carga diferida de una ruta | loadComponent apunta a un componente | loadChildren apunta a un módulo |
| En proyectos nuevos | Lo que genera la CLI | Solo con ng new --standalone false |
Ponlo en práctica
Saber qué es cada cosa es la mitad del trabajo. La otra mitad es reconocer cuándo usarla.
Interactivo
¿Qué usarías?
Lee cada situación y elige la opción que mejor la resuelve. Fallar aquí no cuenta: es para practicar.
Necesitas crear diez componentes nuevos, cada uno con su plantilla, sus estilos y su test, siguiendo las convenciones del equipo.
Para recordar
- Un framework como Angular llama a tu código y trae resueltas las piezas comunes; a una biblioteca la llamas tú para una tarea concreta.
- En una SPA el servidor envía una página casi vacía y JavaScript dibuja cada pantalla; el router cambia la URL sin recargar.
- Angular CLI (
ng) crea, sirve, genera y compila el proyecto, yng updatete ayuda a cambiar de versión. main.tsarranca la app,app.config.tsregistra los proveedores globales yapp.routes.tsdefine las rutas.- Los componentes standalone son la norma en código nuevo; los NgModules siguen funcionando y los verás en proyectos existentes.
Comprueba lo aprendido
Cuestionario
Responde las 5 preguntas para completar la lección.
1.¿Qué diferencia mejor a un framework de una biblioteca?
2.En una SPA, ¿qué ocurre al pulsar un enlace interno?
3.Quieres registrar
provideRouter(routes)y otros proveedores para toda la aplicación. ¿En qué archivo van?4.¿Para qué sirve la propiedad
importsde un componente standalone?5.Tu aplicación usa una versión de Angular que está en LTS. ¿Qué significa?