Estructura de proyectos Angular

Cuando creamos un nuevo proyecto con Angular CLI, se genera una estructura de directorios bien definida que facilita el desarrollo y mantenimiento de aplicaciones. Esta estructura ha evolucionado considerablemente en las versiones más recientes, especialmente en Angular 20, donde se han simplificado muchos aspectos y se ha adoptado un enfoque más moderno.

La estructura básica de un proyecto Angular 20 sigue un patrón jerárquico que separa claramente los diferentes tipos de archivos y responsabilidades:

.
├── node_modules/
├── public/
├── src/
├── archivos de configuración
└── documentación

Directorio node_modules

Este directorio contiene todas las dependencias del proyecto instaladas a través de npm. Angular es un framework que depende de múltiples librerías externas, desde TypeScript hasta herramientas de desarrollo y testing. No debemos modificar manualmente el contenido de esta carpeta, ya que se gestiona automáticamente mediante npm install.

Directorio public

La carpeta public es una novedad en las versiones más recientes de Angular. Aquí se almacenan los archivos estáticos que se servirán directamente sin procesamiento:

public/
└── favicon.ico

El archivo favicon.ico es el icono que aparece en la pestaña del navegador. Podemos añadir otros recursos estáticos como imágenes, fuentes o archivos de configuración que necesiten ser accesibles públicamente.

Directorio src - El corazón de la aplicación

El directorio src contiene todo el código fuente de nuestra aplicación Angular:

src/
├── app/
├── index.html
├── main.ts
└── styles.css

Archivo index.html

Este es el punto de entrada HTML de nuestra aplicación. Contiene la estructura básica del documento y el elemento <app-root> donde Angular montará nuestra aplicación:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MiApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Archivo main.ts

Es el punto de entrada de la aplicación Angular. Aquí se configura y arranca la aplicación utilizando la función bootstrapApplication:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app';
import { config } from './app/app.config';

bootstrapApplication(AppComponent, config)
  .catch(err => console.error(err));

Archivo styles.css

Contiene los estilos globales que se aplicarán a toda la aplicación. Estos estilos son útiles para definir variables CSS, resetear estilos del navegador o establecer tipografías base.

Directorio src/app - Los componentes de la aplicación

El directorio app contiene todos los archivos relacionados con el componente principal y la configuración de la aplicación:

app/
├── app.config.ts
├── app.css
├── app.html
├── app.routes.ts
├── app.spec.ts
└── app.ts

Archivo app.ts

Define el componente principal de la aplicación usando la sintaxis moderna de componentes standalone:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class AppComponent {
  title = 'mi-app';
}

Archivos app.html y app.css

El archivo app.html contiene la plantilla HTML del componente principal, mientras que app.css incluye los estilos específicos de este componente. Esta separación facilita el mantenimiento y la organización del código.

Archivo app.config.ts

Este archivo centraliza toda la configuración de la aplicación. Reemplaza al tradicional app.module.ts en aplicaciones standalone:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const config: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // otros providers
  ]
};

Archivo app.routes.ts

Define las rutas de navegación de la aplicación. Inicialmente está vacío, pero aquí configuraremos todas las rutas cuando tengamos múltiples páginas.

Archivo app.spec.ts

Contiene las pruebas unitarias del componente principal usando Jasmine y Karma. Angular incluye por defecto un framework de testing robusto.

Archivos de configuración en la raíz

La raíz del proyecto contiene varios archivos de configuración esenciales:

package.json

Define las dependencias del proyecto, scripts de npm y metadatos de la aplicación. Incluye tanto dependencias de producción como de desarrollo.

angular.json

Es el archivo de configuración principal de Angular CLI. Define cómo se construye, sirve y testea la aplicación. Especifica rutas de archivos, configuraciones de build y opciones del servidor de desarrollo.

tsconfig.json, tsconfig.app.json, tsconfig.spec.json

Estos archivos configuran el compilador de TypeScript. El archivo base tsconfig.json contiene la configuración general, mientras que los otros extienden esta configuración para contextos específicos como la aplicación y las pruebas.

.gitignore

Especifica qué archivos y directorios debe ignorar Git. Incluye node_modules, archivos de build y otros archivos temporales que no deben versionarse.

.editorconfig

Define reglas de formato de código consistentes entre diferentes editores. Especifica aspectos como indentación, codificación de caracteres y saltos de línea.

Esta estructura moderna de Angular 20 es más limpia y directa que versiones anteriores. Elimina la complejidad de los módulos tradicionales y facilita el desarrollo con componentes standalone, haciendo que el proyecto sea más fácil de entender y mantener desde el primer momento.

Arquitectura de elementos propios de Angular

Angular se basa en una arquitectura compuesta por diferentes tipos de elementos que trabajan en conjunto para crear aplicaciones web dinámicas.

Cada elemento tiene una responsabilidad específica y se comunica con otros elementos siguiendo patrones bien definidos.

Durante las próximas lecciones exploraremos en detalle cada uno de los siguientes elementos, por el momento vamos a realizar un recorrido por cada uno de ellos.

Componentes - Los bloques fundamentales

Los componentes son la piedra angular de cualquier aplicación Angular. Representan partes de la interfaz de usuario que combinan lógica, plantilla HTML y estilos CSS en una unidad cohesiva y reutilizable.

En Angular moderno, los componentes son standalone por defecto, lo que significa que pueden funcionar de forma independiente sin necesidad de módulos adicionales:

@Component({
  selector: 'app-producto',
  standalone: true,
  templateUrl: './producto.component.html',
  styleUrl: './producto.component.css'
})
export class ProductoComponent {
  nombre = 'Laptop Gaming';
  precio = 1299;
}

Cada componente encapsula su estado interno (propiedades) y comportamiento (métodos), proporcionando una interfaz clara para interactuar con otros componentes de la aplicación.

Servicios - Lógica de negocio compartida

Los servicios son clases TypeScript que encapsulan lógica de negocio, operaciones de datos y funcionalidades que pueden ser compartidas entre múltiples componentes. Siguen el patrón de inyección de dependencias y típicamente se comportan como singletons.

@Injectable({
  providedIn: 'root'
})
export class ProductoService {
  private productos = ['Laptop', 'Mouse', 'Teclado'];
  
  obtenerProductos() {
    return this.productos;
  }
}

Los servicios mantienen la separación de responsabilidades, permitiendo que los componentes se centren en la presentación mientras los servicios manejan la lógica de datos y comunicación con APIs.

Directivas - Modificadores de comportamiento

Las directivas son instrucciones que modifican el comportamiento o la apariencia de elementos del DOM. Angular incluye directivas integradas y permite crear directivas personalizadas.

Existen dos tipos principales:

Directivas estructurales: Modifican la estructura del DOM añadiendo, eliminando o reemplazando elementos. En Angular moderno utilizamos la nueva sintaxis de control flow:

@if (mostrarProducto) {
  <div>Producto disponible</div>
}

@for (producto of productos; track producto.id) {
  <div>{{ producto.nombre }}</div>
}

Directivas de atributo: Modifican la apariencia o comportamiento de elementos existentes sin cambiar la estructura:

<div [ngClass]="{'activo': estaActivo}">
<input [ngStyle]="{'color': colorTexto}">

Pipes - Transformadores de datos

Los pipes son funciones puras que transforman datos para su presentación en las plantillas. Angular incluye pipes integrados y permite crear pipes personalizados:

<!-- Pipes integrados -->
<p>{{ precio | currency:'EUR' }}</p>
<p>{{ fecha | date:'dd/MM/yyyy' }}</p>
<p>{{ nombre | uppercase }}</p>

<!-- Pipe personalizado -->
<p>{{ texto | truncar:50 }}</p>

Los pipes son especialmente útiles para formatear datos sin modificar los valores originales, manteniendo la separación entre lógica de presentación y datos.

Guards - Protectores de rutas

Los guards controlan el acceso a las rutas de la aplicación. Pueden prevenir la navegación, cargar datos antes de mostrar un componente o confirmar acciones antes de abandonar una página:

export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  return authService.isLoggedIn();
};

Resolvers - Cargadores de datos

Los resolvers precargan datos antes de que se active una ruta, asegurando que la información necesaria esté disponible cuando el componente se inicialice:

export const productoResolver: ResolveFn<Producto> = (route) => {
  const productoService = inject(ProductoService);
  return productoService.obtenerProducto(route.params['id']);
};

Interceptors - Middleware HTTP

Los interceptors procesan todas las peticiones y respuestas HTTP de forma centralizada, permitiendo añadir headers, manejar errores globalmente o implementar autenticación:

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  const authReq = req.clone({
    headers: req.headers.set('Authorization', `Bearer ${token}`)
  });
  return next(authReq);
};

Comunicación entre elementos

Estos elementos se comunican mediante varios mecanismos:

Property binding: Los componentes padre pasan datos a componentes hijo
Event binding: Los componentes hijo emiten eventos hacia componentes padre
Servicios compartidos: Multiple componentes acceden a datos y lógica común
Observables y Signals: Gestionan estado reactivo y comunicación asíncrona

Jerarquía y organización

La arquitectura Angular sigue una jerarquía clara:

Los componentes forman el árbol de la aplicación
Los servicios proporcionan funcionalidades transversales
Las directivas y pipes enriquecen las plantillas
Los guards y resolvers controlan la navegación
Los interceptors gestionan comunicaciones HTTP

Esta arquitectura modular permite crear aplicaciones escalables y mantenibles, donde cada elemento tiene una responsabilidad específica y pueden evolucionar independientemente. En las siguientes lecciones profundizaremos en cada uno de estos elementos, aprendiendo a implementarlos y utilizarlos efectivamente en nuestras aplicaciones.

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Angular es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.

Más tutoriales de Angular

Explora más contenido relacionado con Angular y continúa aprendiendo con nuestros tutoriales gratuitos.

Ver más tutoriales de Angular Explorar todas las tecnologías

Aprendizajes de esta lección

Comprender la estructura de directorios generada por Angular CLI en Angular 20.
Identificar la función de los principales archivos y carpetas en un proyecto Angular.
Conocer los elementos propios de Angular: componentes, servicios, directivas, pipes, guards, resolvers e interceptors.
Entender la comunicación y jerarquía entre los elementos de Angular.
Familiarizarse con la arquitectura modular para desarrollar aplicaciones escalables y mantenibles.

Estructura del proyecto Angular