Modulo-1.2.md

+# Sesión 2 – Estructura de un proyecto Angular (arquitectura moderna)
+
+## 1. Organización general de un proyecto Angular
+
+Un proyecto Angular moderno adopta una arquitectura **standalone-first**, en la que la aplicación se construye a partir de componentes independientes y una configuración global basada en providers. La estructura del proyecto busca separar responsabilidades de forma clara, facilitando la escalabilidad y el mantenimiento.
+
+Estructura general del proyecto:
+
+```text
+primer-proyecto-angular/
+├── src/
+├── angular.json
+├── tsconfig.json
+├── package.json
+```
+
+La carpeta `src` concentra todo el código relacionado con la aplicación.
+
+---
+
+## 2. Carpeta `src` como núcleo de la aplicación
+
+```text
+src/
+├── app/
+├── assets/
+├── environments/
+├── index.html
+├── main.ts
+├── styles.css
+```
+
+Dentro de `src/app` se define la arquitectura interna de la aplicación.
+
+---
+
+## 3. Carpeta `app` y estructura interna recomendada
+
+En Angular moderno no existe una estructura única obligatoria, pero es habitual organizar la aplicación por **responsabilidad técnica y funcional**. Una estructura base habitual es la siguiente:
+
+```text
+app/
+├── componentes/
+├── vistas/
+├── servicios/
+├── interceptores/
+├── pipes/
+├── utils/
+├── models/
+├── app.component.ts
+├── app.config.ts
+```
+
+La carpeta `models` se añade para centralizar todas las **interfaces y tipos de datos** que representan el modelo de la aplicación. Esta organización permite escalar la aplicación sin generar acoplamientos innecesarios.
+
+---
+
+## 4. Carpeta `componentes`
+
+La carpeta `componentes` contiene **componentes reutilizables**, normalmente independientes del contexto de navegación.
+
+Características habituales de estos componentes:
+
+* No representan páginas completas
+* Se reutilizan en distintas vistas
+* Encapsulan una parte concreta de la interfaz
+
+Ejemplos de componentes típicos:
+
+* Botones personalizados
+* Cabeceras
+* Modales
+* Tarjetas
+* Formularios reutilizables
+
+Ejemplo de estructura:
+
+```text
+componentes/
+├── boton-primario/
+│   ├── boton-primario.component.ts
+│   ├── boton-primario.component.html
+│   └── boton-primario.component.css
+```
+
+Estos componentes suelen declararse como `standalone`.
+
+---
+
+## 5. Carpeta `vistas`
+
+La carpeta `vistas` agrupa los **componentes que representan páginas completas** de la aplicación y que normalmente están asociadas a rutas.
+
+Características principales:
+
+* Representan pantallas o secciones completas
+* Orquestan componentes reutilizables
+* Se vinculan al sistema de enrutado
+
+Ejemplo de estructura:
+
+```text
+vistas/
+├── home/
+│   ├── home.component.ts
+│   ├── home.component.html
+│   └── home.component.css
+```
+
+Una vista suele actuar como punto de composición de varios componentes.
+
+---
+
+## 6. Carpeta `servicios`
+
+La carpeta `servicios` contiene clases responsables de encapsular la **lógica de negocio** y la comunicación con fuentes externas.
+
+Responsabilidades habituales de los servicios:
+
+* Acceso a APIs
+* Gestión de estado compartido
+* Lógica reutilizable no relacionada con la vista
+
+Ejemplo:
+
+```text
+servicios/
+├── usuarios.service.ts
+├── productos.service.ts
+```
+
+Los servicios se inyectan mediante el sistema de **inyección de dependencias** y se registran mediante providers.
+
+---
+
+## 7. Carpeta `interceptores`
+
+La carpeta `interceptores` contiene interceptores HTTP que permiten interceptar y modificar las peticiones y respuestas HTTP de forma global.
+
+Usos habituales de interceptores:
+
+* Añadir cabeceras de autenticación
+* Manejar errores globales
+* Registrar logs
+* Transformar respuestas
+
+Ejemplo de estructura:
+
+```text
+interceptores/
+├── auth.interceptor.ts
+```
+
+Los interceptores se registran como providers globales en `app.config.ts`.
+
+---
+
+## 8. Carpeta `pipes`
+
+La carpeta `pipes` agrupa **pipes personalizados**, utilizados para transformar datos en las plantillas.
+
+Características:
+
+* Se usan exclusivamente en la vista
+* Transforman valores sin modificar el estado
+* Son reutilizables
+
+Ejemplo:
+
+```text
+pipes/
+├── capitalize.pipe.ts
+```
+
+Los pipes suelen declararse como standalone y se importan directamente en los componentes que los utilizan.
+
+---
+
+## 9. Carpeta `utils`
+
+La carpeta `utils` contiene **funciones auxiliares y utilidades genéricas** que no dependen de Angular.
+
+Características:
+
+* No utilizan inyección de dependencias
+* No conocen el framework
+* Son reutilizables en cualquier contexto
+
+Ejemplos típicos:
+
+* Funciones de formateo
+* Validaciones genéricas
+* Helpers matemáticos o de fechas
+
+Ejemplo:
+
+```text
+utils/
+├── date-utils.ts
+├── string-utils.ts
+```
+
+---
+
+## 10. Carpeta `models`
+
+La carpeta `models` contiene **interfaces y tipos de datos** que representan el modelo de la aplicación.
+
+Características:
+
+* Centraliza la definición de datos
+* Facilita la tipificación en servicios y componentes
+* Mejora la mantenibilidad y coherencia del código
+
+Ejemplo:
+
+```text
+models/
+├── usuario.model.ts
+├── producto.model.ts
+```
+
+---
+
+## 11. Recursos estáticos: carpeta `assets`
+
+La carpeta `assets` almacena recursos estáticos como imágenes, iconos o archivos JSON.
+
+```html
+<img src="assets/logo.png" alt="Logo">
+```
+
+Estos recursos se sirven directamente sin pasar por el compilador de Angular.
+
+---
+
+## 12. Configuración por entorno: carpeta `environments`
+
+La carpeta `environments` permite definir configuraciones específicas por entorno de ejecución.
+
+```ts
+export const environment = {
+  production: false,
+  apiUrl: 'http://localhost:3000'
+};
+```
+
+Estas configuraciones se utilizan habitualmente desde servicios o providers.
+
+---
+
+## 13. Flujo de arranque de una aplicación Angular moderna
+
+El flujo de arranque sigue una secuencia clara:
+
+1. El navegador carga `index.html`
+2. Se ejecuta `main.ts`
+3. Se aplica la configuración global definida en `app.config.ts`
+4. Se renderiza el componente raíz
+
+---
+
+## 14. `main.ts` y `app.config.ts`
+
+Archivo `main.ts`:
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig);
+```
+
+Archivo `app.config.ts`:
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter([])
+  ]
+};
+```
+
+Este enfoque sustituye completamente al uso de módulos y centraliza la configuración mediante providers.
+
+---
+
+## 15. Componente raíz como componente standalone
+
+El componente raíz se define como componente standalone y actúa como contenedor principal de la aplicación.
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Primer proyecto Angular';
+}
+```
+
+Este componente es el primer elemento renderizado dentro de `index.html`.
+
+---
\ No newline at end of file