Services, injection et HTTP dans Angular

Objectifs

À la fin de cette leçon, vous saurez :

• créer un service injectable qui encapsule les appels API ;
• utiliser HttpClient avec RxJS (aperçu) ;
• protéger des routes avec des guards.

🔗 Pour vous rafraîchir la mémoire : guards et contrôle d'accès · décorateurs et metadata · les bases TypeScript

Le service : votre repository côté client

@Injectable({ providedIn: 'root' })
export class TasksService {
  private http = inject(HttpClient);
  private base = '/api/tasks';

  lister(): Observable<Task[]> {
    return this.http.get<Task[]>(this.base);
  }

  creer(dto: CreateTaskDto) {
    return this.http.post<Task>(this.base, dto);
  }

  basculer(id: number, fait: boolean) {
    return this.http.patch<Task>(`${this.base}/${id}`, { fait });
  }
}

@Injectable + providedIn: 'root' : une instance unique, injectée partout — le DIP du chapitre 31 automatisé par Angular. Les composants ne connaissent jamais fetch ni les URLs : ils demandent au service.

Consommer depuis un composant

export class TaskListComponent {
  private tasksService = inject(TasksService);
  taches: Task[] = [];

  ngOnInit() {
    this.tasksService.lister().subscribe((t) => (this.taches = t));
  }

  onBascule(id: number) {
    const t = this.taches.find((x) => x.id === id)!;
    this.tasksService.basculer(id, !t.fait)
      .subscribe(() => this.recharger());
  }
}

RxJS en aperçu : subscribe joue le rôle du await d'Angular. La bibliothèque complète (Observables, opérateurs) dépasse ce cursus ; retenez le pattern : s'abonner pour recevoir, se désabonner proprement pour les flux longs.

Routing et guards

export const routes: Routes = [
  { path: 'tasks', component: TaskListComponent },
  { path: 'admin', component: AdminComponent, canActivate: [authGuard] },
];

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.estConnecte() ? true : router.parseUrl('/login');
};

Le routing remplace vos liens + rechargements : navigation sans reload de page. Le guard est votre SessionGuard transposé : décider avant d'entrer — exactement le même principe côté serveur NestJS (RolesGuard), appliqué cette fois à la navigation.

Exercice

1. Créez TasksService + composant liste branché sur votre API Nest.
2. Ajoutez la création via formulaire réactif simple.
3. Protégez /admin derrière un guard factice.
4. Où vivra la logique « titre ≤ 200 » ? Frontend, backend, ou deux ?

Résumé

• Service injectable = unique point HTTP ; composants restent minces.
• HttpClient typé ; subscribe consomme.
• Guards = autorisation à l'entrée des routes.