Fin module 10 : routes et modules
This commit is contained in:
parent
a876a3e70b
commit
de6b2a94ed
@ -5,4 +5,7 @@
|
||||
(eval . (prettier-js-mode 1))))
|
||||
(typescript-mode . ((typescript-indent-level . 2)
|
||||
(eval . (prettier-js-mode 1))
|
||||
(prettier-js-args . ("--single-quote" "--jsx-single-quote")))))
|
||||
(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")))))
|
||||
|
@ -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 { }
|
||||
export class AppRoutingModule {}
|
||||
|
@ -1,33 +1,7 @@
|
||||
<h1 class="center">Pokémons</h1>
|
||||
|
||||
<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>
|
||||
<nav>
|
||||
<div class="nav-wrapper teal">
|
||||
<a class="brand-logo center" href="#">Pokédex</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
@ -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 {}
|
||||
|
@ -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],
|
||||
})
|
||||
|
17
src/app/page-not-found/page-not-found.component.ts
Normal file
17
src/app/page-not-found/page-not-found.component.ts
Normal file
@ -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 {}
|
56
src/app/pokemon/detail-pokemon/detail-pokemon.component.html
Normal file
56
src/app/pokemon/detail-pokemon/detail-pokemon.component.html
Normal file
@ -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>
|
28
src/app/pokemon/detail-pokemon/detail-pokemon.component.ts
Normal file
28
src/app/pokemon/detail-pokemon/detail-pokemon.component.ts
Normal file
@ -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']);
|
||||
}
|
||||
}
|
31
src/app/pokemon/list-pokemon/list-pokemon.component.html
Normal file
31
src/app/pokemon/list-pokemon/list-pokemon.component.html
Normal file
@ -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>
|
18
src/app/pokemon/list-pokemon/list-pokemon.component.ts
Normal file
18
src/app/pokemon/list-pokemon/list-pokemon.component.ts
Normal file
@ -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]);
|
||||
}
|
||||
}
|
24
src/app/pokemon/pokemon.module.ts
Normal file
24
src/app/pokemon/pokemon.module.ts
Normal file
@ -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 {}
|
Loading…
Reference in New Issue
Block a user