¿Qué es el framework Angular?

¿Qué es el framework Angular?

Angular es un framework front-end completo basado en TypeScript desarrollado y mantenido por Google para construir aplicaciones web de página única, progressive web apps y (vía Capacitor o NativeScript) apps móviles. La línea de versión principal actual es Angular 17/18+ (2024-2026), que representa una modernización significativa respecto a versiones anteriores: componentes standalone por defecto, la nueva sintaxis de control flow (@if, @for, @switch), Signals como primitiva de reactividad, y mejoras de SSR/hidratación a través de Angular Universal.

Aclaración crítica: Angular NO es AngularJS. AngularJS (la línea 1.x, 2010-2018) es el framework original de Google y ahora está al final de su vida. Angular (2.x en adelante, lanzado en 2016) es una reescritura completa — lenguaje diferente (TypeScript vs. JavaScript), arquitectura diferente (basada en componentes vs. MVC + scopes), ecosistema diferente. La confusión de nombres es una de las peores en la historia de los frameworks web. Cuando alguien dice "Angular" hoy, casi siempre se refiere a Angular 2+ (actualmente 17/18+), no a AngularJS.

La filosofía Angular: completa por diseño

Donde React es intencionalmente mínimo (una librería UI que ensamblas en un framework mediante tus elecciones) y Vue se sienta en el medio (progresivo — núcleo mínimo con ecosistema opcional), Angular está en el extremo opuesto: incluye todo lo que necesitas para construir una app de producción como parte del framework.

Lo que viene en la caja:

• Framework de componentes — clases TypeScript con decoradores (@Component).
• Enrutamiento — Angular Router. Navegación SPA, lazy loading, guards de ruta, rutas anidadas.
• Cliente HTTP — HttpClient con interceptores, retry, observables.
• Formularios — tanto basados en plantilla como reactivos (FormBuilder, FormGroup, validators).
• Inyección de dependencias — primera clase. Servicios inyectados vía constructores.
• Observables RxJS — empaquetados e idiomáticos para streams asíncronos (HTTP, eventos, estado).
• Primitivas de gestión de estado — Signals (desde v17), servicios como contenedores de estado. NgRx es la alternativa de terceros estilo Redux.
• Internacionalización (i18n) — framework integrado para traducciones.
• Testing — TestBed para tests unitarios + de componente, integrado con Karma/Jasmine (o Jest via config).
• CLI — ng new, ng generate, ng build, ng test, ng serve. Tooling maduro y opinionado.
• SSR (Angular Universal) — renderizado del lado del servidor con hidratación.

El pitch: cualquier dos apps Angular se ven similares por dentro. Menos fatiga de decisión, más convenciones, onboarding más fácil de nuevos ingenieros. El coste: es mucho que aprender por adelantado.

El componente Angular moderno (post-v17)

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    @if (count() > 0) {
      <p>Count: {{ count() }}</p>
    }
    <button (click)="increment()">+</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(c => c + 1); }
}

Nota: standalone: true (no se necesita NgModule en Angular moderno), signal() como primitiva de reactividad (no RxJS BehaviorSubject), y el nuevo control flow @if (reemplazando *ngIf).

Angular vs. React vs. Vue (para elegir)

El sweet spot de Angular es organizaciones de ingeniería grandes con múltiples equipos — las convenciones reducen la varianza, y la inyección de dependencias escala a modelos de dominio complejos. Para equipos pequeños o productos en etapa temprana, el coste inicial a menudo excede el beneficio.

Trampas comunes de Angular

• Suscribirse a Observables sin cleanup. Fugas de memoria. Siempre desuscríbete vía takeUntilDestroyed o el pipe async. Las Signals lo resuelven en gran medida.
• NgModules masivos en código legacy. Las codebases pre-v15 tienen cientos de componentes en un módulo. Migra a componentes standalone.
• Estancamientos de change detection. Por defecto OnPush con Signals. Sin él, Angular ejecuta change detection en cada evento en cada componente.
• Arquitecturas de servicio sobreingenieradas. Los ingenieros con trasfondo enterprise a veces construyen jerarquías de servicios de 5 capas para lo que debería ser un solo archivo de 50 líneas. Resiste la sobre-abstracción.
• Inflación de bundle. Las apps Angular con 50 rutas pueden alcanzar 5MB+ si no se hace lazy load. Usa loadChildren para rutas y el analizador de bundle para rastrear regresiones.
• Confusión entre RxJS y Signals. Ambos existen; ambos son idiomáticos. Signals para estado de componente; RxJS para streams asíncronos (HTTP, eventos). No recurras a RxJS para reactividad simple de componente.
• Saltarse SSR hasta que es demasiado tarde. Añadir SSR retroactivamente es doloroso. Decide temprano; usa Angular Universal desde el día uno si el SEO importa.

Versiones de Angular y el calendario de releases

Google lanza versiones mayores cada 6 meses. Cada una se soporta durante 18 meses (las designaciones LTS varían). Cronología reciente:

• Angular 14 (2022) — componentes standalone introducidos (preview).
• Angular 15 (2022) — componentes standalone estables.
• Angular 16 (2023) — Signals (preview de desarrollador).
• Angular 17 (2023) — Signals estables, nuevo control flow, mejoras de hidratación.
• Angular 18 (2024) — preview zoneless, Material 3, vistas deferrables.

La cadencia de actualización es obligatoria si quieres parches de seguridad; el comando ng update maneja la mayoría de las migraciones de versión.

FAQ: Framework Angular

¿Debería aprender Angular en 2026?

Para mercados de trabajo específicos (grandes empresas, gobierno, finanzas), sí — Angular domina estos. Para startups y empresas product-led, React o Vue tienen pools de talento más grandes y iteración más rápida. Si trabajarás en una tienda IT Fortune 500, Angular es la apuesta más segura.

¿AngularJS es lo mismo que Angular?

No, son frameworks completamente diferentes. AngularJS (1.x) está al final de su vida. Angular (2+, actualmente 17/18) es el framework moderno. La migración de AngularJS a Angular es esencialmente una reescritura.

¿Necesito TypeScript para Angular?

Efectivamente sí. Angular está construido alrededor de decoradores y tipos TypeScript. Puedes escribir JavaScript pero lucharás constantemente contra el framework.

¿Cuál es la diferencia entre componentes standalone y NgModules?

Los NgModules eran la unidad de encapsulación original de Angular — una clase declarando componentes, servicios, imports, exports. Los componentes standalone (v15+) eluden los NgModules; cada componente importa sus propias dependencias. Los proyectos Angular modernos deberían usar standalone en todas partes.

¿Qué son las Signals en Angular?

Primitivas reactivas introducidas en v16/17. Como el ref de Vue o el state de React. const count = signal(0); count.set(5); actualiza computaciones dependientes y plantillas automáticamente. Las Signals reemplazan muchos patrones BehaviorSubject de RxJS para estado de componente.

¿Puede Angular hacer SSR?

Sí, vía Angular Universal. Las versiones recientes mejoraron la hidratación significativamente. Para apps SEO-críticas, habilita SSR desde el inicio; el retrofit es más difícil.

¿En qué se diferencia NgRx del estado integrado de Angular?

NgRx es una librería de estado de terceros estilo Redux, común en grandes apps Angular enterprise. Las signals + servicios integrados de Angular son suficientes para la mayoría de las apps. Recurre a NgRx solo cuando tengas estado complejo de múltiples características que necesite acciones explícitas y depuración time-travel.

Cómo se relaciona LoadFocus con aplicaciones Angular

Las apps Angular tienden a ser más grandes que las apps React/Vue — los tamaños de bundle empiezan en torno a 150KB y crecen con la superficie de características. Las pruebas de velocidad de sitio web LoadFocus validan los Core Web Vitals de Angular en dispositivos y ubicaciones. Las pruebas de carga validan que los endpoints API que tu HttpClient de Angular llama aguantan bajo tráfico concurrente realista — la optimización de bundle en Angular no ayuda si el backend se cae.