Modulo-1.3.md

+# Sesió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:
+
+```ts
+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:
+
+```ts
+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.
+
+```html
+<p>Hola {{ nombre }}</p>
+```
+
+```ts
+nombre = 'Carlos';
+```
+
+La interpolación es de solo lectura.
+
+---
+
+## 7. Property Binding
+
+El property binding enlaza propiedades del DOM con valores del componente.
+
+```html
+<img [src]="imagenUrl">
+```
+
+```ts
+imagenUrl = 'assets/logo.png';
+```
+
+---
+
+## 8. Event Binding
+
+El event binding permite reaccionar a eventos del DOM.
+
+```html
+<button (click)="saludar()">Saludar</button>
+```
+
+```ts
+saludar() {
+  console.log('Evento capturado desde la plantilla');
+}
+```
+
+---
+
+## 9. Two-way Data Binding
+
+El two-way data binding mantiene sincronizados vista y componente.
+
+```html
+<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.
+
+```html
+<p *ngIf="activo">Usuario activo</p>
+```
+
+```ts
+activo = true;
+```
+
+---
+
+## 12. Directiva estructural `*ngFor`
+
+Permite iterar sobre colecciones.
+
+```html
+<li *ngFor="let item of items">{{ item }}</li>
+```
+
+```ts
+items = ['Angular', 'React', 'Vue'];
+```
+
+---
+
+## 13. Directiva de atributo `ngClass`
+
+Permite aplicar clases CSS de forma dinámica.
+
+```html
+<p [ngClass]="{ destacado: esDestacado }">Texto</p>
+```
+
+```ts
+esDestacado = true;
+```
+
+---
+
+## 14. Comunicación desde la plantilla al componente
+
+Los eventos capturados en la plantilla ejecutan lógica del componente.
+
+```html
+<button (click)="incrementar()">Incrementar</button>
+```
+
+```ts
+incrementar() {
+  this.contador++;
+}
+```
+
+---
+
+## 15. Uso de componentes dentro de plantillas
+
+Angular permite componer interfaces reutilizando componentes.
+
+```html
+<app-boton-primario></app-boton-primario>
+```
+
+---
+
+## 16. Paso de datos a componentes hijos
+
+Los datos se pasan a componentes hijos mediante `@Input`.
+
+```html
+<app-tarjeta [titulo]="tituloPrincipal"></app-tarjeta>
+```
+
+```ts
+@Input() titulo!: string;
+```
+
+---
+
+## 17. Envío de eventos desde componentes hijos
+
+Los componentes hijos pueden emitir eventos al componente padre mediante `@Output`.
+
+```ts
+@Output() confirmar = new EventEmitter<void>();
+```
+
+```html
+<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.
+