Angular 21 de Cero a Experto / Fundamentos

Qué es Angular: el framework con baterías incluidas

Teoría20 min20 XP

Vienes de React, donde eliges tú mismo el router, la librería de estado, la de formularios, la de datos… React es una librería y tú ensamblas el resto. Angular invierte esa filosofía: es un FRAMEWORK completo y opinado que trae de fábrica router, formularios, cliente HTTP, inyección de dependencias y —desde Angular 16+— un sistema de reactividad propio (signals). Todo diseñado para encajar entre sí. Hoy entiendes qué es Angular, por qué existe, y por qué su versión 21 es un framework radicalmente distinto —y mejor— del que quizá viste hace años.

El restaurante a la carta vs el menú del chef

Ninguna filosofía es "mejor": son trade-offs. React te da flexibilidad y un ecosistema enorme; Angular te da consistencia y una respuesta oficial para casi todo. Como ya sabes React, tienes una ventaja enorme: los CONCEPTOS (componentes, estado reactivo, datos que bajan y eventos que suben, efectos, routing) son los mismos. Cambia la sintaxis y algunas piezas. Este curso se apoya constantemente en lo que ya sabes.

Angular hoy no es el Angular de hace 5 años

Si buscas Angular en internet, encontrarás tutoriales viejos llenos de NgModule, *ngIf, @Input() decoradores y zone.js. Todo eso cambió. Angular 21 es otro framework por dentro, y este curso enseña el MODERNO desde la primera línea —mostrándote siempre el "antes" para que entiendas el porqué del cambio (y para que sepas leer código viejo cuando lo encuentres en un proyecto real).

Anatomía de un componente

Un componente de Angular es una clase de TypeScript decorada con @Component. El decorador es metadata: le dice a Angular cómo se llama la etiqueta (selector) y qué HTML renderiza (template). La clase contiene la lógica y el estado:

hola.component.ts

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

@Component({
selector: 'app-hola',        // <app-hola></app-hola> en el HTML
standalone: true,            // en Angular 21 es el default (puedes omitirlo)
template: `
  <h1>¡Hola, {{ nombre }}!</h1>
  <p>Este es tu primer componente de Angular.</p>
`,
})
export class HolaComponent {
nombre = 'Miguel';           // una propiedad de la clase = estado del componente
}

Compáralo mentalmente con React: allá un componente es una FUNCIÓN que devuelve JSX; aquí es una CLASE con un template. La propiedad nombre de la clase es como una variable de estado, y {{ nombre }} en el template la inserta en la UI —igual que {nombre} en JSX, solo que con dobles llaves. Verás las diferencias a fondo en las próximas lecciones.

Antes (NgModules) vs Ahora (standalone)

Antes (Angular 15) vs Ahora (Angular 21)

Antes, cada componente tenía que declararse dentro de un NgModule —un archivo extra de pura ceremonia cuyo único trabajo era registrar componentes y sus dependencias:

antes.ts

// ANTES: un módulo solo para poder usar el componente
@NgModule({
declarations: [HolaComponent],
imports: [CommonModule],
exports: [HolaComponent],
})
export class HolaModule {}

Ahora el componente es STANDALONE: declara él mismo lo que necesita en su propio imports, y se acabó el módulo:

ahora.ts

// AHORA: el componente se basta solo, sin NgModule
@Component({
selector: 'app-hola',
imports: [],          // aquí van otros componentes/directivas que use
template: `...`,
})
export class HolaComponent {}

Por qué cambió: los NgModule eran la queja número uno de quienes empezaban con Angular —código repetitivo sin valor, difícil de razonar—. Standalone elimina esa capa: lo que un componente usa se ve en el propio componente, y el bundler puede descartar mejor lo que no se usa.

Crear un proyecto con la CLI

Angular trae una CLI oficial potentísima. Con un comando montas un proyecto completo con TypeScript, testing, linting y servidor de desarrollo ya configurados:

terminal

npm install -g @angular/cli      # instala la CLI globalmente
ng new mi-bolsillo               # crea el proyecto (te pregunta opciones)
cd mi-bolsillo
ng serve                         # servidor de dev en http://localhost:4200

La CLI también genera piezas por ti: ng generate component gastos crea el componente con su archivo, su test y todo el andamiaje. En este curso los ejemplos de Angular se muestran como código comentado y exacto (Angular necesita un compilador propio que no corre en un sandbox del navegador), pero la lógica pura en TypeScript sí la ejecutarás en vivo —y a partir del próximo módulo construirás piezas de Angular desde cero para entender cómo funcionan por dentro. Copia estos comandos en tu máquina y tendrás la app corriendo en localhost:4200 en menos de un minuto.

¿Cuál es la diferencia central entre React y Angular como herramientas?

Mini-reto

Sin escribir código todavía: 1) enumera tres piezas que en React elegiste tú (por ejemplo, tu router o tu librería de estado) y anota cuál sería su equivalente "de fábrica" en Angular; 2) abre la clase HolaComponent de arriba mentalmente y di cuál línea es "metadata" (la que decora) y cuál es "estado" (la propiedad de la clase); 3) si tienes Node instalado, corre ng new y explora la carpeta src/app que genera.

Qué sigue

Ya sabes qué es Angular y por qué su versión moderna es otra cosa. La próxima lección entra al componente standalone en detalle: el decorador @Component, el selector, la separación entre clase y template, y cómo un componente usa a otro. La pieza fundamental sobre la que se construye todo.