Formation Angular : Apprendre à créer un Pokédex complet

Découvrez comment construire une application web avec Angular : TypeScript, composants, data binding, directives et intégration d'API (PokeAPI).

#angular#typescript#pokedex#frontend-development#tutoriel-web#javascript#programmation

Watch
Pitch

Formation Angular

Construire un Pokédex complet

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Module 7

Module 8

Module 9

Module 10

Module 11

Module 12

TypeScript • RxJS • Router • HttpClient • TailwindCSS

Made by

Module 1

Introduction à Angular

Objectifs du module

Comprendre ce qu'est Angular et son écosystème

Créer et lancer un projet Angular

Découvrir la structure d'un projet

Pokédex Angular

Made by

Module 1

Qu'est-ce qu'Angular ?

Angular est un framework front-end développé par Google pour créer des Single Page Applications (SPA).

                    POKÉDEX - SPA ARCHITECTURE
                

                            URL: /pokemon
                        

Liste Pokémon

#001Bulbasaur

#002Ivysaur

#003Venusaur

                            URL: /pokemon/25
                        

Fiche Pikachu

ÉLECTRIK

ATK

DEF

VIT

Navigation instantanée, pas de rechargement de page

Made by

Module 1

L'Écosystème Angular

Outil	Rôle
CLI Angular CLI	Création et gestion de projet
TS TypeScript	Langage typé
Rx RxJS	Programmation réactive
SPA Angular Router	Navigation SPA
API HttpClient	Appels API (ex: PokeAPI)

Made by

Module 1

Créer un Projet

Téléchargement CLI

Installation globale de l'interface en ligne de commande pour manipuler l'environnement Angular.

Génération Projet (Scaffold)

Création de la structure du projet avec la configuration du routeur et du préprocesseur SCSS intégrée.

Exécution Local

Démarrage via ng serve pour compiler et surveiller les changements (Hot Module Replacement).

bash - pokedex

# Installer Angular CLI

                        npm install -g @angular/cli
                    
# Créer le projet Pokédex

                        ng new pokedex --routing --style=scss
                    
# Lancer le serveur

                        cd pokedex

                        ng serve

Aperçu du navigateur Ouvrir http://localhost:4200

Made by

Module 1

Structure du Projet

Explorer - Pokedex

                    
                    
                    pokedex/
                

                    ├── 
                    
                    src/
                

                    │   ├── 
                    
                    app/
                

                    │   │   ├── 
                    TS
                    app.component.ts      
                    # Composant racine
                

                    │   │   ├── 
                    HTML
                    app.component.html    
                    # Template
                

                    │   │   ├── 
                    TS
                    app.routes.ts         
                    # Routes
                

                    │   │   └── 
                    TS
                    app.config.ts         
                    # Configuration
                

                    │   ├── 
                    HTML
                    index.html                
                    # Page HTML unique
                

                    │   └── 
                    TS
                    main.ts                   
                    # Point d'entrée
                

                    ├── 
                    { }
                    angular.json                  
                    # Config Angular
                

                    └── 
                    { }
                    package.json                  
                    # Dépendances
                

src/app/

Le dossier principal. Contient les composants, les services et la logique de l'application Angular.

main.ts & index.html

Fichiers d'amorçage. main.ts initialise le framework, index.html est l'unique page chargée.

Fichiers *.json

angular.json configure le workspace. package.json liste dépendances et scripts.

Made by

Premier Composant

Module 1

app.component.ts

// app.component.ts
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',

                                Tag HTML utilisé dans index.html
                            
  template: `<h1>{{ title }}</h1>`,

                                Vue HTML avec interpolation
                            
  standalone: true

                                Composant autonome (Angular 17+)
                            
})
export class AppComponent {
  title = 'Pokédex Angular';

                                Propriété liée au template
                            
}

Made by

Points Clés

Module 1

Angular = Framework SPA complet

Une solution clé en main pour construire des applications web robustes, incluant architecture, routeur et client HTTP.

ng new crée un projet configuré

Génère instantanément un espace de travail avec toutes les meilleures pratiques configurées par défaut.

ng serve lance le serveur de dev

Fournit un environnement local performant avec compilation et rechargement à chaud (HMR).

Un composant = template + classe + styles

L'unité fondamentale combinant structure (HTML), logique (TypeScript) et présentation (CSS).

Ces concepts constituent la base du fonctionnement d'Angular.

Made by

Module 2

TypeScript Essentiel

Objectifs du module

Utiliser les types de base TypeScript

Définir des interfaces pour structurer les données

Typer les réponses d'API

Pokédex Angular

Made by

Module 2

Pourquoi TypeScript ?

❌

JavaScript

// JavaScript - Pas d'erreur... mais bug!
let pokemon = { name: "Pikachu" };
pokemon.naem = "Raichu";  // Typo non détectée
                

✅

TypeScript

// TypeScript - Erreur à la compilation!
interface Pokemon {
  name: string;
}
let pokemon: Pokemon = { name: "Pikachu" };
pokemon.naem = "Raichu";  // ERREUR: Property 'naem' does not exist

                                
                            
                                Property 'naem' does not exist on type 'Pokemon'.

                                Did you mean 'name'?
                            

Made by

Module 2

TypeScript Fondamentaux

Types de Base

pokemon.ts

                    // Primitifs

                    let pokemonName: string = "Pikachu";

                    let pokemonId: number = 25;

                    let isElectric: boolean = true;
                
                    // Tableaux

                    let types: string[] = ["electric", "fairy"];

                    let stats: number[] = [55, 40, 50, 90];
                
                    // Union types

                    let id: string | number = 25;

                    id = "pikachu";  // OK aussi

Système de Types

string

text

number

boolean

true/false

Array []

list

Union |

multiple

Made by

Interfaces - Pokémon

Module 2

interface Pokemon {
  id: number;
  name: string;
  height: number;
  weight: number;
  types: PokemonType[];
  stats: PokemonStat[];
  sprites: PokemonSprites;
}

interface PokemonType {
  slot: number;
  type: { 
    name: string; 
    url: string; 
  };
}

interface PokemonStat {
  base_stat: number;
  stat: { name: string; };
}

interface PokemonSprites {
  front_default: string;
  other: { 
    'official-artwork': { 
      front_default: string; 
    }; 
  };
}

                    Pokemon
                

                    PokemonType[]
                

                    PokemonStat[]
                

                    PokemonSprites
                

Made by

Interface - Réponse API Liste

Module 2

TypeScript

pokemon.interface.ts

// Réponse de GET /pokemon
interface PokemonListResponse {
  count: number;
  next: string | null;
  previous: string | null;
  results: PokemonListItem[];
}
interface PokemonListItem {
  name: string;
  url: string;
}

{}

api-response.json

{
  "count": 1281,
  "next": "...offset=20",
  "previous": null,
  "results": [
    {
      "name": "bulbasaur",
      "url": "https://pokeapi..."
    }
  ]
}

TypeScript • PokeAPI

Le typage TypeScript permet de documenter et valider la structure de la réponse JSON de l'API PokeAPI.

Made by

Types Optionnels et Readonly

Module 2

pokemon.ts

interfacePokemon {
  id: number;
  name: string;
  nickname?: string;               // Optionnel  readonly pokedexNumber: number;  // Non modifiable
}

const pikachu: Pokemon = {
  id: 25,
  name: "Pikachu",
  pokedexNumber: 25
};

pikachu.nickname = "Pika";     // ✅ OK
pikachu.pokedexNumber = 100;   // ❌ ERREUR: readonly

?

OPTIONNEL

✅

Le champ peut exister ou non. S'il n'est pas fourni à l'initialisation, sa valeur sera implicitement undefined.

                    readonly
                

IMMUABLE

🔒

La propriété ne peut être affectée qu'à la création de l'objet. Toute modification ultérieure provoquera une erreur TypeScript.

Made by

Points Clés

Module 2

TypeScript = JavaScript + Types

Profitez de tout l'écosystème JavaScript avec la rigueur et la sécurité du typage statique.

Les interfaces définissent la structure des objets

Créez des contrats robustes pour vos données et assurez leur intégrité à travers l'application.

Toujours typer les réponses API

Évitez les erreurs silencieuses en validant ou en affirmant précisément la structure reçue du backend.

Les erreurs sont détectées avant exécution

Le compilateur et votre IDE capturent en temps réel une grande partie des anomalies courantes.

Made by

Module 3

Les Composants

Créer des composants avec Angular CLI

Utiliser @Input pour passer des données

Utiliser @Output pour émettre des événements

Pokédex Angular

Made by

Anatomie d'un Composant

Module 3

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-pokemon-card',     // Tag HTML
  standalone: true,
  templateUrl: './pokemon-card.component.html',
  styleUrls: ['./pokemon-card.component.scss']
})
export class PokemonCardComponent {
  @Input() pokemon!: Pokemon;       // Donnée reçue
  @Output() selected = new EventEmitter<Pokemon>();
  
  onSelect() {
    this.selected.emit(this.pokemon);
  }
}

@Component

Décorateur qui définit le composant

selector

Nom du tag HTML

@Input()

Reçoit des données du parent

@Output()

Envoie des événements au parent

EventEmitter

Émet des valeurs

Made by

@Input : Parent → Enfant

Module 3

POKEMON-LIST (Parent)

                    export class PokemonListComponent {

                      pokemons = [{id: 25, name: 'Pikachu'}, ...];

                    }

                    <app-pokemon-card [pokemon]='p' />
                

POKEMON-CARD (Enfant)

                    export class PokemonCardComponent {

                      @Input() pokemon = {id: 25, name: '...'};

                    }

pokemon-card.component.ts

ENFANT (Class)

                    export class PokemonCardComponent {

                      @Input() pokemon!: Pokemon;

                    }

pokemon-list.component.html

PARENT (Template)

                    <!-- pokemon-list.component.html -->

                    <app-pokemon-card [pokemon]="pikachu">

                    </app-pokemon-card>

Made by

Module 3

@Output : Enfant → Parent

app.component.html

Parent Template

<app-pokemon-card 
  [pokemon]="p" 
  (selected)="onPokemonSelected($event)">
</app-pokemon-card>

(selected)

➔

$event : Pokemon { ... }

pokemon-card.component.ts

Enfant Class

@Output() selected = new EventEmitter<Pokemon>();

onClick() {
  this.selected.emit(this.pokemon);
}

pokemon-card.component.html

Enfant HTML

<div class="card" (click)="onClick()">
  <img [src]="pokemon.sprites.front_default">
  <h3>{{ pokemon.name }}</h3>
</div>

Made by

Module 3

Template du Composant

      
      pokemon-card.component.html

1<div class="pokemon-card">
2  <span class="pokemon-id">
3    #{{ pokemon.id | number:'3.0-0' }}
4  </span>
5  
6  <img 
7    [src]="pokemon.sprites.other['official-artwork'].front_default" 
8    [alt]="pokemon.name">
9  
10  <h3>{{ pokemon.name | titlecase }}</h3>
11  
12  <div class="types">
13    @for (type of pokemon.types; track type.slot) {
14      <span class="type-badge">{{ type.type.name }}</span>
15    }
16  </div>
17</div>

        #025
      

Pikachu

Electric

Pipe

Directive

Made by

Lifecycle Hooks

Module 3

pokemon-card.component.ts

export class PokemonCardComponent 
  implements OnInit, OnDestroy {
  @Input() pokemon!: Pokemon;
  ngOnInit() {
    // Appelé une fois après création
    console.log('Card loaded for:', 
      this.pokemon.name);
  }
  ngOnDestroy() {
    // Appelé avant destruction
    console.log('Card destroyed');
  }
}

                        Constructor
                    

→ Component created

                            ngOnInit
                        

→ After first render

Use this for API calls

                        ngOnChanges
                    

→ @Input changed

                        ngDoCheck
                    

→ Change detection

                            ngOnDestroy
                        

→ Before removal

Cleanup subscriptions

Made by

Points Clés

Module 3 Les Composants

Un composant = une brique UI réutilisable

@Input pour recevoir des données du parent

@Output + EventEmitter pour émettre des événements

ngOnInit pour l'initialisation

Toujours importer les composants enfants dans imports: []

Made by

Module 4

Templates et Data Binding

Objectifs du module

Maîtriser les 4 types de data binding

Utiliser @if, @for, @switch

Appliquer les pipes de transformation

{{ }} Interpolation

[ ] Property

( ) Event

[( )] Two-Way

Formation Angular

Made by

Module 4

Les 4 Types de Binding

Syntaxe

Direction

Exemple Pokémon

{{ }}

interpolation

Composant Vue

                    {{ pokemon.name }}
                

[ ]

property binding

Composant Vue

                    [src]="pokemon.sprites.front_default"
                

( )

event binding

Vue Composant

                    (click)="selectPokemon(pokemon)"
                

[( )]

two-way

Bidirectionnel

                    [(ngModel)]="searchTerm"
                

Made by

Module 4

Directives de Contrôle

@if · @for · @switch

@if

@if (pokemon) {
  <app-pokemon-card 
    [pokemon]="pokemon" />
} @else {
  <p>Chargement...</p>
}

@for

@for (pokemon of pokemons; 
      track pokemon.id) {
  <app-pokemon-card 
    [pokemon]="pokemon" />
} @empty {
  <p>Aucun Pokémon trouvé</p>
}

@switch

@switch (pokemon.types[0].type.name) {
  @case ('fire') {
    <span class="fire">Feu</span>
  }
  @case ('water') {
    <span class="water">Eau</span>
  }
  @default {
    <span>{{ type }}</span>
  }
}

⚡ Toujours utiliser track dans @for!

Made by

Module 4

Pipes - Transformations

<!-- Texte -->
{{ pokemon.name | uppercase }}         <!-- PIKACHU -->
{{ pokemon.name | titlecase }}         <!-- Pikachu -->

<!-- Nombres -->
{{ pokemon.id | number:'3.0-0' }}      <!-- 025 -->
{{ pokemon.weight / 10 | number:'1.1-1' }} kg  <!-- 6.0 kg -->

<!-- JSON (debug) -->
<pre>{{ pokemon | json }}</pre>

<!-- Async (Observables) -->
@for (pokemon of pokemons$ | async; track pokemon.id) {
  <span>{{ pokemon.name }}</span>
}

"pikachu" | uppercase ➔ PIKACHU

"pikachu" | titlecase ➔ Pikachu

25 | number:'3.0-0' ➔ 025

60 / 10 | number:'1.1-1' ➔ 6.0 kg

Made by

Points Clés

Module 4

{{ }} pour afficher des valeurs

[ ]

[ ] pour lier des propriétés

( )

( ) pour écouter des événements

@if, @for, @switch
pour la logique de contrôle

Toujours track dans @for
pour la performance

Made by

Module 5

Routing et Navigation

Objectifs du module

Configurer les routes de l'application

Naviguer entre les pages

Récupérer les paramètres de route

                    localhost:4200/pokemons/25
                

Path

'/'

Path

'/pokemons'

Matched Path

                            '/pokemons/:id'
                        

HomeComponent

ListComponent

DetailComponent

                            id=25
                        

                    <router-outlet></router-outlet>
                

Pokédex Angular

Made by

DESIGNER-MADE
PRESENTATION,
GENERATED FROM
YOUR PROMPT

Create your own professional slide deck with real images, data charts, and unique design in under a minute.

Generate For Free

Formation Angular : Apprendre à créer un Pokédex complet

Découvrez comment construire une application web avec Angular : TypeScript, composants, data binding, directives et intégration d'API (PokeAPI).

Formation Angular

Construire un Pokédex complet

TypeScript • RxJS • Router • HttpClient • TailwindCSS

Module 1

Introduction à Angular

Pokédex Angular

Comprendre ce qu'est Angular et son écosystème

Créer et lancer un projet Angular

Découvrir la structure d'un projet

Qu'est-ce qu'Angular ?

Module 1

L'Écosystème Angular

Outil

Rôle

Angular CLI

Création et gestion de projet

TypeScript

Langage typé

RxJS

Programmation réactive

Angular Router

Navigation SPA

HttpClient

Appels API (ex: PokeAPI)

Module 1

Créer un Projet

Structure du Projet

Module 1

Premier Composant

Module 1

Tag HTML utilisé dans index.html

Vue HTML avec interpolation

Composant autonome (Angular 17+)

Propriété liée au template

Points Clés

Module 1

Angular = Framework SPA complet

Une solution clé en main pour construire des applications web robustes, incluant architecture, routeur et client HTTP.

ng new

crée un projet configuré

Génère instantanément un espace de travail avec toutes les meilleures pratiques configurées par défaut.

ng serve

lance le serveur de dev

Fournit un environnement local performant avec compilation et rechargement à chaud (HMR).

Un composant = template + classe + styles

L'unité fondamentale combinant structure (HTML), logique (TypeScript) et présentation (CSS).

Ces concepts constituent la base du fonctionnement d'Angular.

Module 2

TypeScript Essentiel

Pokédex Angular

Utiliser les types de base TypeScript

Définir des interfaces pour structurer les données

Typer les réponses d'API

Pourquoi TypeScript ?

Module 2

Types de Base

Module 2

Système de Types

Interfaces - Pokémon

Module 2

Interface - Réponse API Liste

TypeScript • PokeAPI

Types Optionnels et Readonly

Points Clés

Module 2

TypeScript = JavaScript + Types

Profitez de tout l'écosystème JavaScript avec la rigueur et la sécurité du typage statique.

Les interfaces définissent la structure des objets

Créez des contrats robustes pour vos données et assurez leur intégrité à travers l'application.

Toujours typer les réponses API

Évitez les erreurs silencieuses en validant ou en affirmant précisément la structure reçue du backend.

Les erreurs sont détectées avant exécution

Le compilateur et votre IDE capturent en temps réel une grande partie des anomalies courantes.

Module 3

Les Composants

Créer des composants avec Angular CLI

Utiliser @Input pour passer des données

Utiliser @Output pour émettre des événements

Pokédex Angular

Anatomie d'un Composant

@Input : Parent → Enfant

Module 3

@Output : Enfant → Parent

Template du Composant

Lifecycle Hooks

Points Clés

Module 3 Les Composants

Un composant = une brique UI réutilisable

@Input pour recevoir des données du parent

@Output + EventEmitter pour émettre des événements

ngOnInit pour l'initialisation

Toujours importer les composants enfants dans imports: []

Module 4

Templates et Data Binding

Maîtriser les 4 types de data binding

Utiliser @if, @for, @switch

Appliquer les pipes de transformation

Formation Angular

Les 4 Types de Binding

Module 4

Syntaxe

Direction

Exemple Pokémon

interpolation

[ ]

property binding

[src]="pokemon.sprites.front_default"

( )

event binding

(click)="selectPokemon(pokemon)"

[( )]

two-way

Bidirectionnel

[(ngModel)]="searchTerm"

@if · @for · @switch

Directives de Contrôle

Pipes - Transformations

Points Clés

Module 4

pour afficher des valeurs

[ ]

pour lier des propriétés

( )

pour écouter des événements

@if, @for, @switch

pour la logique de contrôle

Toujours

track

dans

@for

pour la performance

Module 5

Routing et Navigation

Pokédex Angular

Configurer les routes de l'application

Naviguer entre les pages

Récupérer les paramètres de route

angular
typescript
pokedex
frontend-development
tutoriel-web
javascript
programmation

Formation Angular

Construire un Pokédex complet

Introduction à Angular

Objectifs du module

Qu'est-ce qu'Angular ?

Liste Pokémon

Fiche Pikachu

L'Écosystème Angular

Créer un Projet

Téléchargement CLI

Génération Projet (Scaffold)

Exécution Local

Structure du Projet

src/app/

main.ts & index.html

Fichiers *.json

Premier Composant

Points Clés

Angular = Framework SPA complet

ng new crée un projet configuré

ng serve lance le serveur de dev

Un composant = template + classe + styles

TypeScript Essentiel

Objectifs du module

Pourquoi TypeScript ?

JavaScript

TypeScript

Types de Base

Système de Types

Interfaces - Pokémon

Interface - Réponse API Liste

Types Optionnels et Readonly

OPTIONNEL

IMMUABLE

Points Clés

TypeScript = JavaScript + Types

Les interfaces définissent la structure des objets

Toujours typer les réponses API

Les erreurs sont détectées avant exécution

Les Composants

Anatomie d'un Composant

@Input : Parent → Enfant

@Output : Enfant → Parent

Template du Composant

Lifecycle Hooks

Points Clés

Templates et Data Binding

Objectifs du module

Les 4 Types de Binding

Directives de Contrôle

@if · @for · @switch

Pipes - Transformations

Points Clés

Routing et Navigation

Objectifs du module

DESIGNER-MADE PRESENTATION, GENERATED FROM YOUR PROMPT

Formation Angular : Apprendre à créer un Pokédex complet

DESIGNER-MADE
PRESENTATION,
GENERATED FROM
YOUR PROMPT