Compunet 3 · Exposición

Angular

Framework moderno para crear aplicaciones web escalables con TypeScript.

Compunet 32 sep 2026

Agenda · 20 minutos · 5 bloques

Cómo va la sesión

Qué es Angular y qué problema resuelve~3 min
Arquitectura: componentes, templates y carpetas~4 min
Data binding, control de flujo y formularios~5 min
Servicios, DI, HTTP, RxJS y routing~5 min
CLI, demo, criterios de uso y preguntas~3 min

Bloque 1 · Introducción

¿Qué es Angular?

Framework de desarrollo web basado en TypeScript, mantenido por Google.
Permite construir aplicaciones dinámicas, especialmente Single Page Applications.
Organiza la app por componentes reutilizables: vista, lógica, datos y estilos.
Incluye herramientas oficiales para rutas, formularios, HTTP, testing y compilación.

La idea central: Angular propone una arquitectura completa para que equipos grandes puedan construir, escalar y mantener una aplicación sin inventar todo desde cero.

Comparación mínima: React se enfoca en la UI; Angular trae más decisiones resueltas por defecto.

Bloque 1 · Modelo mental

Angular piensa en capas

Capa	Qué hace	Ejemplo
Componente	Controla una parte de la pantalla.	`ProductListComponent`
Template	Define lo que ve el usuario y cómo se conecta con los datos.	`{{ name }}`, `[disabled]`, `(click)`
Servicio	Guarda lógica reutilizable: datos, API, reglas de negocio.	`ProductService`
Router	Maneja navegación entre pantallas sin recargar toda la página.	`/product/:id`
CLI	Crea proyectos, genera archivos y compila la aplicación.	`ng new`, `ng generate`, `ng serve`

Bloque 2 · Arquitectura

Componentes y standalone

Componente = clase TypeScript + @Component + template + estilos.
Divide la interfaz en piezas pequeñas: lista, tarjeta, formulario, detalle, navbar.
Standalone: el componente declara sus propios imports y puede usarse sin un NgModule.
Ventaja: menos configuración inicial y una estructura más directa para proyectos nuevos.

product-list.component.ts

@Component({
  selector: 'app-product-list',
  imports: [RouterLink, FormsModule, CurrencyPipe],
  templateUrl: './product-list.component.html'
})
export class ProductListComponent { }

Bloque 2 · Estructura del proyecto

Archivos que vas a ver

main.ts: punto de arranque de la aplicación.
app.config.ts: configuración general: router, providers, HTTP.
app.routes.ts: mapa de rutas de la app.
*.component.ts/html/css: lógica, vista y estilos de cada componente.
angular.json y package.json: configuración del proyecto y dependencias.

estructura típica

src/
 └─ app/
    ├─ app.component.ts
    ├─ app.component.html
    ├─ app.config.ts
    ├─ app.routes.ts
    └─ features/
       └─ products/
          ├─ product-list.component.ts
          └─ product.service.ts
main.ts
angular.json
package.json

Bloque 3 · Templates

Data binding

Interpolación — {{ valor }} muestra una variable.
Property binding — [disabled]="x" cambia una propiedad del DOM.
Event binding — (click)="fn()" ejecuta una función por un evento.
Two-way binding — [(ngModel)]="x" sincroniza input y variable.

template.html

<h2>{{ title }}</h2>

<button [disabled]="loading"
        (click)="save()">
  Guardar
</button>

<input [(ngModel)]="filterText" />

Bloque 3 · Templates

Control de flujo: @for / @if

@if muestra una parte de la vista solo si se cumple una condición.
@for recorre listas y renderiza un bloque por cada elemento.
track le dice a Angular cómo identificar cada item para actualizar mejor.
@empty permite mostrar un mensaje cuando la lista está vacía.

template moderno

@if (loading()) {
  <p>Cargando...</p>
} @else {
  @for (product of products(); track product.id) {
    <article>{{ product.name }}</article>
  } @empty {
    <p>No hay productos.</p>
  }
}

Bloque 3 · Formularios

Formularios y validación

Angular tiene soporte oficial para template-driven forms y reactive forms.
Permite validar campos requeridos, formatos, longitudes y reglas personalizadas.
En proyectos grandes, los reactive forms ayudan porque el formulario vive como modelo en TypeScript.
Uso típico: registro, login, filtros, checkout, edición de perfiles y paneles administrativos.

reactive form

form = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', Validators.email)
});

save() {
  if (this.form.valid) console.log(this.form.value);
}

Bloque 4 · Servicios

Servicios e inyección de dependencias

Un servicio concentra lógica reutilizable: datos, llamadas a API o reglas de negocio.
providedIn: 'root' lo registra para toda la aplicación como singleton.
La inyección de dependencias entrega el servicio donde se necesita, sin crear instancias manualmente.
Resultado: componentes más limpios y código más fácil de probar.

product.service.ts

@Injectable({ providedIn: 'root' })
export class ProductService {
  getProducts() { return this.http.get<Product[]>('/api/products'); }
}

constructor(private productService: ProductService) {}

Bloque 4 · Datos externos

HttpClient y RxJS

HttpClient permite hacer peticiones GET, POST, PUT, DELETE.
Usualmente devuelve un Observable: un flujo asíncrono de datos.
RxJS permite transformar, combinar y manejar errores en esos flujos.
En una app real: Angular pide datos a un backend y actualiza la interfaz cuando llegan.

product.service.ts

getProducts(): Observable<Product[]> {
  return this.http.get<Product[]>('/api/products');
}

this.productService.getProducts()
  .subscribe(products => this.products.set(products));

Bloque 4 · Navegación

Routing

provideRouter(routes) configura las rutas en aplicaciones standalone.
<router-outlet /> marca dónde aparece el componente de la ruta activa.
routerLink permite navegar desde el HTML.
Los parámetros como product/:id permiten pantallas dinámicas.

app.routes.ts

export const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: 'product/:id', component: ProductDetailComponent },
  { path: '**', redirectTo: '' }
];

Bloque 4 · Reactividad

Signals

signal() guarda un valor reactivo.
computed() crea valores derivados que se recalculan cuando cambia una dependencia.
Angular puede saber con más precisión qué parte de la vista debe actualizar.
Útil para filtros, contadores, estados de carga y datos calculados en pantalla.

product-list.component.ts

readonly filterText = signal('');
readonly products = signal<Product[]>([]);

readonly filteredProducts = computed(() =>
  this.products().filter(p =>
    p.name.includes(this.filterText())
  )
);

Bloque 5 · Herramientas

Angular CLI

Antes de instalar: tener Node.js y npm.
ng new crea un proyecto nuevo con estructura inicial.
ng generate crea componentes, servicios y otros archivos.
ng serve corre la app localmente; ng build compila para producción.

comandos básicos

node -v
npm -v
npm install -g @angular/cli
ng version

ng new mi-app
ng generate component product-list
ng serve

Bloque 5 · Demo CLI

Creando un proyecto con Angular CLI

https://youtu.be/DYKT6YRMkdU

Bloque 5 · Criterio técnico

¿Cuándo conviene Angular?

Situación	Angular encaja mejor si...	Cuidado con...
Equipo grande	Se necesita una arquitectura uniforme y reglas comunes.	La curva inicial puede ser más alta.
Aplicación empresarial	Hay formularios, rutas, permisos, dashboards y consumo constante de APIs.	Puede ser demasiado pesado para una landing simple.
Mantenibilidad	Importa separar componentes, servicios y responsabilidades.	Hay que respetar la estructura; improvisar rompe sus ventajas.
Comparación breve	Angular trae más herramientas oficiales integradas.	React puede sentirse más flexible para proyectos pequeños o altamente personalizados.

Bloque 5 · Demo

Demo — catálogo de productos

Lista de productos con filtro de búsqueda en vivo.
Detalle de producto usando una ruta con parámetro.
Servicio para separar datos de la interfaz.
Signals para estado local y valores derivados.
Binding y control de flujo dentro del template.

terminal

cd 02-demo/product-catalog
npm install
npx @angular/cli serve
# → http://localhost:4200

Cierre · Ideas clave

Conclusiones

Angular es una plataforma completa: componentes, rutas, formularios, HTTP, CLI y testing.
Su fortaleza no es solo crear interfaces, sino ordenar aplicaciones complejas.
La curva de aprendizaje viene de sus conceptos propios: decoradores, DI, RxJS, routing y forms.
Cuando el proyecto crece, esa estructura puede ahorrar decisiones repetidas y reducir inconsistencias.
Comparación honesta: no reemplaza a React en todo; Angular gana cuando la prioridad es arquitectura integrada.

Gracias

¿Preguntas?

angular.dev · Demo: catálogo de productos