Le projet Atelier.

Créer le projet

Avoir un projet Angular « Atelier » qui tourne sur ta machine, SSR activé dès le départ.

1. Vérifie Node : node -v (v20+). Sinon installe la version LTS depuis nodejs.org.
2. Installe le CLI Angular, puis crée le projet.
3. Lance le serveur de dev et ouvre le navigateur.

terminalnpm i -g @angular/cli
ng new atelier --routing --style=scss --ssr
cd atelier
ng serve # → http://localhost:4200

• localhost:4200 affiche la page d'accueil Angular.
• Tu modifies src/app/app.html, tu sauvegardes → l'écran se met à jour seul.

Le premier composant

Un modèle Client, un composant ClientCard réutilisable, et une liste de clients affichée avec @for.

1. Crée un type Client dans shared/.
2. Génère le composant carte : ng g c features/clients/client-card.
3. Génère la liste : ng g c features/clients/client-list et boucle sur des clients codés en dur.

src/app/shared/client.model.tsexport interface Client {
  id: number;
  nom: string;
  email: string;
  telephone: string;
}

src/app/features/clients/client-card.tsimport { Component, input } from '@angular/core';
import { Client } from '../../shared/client.model';

@Component({
  selector: 'app-client-card',
  standalone: true,
  template: `
    <article class="card">
      <h3>{{ client().nom }}</h3>
      <p>{{ client().email }} · {{ client().telephone }}</p>
    </article>
  `,
  styles: `.card{ border:1px solid #ddd; padding:12px; border-radius:8px; }`
})
export class ClientCard {
  client = input.required<Client>();   // reçu du parent
}

src/app/features/clients/client-list.tsimport { Component } from '@angular/core';
import { ClientCard } from './client-card';
import { Client } from '../../shared/client.model';

@Component({
  selector: 'app-client-list',
  standalone: true,
  imports: [ClientCard],
  template: `
    <h2>Clients</h2>
    @for (c of clients; track c.id) {
      <app-client-card [client]="c" />
    }
  `
})
export class ClientList {
  clients: Client[] = [
    { id: 1, nom: 'Boulangerie Zitoun', email: 'z@ex.tn', telephone: '22 000 111' },
    { id: 2, nom: 'Garage Sfax Auto',   email: 'g@ex.tn', telephone: '22 000 222' },
    { id: 3, nom: 'Café des Oliviers',   email: 'c@ex.tn', telephone: '22 000 333' },
  ];
}

• En plaçant <app-client-list /> dans app.html, tu vois trois cartes.
• Changer un nom dans le tableau met à jour la carte correspondante.

Navigation & routes

Trois écrans — Clients, Projets, Factures — accessibles par une barre de navigation, sans jamais recharger la page.

1. Déclare les routes ; charge une feature en lazy avec loadComponent.
2. Mets un <router-outlet> et une barre routerLink dans le shell.
3. Ajoute une route de détail /clients/:id et une route ** (404).

src/app/app.routes.tsimport { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'clients', pathMatch: 'full' },
  { path: 'clients', loadComponent: () =>
      import('./features/clients/client-list').then(m => m.ClientList) },
  { path: 'clients/:id', loadComponent: () =>
      import('./features/clients/client-detail').then(m => m.ClientDetail) },
  { path: 'projets',  loadComponent: () =>
      import('./features/projets/projet-list').then(m => m.ProjetList) },
  { path: 'factures', loadComponent: () =>
      import('./features/factures/facture-list').then(m => m.FactureList) },
  { path: '**', loadComponent: () =>
      import('./shared/not-found').then(m => m.NotFound) },
];

src/app/app.html — le shell<nav class="topnav">
  <a routerLink="/clients"  routerLinkActive="on">Clients</a>
  <a routerLink="/projets"  routerLinkActive="on">Projets</a>
  <a routerLink="/factures" routerLinkActive="on">Factures</a>
</nav>
<router-outlet />

src/app/app.ts — importer ce qu'utilise le templateimport { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
// ...
imports: [RouterOutlet, RouterLink, RouterLinkActive],

• Cliquer dans la barre change l'écran sans flash de rechargement.
• Dans l'onglet Réseau, la navigation ne redemande pas de page HTML : c'est bien une SPA.
• Une URL inconnue affiche la page 404.

Environnements & build

Préparer l'adresse de l'API dans un fichier d'environnement, et produire un build de production.

1. Génère les environnements : ng g environments.
2. Mets une variable apiUrl dans chaque.
3. Construis pour la prod et regarde le dossier dist/.

src/environments/environment.ts (dev)export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000',   // json-server, étape 6
};

src/environments/environment.prod.tsexport const environment = {
  production: true,
  apiUrl: 'https://api.atelier.tn',  // la vraie API, plus tard
};

terminalng build # → dist/atelier/  (fichiers hachés, minifiés)
ls dist/atelier/browser

• dist/atelier/ contient des fichiers JS hachés et un index.html.
• Le poids total est bien plus petit que le projet source (minification + tree-shaking).

Sécurité : l'intercepteur

Attacher automatiquement un jeton d'authentification à chaque requête sortante.

core/auth.interceptor.tsimport { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  const authReq = token
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;
  return next(authReq);
};

app.config.ts — le brancherprovideHttpClient(withInterceptors([authInterceptor]))

• Dans l'onglet Réseau, chaque requête porte l'en-tête Authorization: Bearer ….
• Angular échappe déjà le HTML dans {{ }} — teste en tapant <b>x</b> dans un nom : il s'affiche en texte, pas en gras (protection XSS).

OnPush & architecture

Accélérer le rendu avec OnPush et ranger le projet proprement.

sur chaque composantimport { ChangeDetectionStrategy } from '@angular/core';

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush,
})

l'arborescence ciblesrc/app/
  core/       # services, interceptors, guards (une fois)
  shared/     # modèles, composants réutilisables
  features/   # clients / projets / factures

• L'app fonctionne toujours avec OnPush (les signals déclenchent le rendu correctement).
• Chaque feature est lazy-loadée : son JS n'est téléchargé qu'en visitant sa route (onglet Réseau).

SSR & SEO

Servir du vrai HTML au premier chargement (SSR, activé à l'étape 1) et donner un titre par écran.

dans un composant de pageimport { Title, Meta } from '@angular/platform-browser';

private title = inject(Title);
private meta  = inject(Meta);
constructor() {
  this.title.setTitle('Clients · Atelier');
  this.meta.updateTag({ name: 'description', content: 'Gestion des clients.' });
}

terminal — rendu serveurng build && npm run serve:ssr:atelier
# puis « Afficher la source » : le HTML contient déjà le contenu,
# pas une page vide remplie par JS.

• « Afficher la source de la page » montre le contenu réel (pas seulement <app-root></app-root>).
• Le titre de l'onglet change selon l'écran.

Déployer Atelier — l'épreuve finale

Mettre Atelier en ligne : le front hébergé, pointant vers l'API. C'est le projet fini.

1. Vérifie environment.prod.ts (la vraie apiUrl).
2. Build de production.
3. Héberge le contenu de dist/ sur un hébergeur statique ; configure le domaine + HTTPS.
4. Un pipeline CI reconstruit et redéploie à chaque git push.

terminalng build --configuration production
# déploie dist/atelier/browser sur ton hébergeur (Netlify, Vercel, VPS…)

.github/workflows/deploy.yml (esquisse)on: { push: { branches: [main] } }
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && ng build --configuration production
      - # étape de déploiement selon l'hébergeur

• Atelier est accessible à une vraie URL, en HTTPS.
• On peut lister, chercher et créer un client en ligne.
• « Afficher la source » montre du HTML rendu (SSR), le titre change par écran.
• Un git push redéploie tout seul.