Angular 20

Arquitectura moderna frontend basada en componentes standalone, routing dinámico, servicios HTTP y organización escalable para aplicaciones SPA profesionales.

Repositorio de ejemplo:

https://github.com/ricardollerenad/BDA/tree/main/lab_9

Agenda

¿Qué es Angular 20?

Angular 20 es un framework frontend desarrollado por Google para construir aplicaciones SPA modernas utilizando TypeScript, componentes reutilizables, inyección de dependencias y arquitectura escalable.

Estructura de Carpetas

src/
│
├── app/
│   ├── services/
│   ├── users/
│   ├── app.config.ts
│   ├── app.routes.ts
│   ├── app.html
│   ├── app.css
│   └── app.ts
│
├── assets/
│
├── styles.css
│
└── main.ts

Archivos más importantes

Standalone Components

Angular 20 elimina la dependencia obligatoria de AppModule, permitiendo componentes completamente independientes y más simples de mantener.

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './users.html'
})

Servicios HTTP

Ejemplo Service Angular

@Injectable({
  providedIn: 'root'
})

export class UserService {

  private apiUrl = 'http://IP:3000/api/users';

  constructor(private http: HttpClient) {}

  getUsers(){
    return this.http.get(this.apiUrl);
  }
}

Arquitectura Angular + Express

Ventajas de Angular 20

Diagrama de Secuencia Angular + Express

Interacción entre el frontend Angular, el backend Express y la base de datos MongoDB en un flujo CRUD completo.

Gracias 🚀

Angular 20 representa una arquitectura frontend moderna basada en componentes standalone, servicios desacoplados y diseño escalable ideal para aplicaciones empresariales.

Repositorio:

Ver Proyecto en GitHub