Création d’une première application Angular

cd forma-plus
code .

# dans le terminal de VS Code
git log --oneline
git branch

git add .
git commit -m "Partie 01 : création du projet FormaPlus avec Angular CLI"
git branch -M main
git remote add origin https://github.com/VOTRE-COMPTE/forma-plus.git
git push -u origin main

# Vérifications utiles
git status          # fichiers modifiés
git log --oneline   # historique des commits
git remote -v       # adresse du dépôt GitHub

<!-- src/app/app.html -->
<h1>{{ nomCentre }}</h1>
<p>Mon premier projet Angular, créé le {{ dateCreation }}.</p>

# Avertissement attendu dans le terminal
▲ [WARNING] NG8113: All imports are unused
    src/app/app.ts:5:2:
      5 │   imports: [RouterOutlet],

// src/app/app.ts (version corrigée en Q2.5)
import { Component } from '@angular/core';

@Component({
  imports: [],
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {
  nomCentre = 'FormaPlus';
  dateCreation = '28/10/2026';
}

ng generate environments

# Résultat
CREATE src/environments/environment.ts
CREATE src/environments/environment.development.ts
UPDATE angular.json

"development": {
  "optimization": false,
  "extractLicenses": false,
  "sourceMap": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.development.ts"
    }
  ]
}

// src/environments/environment.ts (production)
export const environment = {
  production: true,
  nomCentre: 'FormaPlus',
  version: '1.0.0',
};

// src/environments/environment.development.ts
export const environment = {
  production: false,
  nomCentre: 'FormaPlus (développement)',
  version: '1.0.0-dev',
};

// src/app/app.ts
import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  imports: [],
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {
  nomCentre = environment.nomCentre;
  version = environment.version;
  dateCreation = '28/10/2026';
}

<!-- à ajouter à la fin de app.html -->
<footer>
  {{ nomCentre }} – version {{ version }}
</footer>

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay"
}

{
  "recommendations": [
    "angular.ng-template",
    "esbenp.prettier-vscode"
  ]
}

// src/app/layout/entete/entete.ts
import { Component } from '@angular/core';

@Component({
  imports: [],
  selector: 'app-entete',
  styleUrl: './entete.css',
  templateUrl: './entete.html',
})
export class Entete {
  nomCentre = 'FormaPlus';
  slogan = 'Centre de formation professionnelle';
}

<!-- src/app/layout/entete/entete.html -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">
      <i class="bi bi-mortarboard-fill me-2"></i>{{ nomCentre }}
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#menuPrincipal" aria-controls="menuPrincipal"
            aria-expanded="false" aria-label="Afficher le menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menuPrincipal">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#accueil">Accueil</a></li>
        <li class="nav-item"><a class="nav-link" href="#formations">Formations</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
      <span class="navbar-text ms-lg-3 d-none d-lg-inline small">{{ slogan }}</span>
    </div>
  </div>
</nav>

// src/app/app.ts
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
import { Entete } from './layout/entete/entete';

@Component({
  imports: [Entete],
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {
  nomCentre = environment.nomCentre;
  version = environment.version;
}

<!-- src/app/app.html -->
<app-entete />

<div class="container py-4">
  <p class="lead">
    La barre de navigation est maintenant un composant.
  </p>
</div>

<footer class="container text-secondary small">
  {{ nomCentre }} – version {{ version }}
</footer>

// src/app/accueil/banniere/banniere.ts
import { Component } from '@angular/core';

@Component({
  imports: [],
  selector: 'app-banniere',
  styleUrl: './banniere.css',
  templateUrl: './banniere.html',
})
export class Banniere {
  titre = 'Apprenez un métier, construisez votre avenir';
  sousTitre = 'Des formations pratiques en développement, réseaux et design, '
    + 'encadrées par des formateurs du métier.';
  lienInscription = 'https://github.com';
  inscriptionsOuvertes = true;
}

/* src/app/accueil/banniere/banniere.css */
.banniere {
  background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
}

<!-- src/app/accueil/banniere/banniere.html -->
<section id="accueil" class="banniere text-white text-center py-5">
  <div class="container py-4">
    <h1 class="display-5 fw-bold">{{ titre }}</h1>
    <p class="lead col-lg-8 mx-auto">{{ sousTitre }}</p>
    <a class="btn btn-light btn-lg me-2" href="#formations">
      <i class="bi bi-list-ul me-1"></i> Voir les formations
    </a>
    <a class="btn btn-outline-light btn-lg" target="_blank"
       [href]="lienInscription"
       [class.disabled]="!inscriptionsOuvertes">
      <i class="bi bi-pencil-square me-1"></i> S'inscrire
    </a>
  </div>
</section>

// dans la classe Contact
adresse = 'Avenue Habib Bourguiba, Tunis';
telephone = '+216 71 000 000';
email = 'contact@formaplus.tn';

<!-- exemple pour la colonne « e-mail » -->
<div class="col-md-4">
  <i class="bi bi-envelope fs-2 text-primary"></i>
  <p class="mt-2">
    <a [href]="'mailto:' + email">{{ email }}</a>
  </p>
</div>
<!-- téléphone : icône bi-telephone, lien 'tel:' -->
<!-- adresse : icône bi-geo-alt, texte simple -->

// src/app/layout/pied-page/pied-page.ts
import { Component } from '@angular/core';
import { environment } from '../../../environments/environment';

@Component({
  imports: [],
  selector: 'app-pied-page',
  styleUrl: './pied-page.css',
  templateUrl: './pied-page.html',
})
export class PiedPage {
  nomCentre = environment.nomCentre;
  version = environment.version;
  annee = new Date().getFullYear();
}

<!-- src/app/layout/pied-page/pied-page.html -->
<footer class="bg-dark text-white-50 py-4">
  <div class="container d-flex flex-column flex-md-row
              justify-content-between small">
    <span>© {{ annee }} {{ nomCentre }} – Tous droits réservés</span>
    <span>Version {{ version }} · Réalisé avec Angular et Bootstrap 5</span>
  </div>
</footer>

// src/app/app.ts
import { Component } from '@angular/core';
import { Entete } from './layout/entete/entete';
import { PiedPage } from './layout/pied-page/pied-page';
import { Banniere } from './accueil/banniere/banniere';
import { Contact } from './accueil/contact/contact';

@Component({
  imports: [Entete, Banniere, Contact, PiedPage],
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {}

<!-- src/app/app.html -->
<app-entete />

<main>
  <app-banniere />
  <app-contact />
</main>

<app-pied-page />

// dans la classe ChiffresCles
chiffres = [
  { valeur: '12', libelle: 'Formations', icone: 'bi-journal-code' },
  { valeur: '850', libelle: 'Stagiaires formés', icone: 'bi-people' },
  { valeur: '92 %', libelle: "Taux d'insertion", icone: 'bi-briefcase' },
  { valeur: '25', libelle: 'Entreprises partenaires', icone: 'bi-building' },
];

<!-- chiffres-cles.html -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row g-4 text-center">
      @for (c of chiffres; track c.libelle) {
        <div class="col-6 col-md-3">
          <i class="bi fs-1 text-primary" [class]="c.icone"></i>
          <div class="fs-2 fw-bold">{{ c.valeur }}</div>
          <div class="text-secondary">{{ c.libelle }}</div>
        </div>
      }
    </div>
  </div>
</section>

ng g i models/formation

# Résultat
CREATE src/app/models/formation.ts

// src/app/models/formation.ts
export interface Formation {
  id: number;
  titre: string;
  description: string;
  dureeMois: number;
  niveau: string;
  icone: string;
  nouveau: boolean;
  placesRestantes: number;
}

// src/app/app.ts (version finale)
import { Component } from '@angular/core';
import { Entete } from './layout/entete/entete';
import { PiedPage } from './layout/pied-page/pied-page';
import { Banniere } from './accueil/banniere/banniere';
import { ChiffresCles } from './accueil/chiffres-cles/chiffres-cles';
import { ListeFormations } from './formations/liste-formations/liste-formations';
import { Contact } from './accueil/contact/contact';

@Component({
  imports: [Entete, Banniere, ChiffresCles, ListeFormations, Contact, PiedPage],
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {}

<!-- src/app/app.html (version finale) -->
<app-entete />

<main>
  <app-banniere />
  <app-chiffres-cles />
  <app-liste-formations />
  <app-contact />
</main>

<app-pied-page />

# FormaPlus

Site vitrine du centre de formation FormaPlus, réalisé
avec Angular et Bootstrap 5 dans le cadre du TP 1 Angular.

## Fonctionnalités
- Page unique découpée en 7 composants
- Liste des formations affichée avec @for et @if
- Environnements de développement et de production
- Affichage adapté aux téléphones (Bootstrap 5)

## Captures d'écran
![Ordinateur](captures/10_page_ordinateur.png)
![Téléphone](captures/10_page_telephone.png)

## Versions utilisées
- Node.js : …
- Angular CLI : …
- Bootstrap : …

## Lancer le projet
npm install
ng serve

## Compiler pour la production
ng build

## Auteur
Prénom Nom – Groupe

git add .
git commit -m "Partie 10 : README, captures et version 1.0"
git push

git tag v1.0
git push origin v1.0