Infrastructure Layer

Overview

The infrastructure layer is where the “how” of your application lives. This layer implements the repository interfaces defined in the domain layer and handles all external dependencies like HTTP requests, databases, file systems, and third-party APIs. This is the only layer that should directly interact with:

HTTP clients (Angular’s HttpClient)
Database connections
External APIs
File systems
Framework-specific features

What Goes in the Infrastructure Layer

The infrastructure layer typically contains:

Repository Implementations
External Services
UI Components
Adapters

Concrete implementations of domain repository interfaces that handle data persistence and retrieval.Example: AuthService implements UsuarioRepository

Repository Implementation

The infrastructure layer implements repository interfaces defined in the domain layer. This is where HTTP requests, database queries, or any other data access mechanism is implemented.

AuthService: Implementing UsuarioRepository

Location: ~/workspace/source/src/app/usuario/infrastructure/services/auth-service.ts:1

auth-service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Usuario } from '../../domain/models/usuario';
import { UsuarioRepository } from '../../domain/repositories/usuario.repository';

@Injectable({
  providedIn: 'root',
})
export class AuthService implements UsuarioRepository {

  private readonly BASE_URL = 'http://localhost:8080/'
  constructor(private httpClient: HttpClient) { }

  loginUsuario(usuario: string, contrasena: string): Observable<Usuario> {
    return this.httpClient.get<Usuario>(this.BASE_URL + 'login' + '/' + usuario + '/' + contrasena);
  } 
  registrarUsuario(usuario: string, contrasena: string): Observable<Usuario> {
    const body = { usuario, contrasena };
    return this.httpClient.post<Usuario>(
      `${this.BASE_URL}registro`,
      body,
      { headers: { 'Content-Type': 'application/json' } }
    );
  }
}

Breaking Down AuthService

@Injectable

decorator

Makes the service available for dependency injection throughout the application

providedIn: 'root' means this is a singleton service available app-wide
Angular creates one instance and shares it everywhere

implements UsuarioRepository

interface implementation

Declares that this class fulfills the contract defined in the domain layer

TypeScript enforces that all methods from UsuarioRepository are implemented
Allows the service to be injected wherever UsuarioRepository is required

BASE_URL

string

Base URL for the authentication API

In production, this would come from environment configuration
Points to the backend server handling authentication

httpClient

HttpClient

Angular’s HTTP client for making requests

Injected via constructor dependency injection
Returns Observables for all HTTP operations
Handles request/response serialization automatically

HTTP Integration

Let’s examine how each method integrates with the backend API.

auth-service.ts

loginUsuario(usuario: string, contrasena: string): Observable<Usuario> {
    return this.httpClient.get<Usuario>(this.BASE_URL + 'login' + '/' + usuario + '/' + contrasena);
}

HTTP Request Details:

Method: GET
URL: http://localhost:8080/login/{usuario}/{contrasena}
Response: JSON object matching the Usuario interface
Type Safety: get<Usuario>() tells TypeScript the response type

Using GET for login with credentials in the URL is not secure for production. Credentials should be sent in the request body with POST, and the URL should be served over HTTPS. URL parameters can be logged by servers, proxies, and appear in browser history.

Better approach for production:

loginUsuario(usuario: string, contrasena: string): Observable<Usuario> {
    const body = { usuario, contrasena };
    return this.httpClient.post<Usuario>(
        `${this.BASE_URL}login`,
        body,
        { headers: { 'Content-Type': 'application/json' } }
    );
}

Registration Implementation

auth-service.ts

registrarUsuario(usuario: string, contrasena: string): Observable<Usuario> {
    const body = { usuario, contrasena };
    return this.httpClient.post<Usuario>(
      `${this.BASE_URL}registro`,
      body,
      { headers: { 'Content-Type': 'application/json' } }
    );
}

HTTP Request Details:

Method: POST
URL: http://localhost:8080/registro
Body: { "usuario": "username", "contrasena": "password" }
Headers: Content-Type: application/json
Response: JSON object with the created user data

body

object

Request payload sent to the server

usuario

string

required

Username for the new account

contrasena

string

required

Password for the new account

Observable Pattern with HttpClient

Angular’s HttpClient returns Observables, which provide powerful asynchronous capabilities:

Basic Subscription
Error Handling
Data Transformation

this.authService.loginUsuario('john', 'password123').subscribe({
  next: (usuario) => {
    console.log('Logged in:', usuario);
    // Navigate to dashboard
  },
  error: (err) => {
    console.error('Login failed:', err);
    // Show error message
  },
  complete: () => {
    console.log('Request complete');
  }
});

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

loginUsuario(usuario: string, contrasena: string): Observable<Usuario> {
  return this.httpClient.get<Usuario>(
    this.BASE_URL + 'login' + '/' + usuario + '/' + contrasena
  ).pipe(
    catchError(error => {
      console.error('Login error:', error);
      if (error.status === 401) {
        return throwError(() => new Error('Invalid credentials'));
      }
      return throwError(() => new Error('Server error'));
    })
  );
}

import { map } from 'rxjs/operators';

registrarUsuario(usuario: string, contrasena: string): Observable<Usuario> {
  const body = { usuario, contrasena };
  return this.httpClient.post<any>(
    `${this.BASE_URL}registro`,
    body
  ).pipe(
    // Transform API response to domain model
    map(response => ({
      id: response.userId,
      usuario: response.username,
      contrasena: '' // Never return password
    }))
  );
}

RxJS Operators for HTTP

Common RxJS operators used with HTTP requests:

Operator	Purpose	Example
`map`	Transform response data	`map(res => res.data)`
`catchError`	Handle errors gracefully	`catchError(err => of(null))`
`tap`	Side effects (logging)	`tap(data => console.log(data))`
`retry`	Retry failed requests	`retry(3)`
`timeout`	Cancel slow requests	`timeout(5000)`
`switchMap`	Chain dependent requests	`switchMap(user => getProfile(user.id))`

Observables from HttpClient are cold and single-use. They don’t execute until you subscribe, and complete after one response.