01
Description du projet
SAV App est une application front-end de type SPA (Single Page Application) développée avec Angular et TypeScript dans le cadre d'un cours dédié au framework. Le projet adopte une architecture modulaire conforme aux bonnes pratiques Angular : séparation en modules fonctionnels, composants réutilisables, services injectables et routing déclaratif.
L'application gère des entités métier (savons, produits) avec affichage dynamique, navigation entre vues et préparation à la consommation d'une API via le module HttpClient. Le typage fort apporté par TypeScript garantit la robustesse du code et facilite la maintenance.
Ce projet illustre la transition d'un développement JavaScript classique vers un framework professionnel structuré, utilisé dans de nombreuses entreprises pour des applications web d'envergure.
02
Technologies utilisées
Angular 17+
TypeScript
HTML5 / Angular templates
CSS3 / SCSS
RxJS (Observables)
Angular Router
HttpClient
VS Code + Angular CLI
03
Architecture Angular
Modules
Découpage fonctionnel
L'application est découpée en modules Angular (
AppModule, ProductsModule…). Chaque module encapsule ses composants, services et routes — favorisant la séparation des responsabilités.Composants
Réutilisabilité
Composants autonomes avec leurs propres templates et styles. Communication parent-enfant via
@Input() / @Output(), lifecycle hooks (ngOnInit) pour le chargement des données.Services
Injection de dépendances
Services
@Injectable() pour la logique métier (appels HTTP, gestion des données). Fournis au niveau racine (providedIn: 'root') pour être partagés entre tous les composants.Routing
Navigation SPA
Routing déclaratif avec
RouterModule, navigation sans rechargement de page, paramètres de route (:id) et lazy loading des modules pour optimiser les performances.04
Extrait de code — Service Angular
// product.service.ts — Service injectable Angular
@Injectable({ providedIn: 'root' })
export class ProductService {
private apiUrl = 'https://api.example.com/products';
constructor(private http: HttpClient) {}
// Récupère tous les produits — retourne un Observable
getAll(): Observable<Product[]> {
return this.http.get<Product[]>(this.apiUrl);
}
getById(id: number): Observable<Product> {
return this.http.get<Product>(`${this.apiUrl}/${id}`);
}
}
// product-list.component.ts — Composant qui consomme le service
@Component({ selector: 'app-product-list', templateUrl: './product-list.component.html' })
export class ProductListComponent implements OnInit {
products: Product[] = [];
constructor(private productService: ProductService) {}
ngOnInit(): void {
this.productService.getAll().subscribe(data => this.products = data);
}
}
05
Structure des routes
| Route | Composant | Description |
|---|---|---|
| / | HomeComponent | Page d'accueil de l'application SAV |
| /products | ProductListComponent | Liste de tous les produits/savons |
| /products/:id | ProductDetailComponent | Fiche détail d'un produit |
| /about | AboutComponent | Page à propos de l'application |
06
Compétences BTS SIO mobilisées
| Code | Compétence | Mise en œuvre dans le projet |
|---|---|---|
| B2.1 | Exploiter les ressources du poste de travail | Installation et utilisation d'Angular CLI, configuration de l'environnement Node.js/npm, VS Code avec extensions Angular. |
| B2.2 | Concevoir une solution applicative | Architecture modulaire Angular, définition des composants, services et routes, interfaces TypeScript pour le typage des données. |
| B2.3 | Développer, documenter et déployer | Développement TypeScript avec injection de dépendances, data-binding, gestion des Observables RxJS, routing déclaratif. |
| B2.4 | Travailler en mode projet | Organisation par feature modules, versionnage GitHub, respect des conventions de nommage Angular (style guide officiel). |
| B1.1 | Recenser et identifier les ressources numériques | Intégration Angular HttpClient pour consommer une API REST, gestion des Observables pour les appels asynchrones. |
07
Résultats & apprentissages
Architecture Angular maîtrisée
Compréhension du cycle de vie Angular, des modules, composants et services comme unités de base d'une SPA.
TypeScript & typage fort
Définition d'interfaces TypeScript, typage des retours de fonctions, détection d'erreurs à la compilation.
RxJS & Observables
Gestion des flux asynchrones avec Observables, subscribe(), pipe() et opérateurs de transformation.
Routing SPA
Navigation sans rechargement entre vues, paramètres de route, lazy loading pour optimiser le bundle initial.