Fin module 10 : routes et modules

.dir-locals.el

@@ -4,5 +4,8 @@
 ((js-json-mode . ((js-indent-level . 2)
                   (eval . (prettier-js-mode 1))))
  (typescript-mode . ((typescript-indent-level . 2)
+                     (eval . (prettier-js-mode 1))
+                     (prettier-js-args . ("--single-quote" "--jsx-single-quote"))))
+ (typescript-ts-mode . ((typescript-indent-level . 2)
                         (eval . (prettier-js-mode 1))
                         (prettier-js-args . ("--single-quote" "--jsx-single-quote")))))

src/app/app-routing.module.ts

@@ -1,10 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', redirectTo: 'pokemons', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app.component.html

@@ -1,33 +1,7 @@
-<h1 class="center">Pokémons</h1>
+<nav>
+  <div class="nav-wrapper teal">
+    <a class="brand-logo center" href="#">Pokédex</a>
+  </div>
+</nav>
 
-<div class="container">
-  <div class="row">
-    <div *ngFor="let pokemon of pokemonList" class="col m4 s6">
-      <div
-        class="card horizontal"
-        (click)="selectPokemon(pokemon)"
-        pkmnBorderCard
-      >
-        <div class="card-image">
-          <img [alt]="pokemon.name" [src]="pokemon.picture" />
-        </div>
-        <div class="card-stacked">
-          <div class="card-content">
-            <p>
-              {{ pokemon.name }}
-            </p>
-            <p>
-              <small>{{ pokemon.created | date : "yyyy-MM-dd" }}</small>
-            </p>
-            <span
-              *ngFor="let type of pokemon.types"
-              class="{{ type | pokemonTypeColor }}"
-            >
-              {{ type }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,21 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { POKEMONS } from './mock-pokemon-list';
-import { Pokemon } from './pokemon';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
 })
-export class AppComponent implements OnInit {
-  pokemonList: Pokemon[] = POKEMONS;
-  pokemonSelected: Pokemon | undefined;
-
-  ngOnInit() {
-    console.table(this.pokemonList);
-  }
-
-  selectPokemon(pokemon: Pokemon) {
-    console.log(`Vous avez cliqué sur le pokémon ${pokemon.name}`);
-    this.pokemonSelected = pokemon;
-  }
-}
+export class AppComponent {}

src/app/app.module.ts

@@ -3,12 +3,12 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BorderCardDirective } from './border-card.directive';
-import { PokemonTypeColorPipe } from './pokemon-type-color.pipe';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { PokemonModule } from './pokemon/pokemon.module';
 
 @NgModule({
-  declarations: [AppComponent, BorderCardDirective, PokemonTypeColorPipe],
-  imports: [BrowserModule, AppRoutingModule],
+  declarations: [AppComponent, PageNotFoundComponent],
+  imports: [BrowserModule, PokemonModule, AppRoutingModule],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/page-not-found/page-not-found.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'page-404',
+  template: `
+    <div class="center">
+      <img
+        src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/035.png"
+      />
+      <h1>Hey, cette page n'existe pas !</h1>
+      <a routerLink="/pokemons" class="waves-effect waves-teal btn-flat">
+        Retourner à l' accueil
+      </a>
+    </div>
+  `,
+})
+export class PageNotFoundComponent {}

src/app/pokemon/detail-pokemon/detail-pokemon.component.html

@@ -0,0 +1,56 @@
+<div *ngIf="pokemon" class="row">
+  <div class="col s12 m8 offset-m2">
+    <h2 class="header center">{{ pokemon.name }}</h2>
+    <div class="card horizontal hoverable">
+      <div class="card-image">
+        <img [src]="pokemon.picture" />
+      </div>
+      <div class="card-stacked">
+        <div class="card-content">
+          <table class="bordered striped">
+            <tbody>
+              <tr>
+                <td>Nom</td>
+                <td>
+                  <strong>{{ pokemon.name }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Points de vie</td>
+                <td>
+                  <strong>{{ pokemon.hp }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Dégâts</td>
+                <td>
+                  <strong>{{ pokemon.cp }}</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>Types</td>
+                <td>
+                  <span
+                    *ngFor="let type of pokemon.types"
+                    class="{{ type | pokemonTypeColor }}"
+                    >{{ type }}</span
+                  >
+                </td>
+              </tr>
+              <tr>
+                <td>Date de création</td>
+                <td>
+                  <em>{{ pokemon.created | date : "yyyy-MM-dd" }}</em>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="card-action">
+          <a (click)="goToPokemonList()">Retour</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<h4 *ngIf="!pokemon" class="center">Aucun pokémon à afficher !</h4>

src/app/pokemon/detail-pokemon/detail-pokemon.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { POKEMONS } from '../mock-pokemon-list';
+import { Pokemon } from '../pokemon';
+
+@Component({
+  selector: 'app-detail-pokemon',
+  templateUrl: './detail-pokemon.component.html',
+})
+export class DetailPokemonComponent implements OnInit {
+  constructor(private route: ActivatedRoute, private router: Router) {}
+  pokemonList: Pokemon[];
+  pokemon: Pokemon | undefined;
+
+  ngOnInit(): void {
+    this.pokemonList = POKEMONS;
+    const pokemonId: string | null = this.route.snapshot.paramMap.get('id');
+    if (pokemonId) {
+      this.pokemon = this.pokemonList.find(
+        (pokemon) => pokemon.id === +pokemonId
+      );
+    }
+  }
+
+  goToPokemonList() {
+    this.router.navigate(['/pokemons']);
+  }
+}

src/app/pokemon/list-pokemon/list-pokemon.component.html

@@ -0,0 +1,31 @@
+<div class="container">
+  <div class="row">
+    <div
+      *ngFor="let pokemon of pokemonList"
+      class="col m4 s6"
+      (click)="goToPokemon(pokemon)"
+    >
+      <div class="card horizontal" pkmnBorderCard>
+        <div class="card-image">
+          <img [alt]="pokemon.name" [src]="pokemon.picture" />
+        </div>
+        <div class="card-stacked">
+          <div class="card-content">
+            <p>
+              {{ pokemon.name }}
+            </p>
+            <p>
+              <small>{{ pokemon.created | date : "yyyy-MM-dd" }}</small>
+            </p>
+            <span
+              *ngFor="let type of pokemon.types"
+              class="{{ type | pokemonTypeColor }}"
+            >
+              {{ type }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pokemon/list-pokemon/list-pokemon.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { POKEMONS } from '../mock-pokemon-list';
+import { Pokemon } from '../pokemon';
+
+@Component({
+  selector: 'app-list-pokemon',
+  templateUrl: './list-pokemon.component.html',
+})
+export class ListPokemonComponent {
+  pokemonList: Pokemon[] = POKEMONS;
+
+  constructor(private router: Router) {}
+
+  goToPokemon(pokemon: Pokemon) {
+    this.router.navigate(['/pokemon', pokemon.id]);
+  }
+}

src/app/pokemon/pokemon.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BorderCardDirective } from './border-card.directive';
+import { PokemonTypeColorPipe } from './pokemon-type-color.pipe';
+import { ListPokemonComponent } from './list-pokemon/list-pokemon.component';
+import { DetailPokemonComponent } from './detail-pokemon/detail-pokemon.component';
+import { RouterModule, Routes } from '@angular/router';
+
+const pokemonRoutes: Routes = [
+  { path: 'pokemons', component: ListPokemonComponent },
+  { path: 'pokemon/:id', component: DetailPokemonComponent },
+];
+
+@NgModule({
+  declarations: [
+    BorderCardDirective,
+    PokemonTypeColorPipe,
+    ListPokemonComponent,
+    DetailPokemonComponent,
+  ],
+  imports: [CommonModule, RouterModule.forChild(pokemonRoutes)],
+})
+export class PokemonModule {}