En esta página

Angular 21: el framework, CLI y primer proyecto

15 min lectura TextoCap. 1 — Fundamentos

Qué es Angular?

Angular es un framework completo para construir aplicaciones web. A diferencia de librerias como React o Vue, Angular incluye todo lo que necesitas: routing, formularios, HTTP client, testing, SSR e inyección de dependencias.

En su versión 21, Angular ha madurado enormemente:

  • Componentes standalone por defecto (sin NgModules)
  • Signals como primitiva reactiva principal
  • Nuevo control flow en templates (@if, @for, @switch)
  • SSR y pre-rendering integrados
  • Zoneless change detection (experimental)

Instalar Angular CLI

Angular CLI es la herramienta de linea de comandos para crear y gestionar proyectos:

# Instalar globalmente
npm install -g @angular/cli

# Verificar la versión
ng versión

Crear un proyecto

El comando ng new genera un proyecto completo con todas las configuraciones:

ng new mi-primera-app

Angular 21 te preguntara por:

  • Formato de estilos (CSS, SCSS, etc.)
  • SSR (Server-Side Rendering)

La estructura generada incluye:

mi-primera-app/
  src/
    app/
      app.ts              # Componente raiz
      app.routes.ts       # Rutas de la aplicación
    index.html            # Punto de entrada HTML
    main.ts               # Bootstrap de la app
    styles.css            # Estilos globales
  angular.json            # Configuración del proyecto
  tsconfig.json           # Configuración de TypeScript
  package.json            # Dependencias

El componente raiz

Toda aplicación Angular tiene un componente raiz (App). Es el punto de entrada que contiene el layout principal y el <router-outlet> para renderizar las páginas.

Comandos esenciales del CLI

Comando Descripcion
ng serve Servidor de desarrollo con HMR
ng build Compilar para producción
ng generate component nombre Generar un componente
ng generate service nombre Generar un servicio
ng test Ejecutar tests
ng e2e Tests end-to-end

Angular vs otros frameworks

Caracteristica Angular React Vue
Tipo Framework completo Libreria Framework progresivo
Lenguaje TypeScript obligatorio JavaScript/TypeScript JavaScript/TypeScript
Reactividad Signals useState/hooks ref/reactive
Routing Integrado React Router (externo) Vue Router (externo)
HTTP HttpClient integrado fetch/axios (externo) fetch/axios (externo)
DI Integrado Context API provide/inject

Filosofia de Angular 21

Angular 21 sigue la filosofia de simplicidad sin sacrificar potencia:

  1. Menos boilerplate — Sin NgModules, sin decoradores extras
  2. Reactividad granular — Signals reemplazan Zone.js gradualmente
  3. Rendimiento por defecto — OnPush, lazy loading, SSR integrado
  4. Developer experience — CLI potente, mensajes de error claros, HMR rápido

Práctica

  1. Crea tu primer proyecto: Ejecuta ng new mi-practica en la terminal y explora la estructura de archivos generada. Identifica el componente raiz y el archivo de rutas.
  2. Modifica el componente raiz: Cambia el titulo en app.ts y agrega un segundo enlace de navegacion en el template. Verifica los cambios con ng serve.
  3. Genera un componente: Usa ng generate component saludo para crear un nuevo componente y renderizalo dentro del template del componente raiz.

En la siguiente leccion aprenderemos a crear componentes standalone, la unidad fundamental de Angular.

Angular CLI
Instala Angular CLI globalmente con: npm install -g @angular/cli. Luego crea un proyecto con ng new mi-app. Angular 21 configura SSR, signals y componentes standalone por defecto.
Requisitos previos
Necesitas Node.js 20+ y conocimientos básicos de TypeScript. Angular 21 usa TypeScript 5.9 con inferencia de tipos avanzada. 
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [RouterOutlet],
  template: `
    <header>
      <h1>{{ título }}</h1>
      <nav>
        <a routerLink="/">Inicio</a>
        <a routerLink="/about">Acerca de</a>
      </nav>
    </header>
    <main>
      <router-outlet />
    </main>
  `,
  styles: `
    header {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
    }
    nav { display: flex; gap: 0.5rem; }
  `,
})
export class App {
  readonly título = 'Mi primer proyecto Angular';
}