Modularité, Services & Backend Spring Boot

Développez une architecture Angular modulaire, propre et scalable. Connectez l’application à un backend Spring Boot en appliquant les patterns professionnels.

Objectif du Jour 2

Aujourd’hui, on passe au niveau supérieur : structure modulaire, services orientés métier et connexion propre à une API Spring Boot. Vous allez apprendre à construire une application scalable, testable et facile à maintenir.

🎯 Ce que vous allez maîtriser

Modularité Angular (feature modules, standalone features, lazy loading)
Services métier orientés patterns (Mediator, Facade, Repository Client)
Connexion backend Spring Boot propre et sécurisée
Meilleures stratégies d’optimisation et d’organisation du code

🔧 Fil Rouge

Notre application B2B : achats, catalogue, connexion, commandes.

On structure les features, on isole les services, et on branche l’API Spring Boot.

1 — Modularité Professionnelle Angular

Une application Angular mal structurée devient rapidement incontrôlable. La modularité permet une architecture claire, scalable, testable.

🌐 Feature Modules — Organisation standard entreprise

catalog/ — produits, filtres, détails
auth/ — login, token, guards
cart/ — panier, récap, validation

Les modules permettent :

isolement logique
lazy loading → performances
réutilisation (shared modules)

💡 Sans modularité vs Avec modularité

❌ Sans : fichiers éparpillés, importations croisées, dette technique.

✔ Avec :

navigation claire
performance optimisée
préparation au microfrontend

📦 Exemple de module propre


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ProductListComponent,
    ProductDetailComponent
  ]
})
export class CatalogModule { }

Astuce performance : Chargez les pages rarement consultées en lazy loading uniquement. Gain : -25% de JS au premier chargement.

2 — Services & Injection de Dépendances

Les services Angular sont le cœur de votre logique métier. Ils doivent être simples, isolés et testables.

⚙ Patterns appliqués

Mediator — Orchestration de plusieurs API/services
Proxy — Intercepter et transformer les appels HTTP
Client Repository — Accès API structuré

Gains :

Lisibilité ×2
Test unitaire ×4 plus simple
Aucune duplication de logique

🔧 Exemple de service propre


@Injectable({ providedIn: 'root' })
export class ProductService {
  constructor(private http: HttpClient) {}

  getAll() {
    return this.http.get('/api/products');
  }
}

À éviter :

Business logic dans les composants ❌
Services « dieu » qui font tout ❌
HTTP dans 10 fichiers différents ❌

3 — Connexion Pro à un Backend Spring Boot

Le backend Spring Boot fournit l’API REST. Angular consomme les endpoints propres via HttpClient et les patterns réactifs.

💡 Structure Spring Boot

Controller — Endpoints REST
Service — Logique métier
Repository — Accès JPA


@RestController
@RequestMapping("/api/products")
public class ProductController {

  @GetMapping
  public List findAll() {
    return service.findAll();
  }
}

🔗 Connexion Angular


this.productService.getAll().subscribe(products => {
  this.products = products;
});

Astuce : Utilisez tap() pour debugger sans polluer.

Gain : Architecture claire compatible DDD + microservices.

4 — Signals pour gérer l’état proprement

Signals est l’approche moderne pour gérer l’état dans Angular. Plus performant, plus simple, plus prédictif que Subject/BehaviorSubject.


readonly products = signal([]);
readonly promos = computed(
  () => this.products().filter(p => p.price < 100)
);

effect(() => console.log("Promos:", this.promos()));

Gains :

Réactivité automatique (pas besoin de souscriptions)
Debug ×2 plus simple
Perf meilleure pour 90% des cas