Skip to content

GitLab

Last edited by imunnic
Page history

Modulo 1.2

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:

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

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:

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:

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:

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:

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:

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:

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:

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:

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.

<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.

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:

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:

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.

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.