À l’heure où Angular 19 vient de sortir, je te propose de découvrir ses capacités à travers un projet ludique et pratique. Cette nouvelle version du framework apporte son lot d’améliorations significatives : des performances nettement optimisées grâce au nouveau compilateur Ivy, un support amélioré pour les signaux qui révolutionne la gestion d’état, et l’intégration native de l’hydratation qui accélère considérablement le rendu des applications. La documentation a également été repensée pour faciliter l’apprentissage des débutants.
Dans ce tutoriel, je vais explorer ces fonctionnalités avec toi en créant une application Pokédex complète qui s’appuie sur l’API Pokémon publique. Que tu sois un développeur chevronné cherchant à te familiariser avec Angular 19 ou un novice souhaitant apprendre le framework depuis zéro, ce projet te permettra de comprendre comment structurer ton application selon le modèle MVC tout en tirant parti des dernières innovations d’Angular.
Lire aussi : Angular : Comment créer votre premier projet ?
1. Prérequis
- Installez Node.js depuis nodejs.org
- Installez Angular CLI en ouvrant un terminal et en tapant :
npm install -g @angular/cli
2. Création du projet
ng new pokemon-app cd pokemon-app
- Répondez « yes » pour le routing
- Choisissez CSS comme format de style
3. Structure MVC (Modèle-Vue-Contrôleur)
- Modèle : Le fichier pokemon.model.ts définit l’interface Pokemon avec toutes ses propriétés
- Vue : Les fichiers .html et .css dans les composants
- Contrôleur : Les fichiers .component.ts et le service
4. Les composants principaux
a. Service (pokemon.service.ts)
- Crée avec : ng generate service services/pokemon
- Gère les appels API vers pokeapi.co
- Utilise HttpClient pour les requêtes HTTP
- Contient deux méthodes principales : getPokemonList et getPokemonDetail
b. Liste des Pokémon (pokemon-list)
- Crée avec : ng generate component components/pokemon-list
- Affiche la grille des Pokémon
- Utilise le service pour charger les données
- Gère le chargement et les erreurs
c. Détail d’un Pokemon (pokemon-detail)
- Créé avec : ng generate component components/pokemon-detail
- Affiche les informations sur un Pokémon spécifique
5. Installation et démarrage
npm install ng serve
Visitez http://localhost:4200 dans votre navigateur
Retrouves le code sur mon GitHub : https://github.com/claudebueno/pokemon-app
5. Structure du projet Pokédex
La structure de notre projet suit les bonnes pratiques Angular tout en respectant le modèle MVC (Modèle-Vue-Contrôleur). Voici comment les fichiers sont organisés :
# Structure du projet Pokédex Angular ``` pokemon-app/ ├── src/ │ ├── app/ │ │ ├── models/ │ │ │ └── pokemon.model.ts // Interface définissant la structure des données Pokémon │ │ │ │ │ ├── services/ │ │ │ └── pokemon.service.ts // Service gérant les appels API │ │ │ │ │ ├── components/ │ │ │ ├── pokemon-list/ // Composant liste des Pokémon │ │ │ │ ├── pokemon-list.component.ts │ │ │ │ ├── pokemon-list.component.html │ │ │ │ └── pokemon-list.component.css │ │ │ │ │ │ │ └── pokemon-detail/ // Composant détail d'un Pokémon (optionnel) │ │ │ ├── pokemon-detail.component.ts │ │ │ ├── pokemon-detail.component.html │ │ │ └── pokemon-detail.component.css │ │ │ │ │ ├── app.module.ts // Module principal de l'application │ │ ├── app.component.ts // Composant racine │ │ ├── app.component.html // Template du composant racine │ │ └── app.component.css // Styles du composant racine │ │ │ ├── assets/ // Ressources statiques (images, icônes) │ ├── environments/ // Configuration des environnements │ ├── index.html // Page HTML principale │ └── styles.css // Styles globaux │ ├── angular.json // Configuration Angular ├── package.json // Dépendances et scripts └── tsconfig.json // Configuration TypeScript ```
Répertoire « models »
Ce dossier contient nos interfaces TypeScript qui définissent la structure des données. Le fichier pokemon.model.ts constitue notre Modèle dans le pattern MVC. Il définit précisément toutes les propriétés d’un Pokémon (id, nom, types, sprites, etc.), ce qui nous permet de bénéficier du typage fort et de l’autocomplétion.
Répertoire « services »
Les services gèrent la logique métier et les appels aux API externes. Notre pokemon.service.ts encapsule toutes les requêtes HTTP vers l’API Pokémon et transforme les données brutes en objets exploitables par notre application. Ce service suit le principe d’injection de dépendances d’Angular et peut être facilement utilisé dans n’importe quel composant.
Répertoire « components »
Ce dossier regroupe tous nos composants, chacun ayant sa propre structure avec trois fichiers (TypeScript, HTML, CSS) :
1.pokemon-list :
affiche la grille des Pokémon disponibles
- Le fichier .ts agit comme le Contrôleur
- Le fichier .html constitue la Vue
- Le fichier .css gère les styles spécifiques au composant
2.pokemon-detail :
permet de voir plus d’informations sur un Pokémon spécifique, suivant la même structure.
Fichiers racine de l’application
- app.module.ts : déclare tous les composants et importe les modules nécessaires
- app.component.ts/html/css : composant racine qui sert de conteneur principal à l’application
Cette organisation modulaire permet une séparation claire des responsabilités, facilite la maintenance et rend le code plus évolutif. Tu pourras facilement ajouter de nouveaux composants ou fonctionnalités sans impacter le reste de l’application.
7. Fonctionnement du code
a. Le Modèle (pokemon.model.ts)
- Définit la structure des données Pokémon
- Permet la validation de type TypeScript
b. Le Service (pokemon.service.ts)
- Injecté dans les composants qui en ont besoin
- Utilise HttpClient pour les requêtes API
- Retourne des Observables (programmation réactive)
c. Le Composant Liste (pokemon-list.component.ts)
- Initialise le chargement des données au démarrage (ngOnInit)
- Gère l’état de chargement et les erreurs
- Transforme les données reçues pour l’affichage
d. La Vue (pokemon-list.component.html)
- Utilise les directives Angular (*ngIf, *ngFor)
- Affiche les données de manière responsive
- Gère différents états (chargement, erreur, données)
7. Fonctionnalités principales
- Affichage en grille responsive
- Chargement asynchrone des données
- Gestion des erreurs
- Affichage des types de Pokémon
- Images et noms formatés
8. Points importants à comprendre
- Les Observables pour la gestion des données asynchrones
- L’injection de dépendances pour le service
- Les directives structurelles (*ngIf, *ngFor)
- Le data binding avec [] et {{}}
- La gestion des états (chargement, erreur)
Tu as maintenant toutes les clés en main pour développer ta propre application Pokédex avec Angular 19. À travers ce projet, tu as pu explorer les fondamentaux du framework tout en découvrant ses nouvelles fonctionnalités impressionnantes. L’architecture MVC, les services, les composants et la gestion des données asynchrones n’ont plus de secrets pour toi.
N’hésite pas à enrichir cette base solide en ajoutant de nouvelles fonctionnalités comme la pagination, la recherche ou des détails sur chaque Pokémon. Angular 19 offre un potentiel illimité pour tes projets, et cette application Pokédex n’est que le début de ton aventure de développement. Alors, à toi de jouer !
