🅰️ Angular – Framework Complet (Installation, Core & Déploiement)

Schéma de l'Architecture

Une application Angular est un arbre de Composants, organisés en Modules (ou Standalone), alimentés par des Services.

[Image d'une architecture Angular]
+---------------------------------------------------+
| AppModule / bootstrapApplication                  | (Module Racine)
|   (Importe: RouterModule, HttpClientModule...)    |
|   (Fournit: UserService, AuthService...)          |
|   (Bootstrap: AppComponent)                       |
|   +---------------------------------------------+ |
|   | AppComponent (Composant Racine)             | |
|   |   <router-outlet>                           | |
|   |     |                                       | |
|   |     +--> [HomePage (Composant)]             | |
|   |     |                                       | |
|   |     +--> [UsersPage (Composant)]            | |
|   |            (Injecte: UserService)           | |
|   +---------------------------------------------+ |
+---------------------------------------------------+

Les 4 Piliers

1. Prérequis : Node.js & NPM

Angular (comme React ou Vue) est un framework "build-time". Vous avez besoin de Node.js et NPM (ou Yarn/PNPM) pour **développer**, **builder** (compiler) et **servir** l'application en local.

Il est recommandé d'utiliser NVM (Node Version Manager) (voir le guide Node.js) pour installer une version LTS (Long Term Support) de Node.

nvm install --lts
nvm use --lts
node -v # (ex: v20.x.x)
npm -v

2. Installation de l'Angular CLI

L'Angular CLI (Command Line Interface) est l'outil indispensable pour gérer un projet Angular. Il s'installe "globalement".

# 'npm install -g' installe l'outil globalement
npm install -g @angular/cli

# Vérifier l'installation
ng --version
# (Affiche la version d'Angular CLI, Node, etc.)

Concept (Avant Angular 15)

Avant les composants "Standalone", tout devait être déclaré dans un @NgModule (Module).

Un Module est une "boîte" qui regroupe un ensemble de fonctionnalités (Composants, Services...). AppModule est le module racine.

Anatomie (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { UserService } from './services/user.service';

@NgModule({
  
  // 1. Choses créées DANS ce module (Composants, Pipes)
  declarations: [
    AppComponent,
    UserProfileComponent
  ],
  
  // 2. Choses importées (Autres Modules)
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  
  // 3. Services (Injection de Dépendances)
  providers: [
    UserService
  ],
  
  // 4. Le composant racine
  bootstrap: [AppComponent]
})
export class AppModule { }

La fin des @NgModule

Depuis Angular 15 (et par défaut dans 17+), les @NgModule sont optionnels. Les composants peuvent être "Standalone" (autonomes).

Un composant Standalone gère ses propres dépendances (via imports) sans avoir besoin d'être "déclaré" dans un module.

C'est plus simple et plus proche de React/Vue.

Exemple (user-profile.component.ts)

import { Component } from '@angular/core';
// On importe les briques nécessaires
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-user-profile',
  
  // 1. Devient Standalone
  standalone: true,
  
  // 2. Importe ses propres dépendances
  //    (l'équivalent du 'imports' de @NgModule)
  imports: [
    CommonModule, // (*ngIf, *ngFor)
    RouterModule  // (routerLink)
  ],
  
  templateUrl: '...',
  styleUrls: [...]
})
export class UserProfileComponent {
  // ...
}

Formateurs de données

Un Pipe (|) est un formateur simple à utiliser dans un template pour transformer une donnée (date, nombre, string) à l'affichage.

// component.ts
aujourdhui = new Date(); // (Objet Date)
montant = 1234.56;
monObjet = { nom: "Test" };
monObservable$ = this.http.get(...);

Exemples (component.html)

Lire les Paramètres (ActivatedRoute)

Dans le composant (ex: UserProfileComponent), on écoute ActivatedRoute pour récupérer l'ID de l'URL.

// user-profile.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { switchMap } from 'rxjs/operators';

@Component(...)
export class UserProfileComponent implements OnInit {
  userId: string;
  
  constructor(private route: ActivatedRoute) { }
  
  ngOnInit(): void {
    // Écouter les changements de l'URL (Observable RxJS)
    this.route.paramMap.pipe(
      switchMap(params => {
        this.userId = params.get('id');
        // return this.userService.getOneUser(this.userId);
      })
    ).subscribe(user => {
      // ...
    });
  }
}

Route Guards (Protection)

Un "Guard" est une fonction qui protège une route. (Ex: "L'utilisateur est-il admin ?").

ng g guard auth/Admin

// admin.guard.ts
import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';

export const adminGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService); // DI moderne
  
  if (authService.isAdmin()) {
    return true; // OK
  }
  // Pas admin: Rediriger
  // const router = inject(Router);
  // return router.parseUrl('/login');
  return false; // Bloquer
};

// app.routes.ts
{
  path: 'admin',
  component: AdminPanelComponent,
  canActivate: [adminGuard] // Protège la route
}

HttpClientModule

Le module HTTP natif d'Angular. Il utilise RxJS (Observables).

Setup (app.config.ts) (Moderne)

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient() // Fournit le HttpClient
  ]
};

Setup (app.module.ts) (Ancien)

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule // Importer le module
  ],
  ...
})
export class AppModule { }

Utilisation (Service)

On injecte HttpClient dans un Service.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {
  
  constructor(private http: HttpClient) { }
  
  // 1. Retourne un Observable (pas les données)
  getUsers(): Observable<any[]> {
    return this.http.get<any[]>('/api/users');
  }
  
  postUser(data: any): Observable<any> {
    return this.http.post('/api/users', data);
  }
}

Utilisation (Composant)

// user-list.component.ts
export class UserListComponent implements OnInit {
  users: any[] = [];
  
  constructor(private api: ApiService) { }
  
  ngOnInit(): void {
    // 2. L'appel ne part que lors du .subscribe()
    this.api.getUsers().subscribe(data => {
      this.users = data;
    });
  }
}

Observables (Streams)

RxJS est une librairie de programmation réactive. C'est le cœur d'Angular (HTTP, Router, Forms...).

Un **Observable** est un "flux" (stream) de données dans le temps. (Contrairement à une Promise qui ne donne qu'une seule valeur).

| async Pipe (La bonne pratique)

Gérer les .subscribe() et .unsubscribe() manuellement est lourd. Le pipe | async gère tout pour vous.

user-list.component.ts

import { Component } from '@angular/core';
import { ApiService } from '../services/api.service';
import { Observable } from 'rxjs';

@Component(...)
export class UserListComponent {
  
  // 1. Stocker l'Observable lui-même
  users$: Observable<any[]>;
  
  constructor(private api: ApiService) {
    // 2. Assigner l'Observable (pas de .subscribe() ici)
    this.users$ = this.api.getUsers();
  }
}

user-list.component.html

<!-- 3. Le pipe 'async' gère le subscribe/unsubscribe -->
<ul *ngIf="users$ | async as users">
  <li *ngFor="let user of users">
    {{ user.nom }}
  </li>
</ul>

Formulaires "Template-driven"

La logique est principalement dans le template HTML. Simple pour des formulaires basiques (login, contact).

Nécessite FormsModule (ou import { FormsModule } from '@angular/forms' en Standalone).

Exemple (login.component.html)

<!-- 1. Référence #loginForm="ngForm" -->
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  
  <div>
    <label for="email">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      [(ngModel)]="model.email"
      required
      email
      #emailInput="ngModel"
    >
    
    <!-- 2. Gestion des erreurs (touché, invalide) -->
    <div *ngIf="emailInput.invalid && (emailInput.dirty || emailInput.touched)">
      <small *ngIf="emailInput.errors?.['required']">Email requis.</small>
      <small *ngIf="emailInput.errors?.['email']">Email invalide.</small>
    </div>
  </div>
  
  <button type="submit" [disabled]="loginForm.invalid">OK</button>
</form>

Angular CLI (ng)

# Installer/Mettre à jour la CLI
npm install -g @angular/cli

# Créer un projet (Standalone)
ng new mon-app

# Servir (Dev)
ng serve # (ou 'ng s')

# Générer des fichiers
ng generate component MonComposant # (ou 'ng g c')
ng generate service MonService   # (ou 'ng g s')
ng generate module MonModule     # (ou 'ng g m')
ng generate guard MonGuard       # (ou 'ng g g')
ng generate pipe MonPipe         # (ou 'ng g p')

# Builder (Prod)
ng build

Hooks de Cycle de Vie (Composant)

Méthodes appelées automatiquement par Angular.

Syntaxe Template

{{ interpolation }}
[propertyBinding]
(eventBinding)
[(twoWayBinding)]
*ngIf="condition" (ou @if)
*ngFor="let item of items" (ou @for)