imunnicSesión 3 – Patrón arquitectónico, plantillas y data binding en Angular
1. Patrón arquitectónico utilizado por Angular
Angular utiliza una arquitectura basada en componentes, inspirada en el patrón MVVM (Model–View–ViewModel), aunque no lo implementa de forma estricta.
No se trata de un MVC clásico, sino de un modelo adaptado a las necesidades de las aplicaciones SPA modernas.
2. Por qué Angular no sigue MVC clásico
El patrón MVC (Model–View–Controller) define tres capas claramente separadas:
- Model: datos y lógica de negocio
- View: representación visual
- Controller: intermediario entre modelo y vista
En Angular:
- No existe un controlador como entidad independiente
- La lógica de interacción reside en el componente
- La vista contiene lógica declarativa mediante enlaces y directivas
Por este motivo, Angular no encaja en un MVC tradicional.
3. Aproximación de Angular al patrón MVVM
Angular se aproxima conceptualmente al patrón MVVM de la siguiente forma:
| MVVM | Angular |
|---|---|
| View | Plantilla HTML del componente |
| ViewModel | Clase del componente |
| Model | Datos, servicios y lógica de negocio |
3.1. View
La vista corresponde a la plantilla HTML del componente. En ella se definen:
- Interpolaciones
- Enlaces de propiedades
- Enlaces de eventos
- Directivas estructurales y de atributo
La vista no contiene lógica de negocio, únicamente lógica declarativa.
3.2. ViewModel
El componente actúa como ViewModel:
- Expone propiedades públicas
- Expone métodos que reaccionan a eventos
- Mantiene el estado necesario para la vista
Ejemplo:
export class PerfilComponent {
nombre = 'Ana';
activo = true;
cambiarEstado() {
this.activo = !this.activo;
}
}3.3. Model
El modelo se distribuye entre distintos elementos:
- Interfaces de datos
- Servicios
- Estado compartido
Ejemplo:
export interface Usuario {
id: number;
nombre: string;
}4. Data binding como eje del patrón
El data binding es el mecanismo central que conecta la vista con el componente:
- Los cambios en el componente se reflejan automáticamente en la vista
- Las acciones del usuario modifican el estado del componente
Este flujo bidireccional es característico del patrón MVVM.
5. Plantillas como capa de presentación
La plantilla representa la capa de presentación del componente y se define mediante HTML enriquecido por Angular.
Las plantillas permiten:
- Mostrar datos del componente
- Capturar eventos del usuario
- Aplicar lógica declarativa
- Componer la interfaz mediante otros componentes
6. Interpolación de datos
La interpolación permite mostrar valores del componente directamente en la plantilla.
<p>Hola {{ nombre }}</p>nombre = 'Carlos';La interpolación es de solo lectura.
7. Property Binding
El property binding enlaza propiedades del DOM con valores del componente.
<img [src]="imagenUrl">imagenUrl = 'assets/logo.png';8. Event Binding
El event binding permite reaccionar a eventos del DOM.
<button (click)="saludar()">Saludar</button>saludar() {
console.log('Evento capturado desde la plantilla');
}9. Two-way Data Binding
El two-way data binding mantiene sincronizados vista y componente.
<input [(ngModel)]="nombre">
<p>{{ nombre }}</p>Este mecanismo combina property binding y event binding.
10. Directivas en Angular
Las directivas permiten modificar el DOM o el comportamiento de los elementos.
Se distinguen principalmente:
- Directivas estructurales
- Directivas de atributo
11. Directiva estructural *ngIf
Permite renderizar elementos de forma condicional.
<p *ngIf="activo">Usuario activo</p>activo = true;
12. Directiva estructural *ngFor
Permite iterar sobre colecciones.
<li *ngFor="let item of items">{{ item }}</li>items = ['Angular', 'React', 'Vue'];
13. Directiva de atributo ngClass
Permite aplicar clases CSS de forma dinámica.
<p [ngClass]="{ destacado: esDestacado }">Texto</p>esDestacado = true;14. Comunicación desde la plantilla al componente
Los eventos capturados en la plantilla ejecutan lógica del componente.
<button (click)="incrementar()">Incrementar</button>incrementar() {
this.contador++;
}15. Uso de componentes dentro de plantillas
Angular permite componer interfaces reutilizando componentes.
<app-boton-primario></app-boton-primario>16. Paso de datos a componentes hijos
Los datos se pasan a componentes hijos mediante @Input.
<app-tarjeta [titulo]="tituloPrincipal"></app-tarjeta>@Input() titulo!: string;17. Envío de eventos desde componentes hijos
Los componentes hijos pueden emitir eventos al componente padre mediante @Output.
@Output() confirmar = new EventEmitter<void>();<button (click)="confirmar.emit()">Confirmar</button>18. Arquitectura basada en componentes
Angular adopta un enfoque component-driven, donde cada componente encapsula:
- Vista
- Estado
- Comportamiento
La comunicación se realiza mediante inputs, outputs y servicios, favoreciendo una arquitectura mantenible y escalable.
A continuación se presenta la Sesión 3 reorganizada, manteniendo exactamente el mismo contenido, pero comenzando por el patrón arquitectónico, tal y como se solicita.
No se añade ni se elimina contenido; únicamente se reordena para que el marco conceptual preceda a los mecanismos técnicos (plantillas y data binding), lo cual es pedagógicamente más sólido.