phundrak
/
ng-pokemon-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fin module 10 : routes et modules

This commit is contained in:
Lucien Cartier-Tilet 2023-02-24 14:54:17 +01:00
parent a876a3e70b
commit de6b2a94ed
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
15 changed files with 197 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.dir-locals.el
View File

@ -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")))))

10
src/app/app-routing.module.ts
View File

@ -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 {}

38
src/app/app.component.html
View File

@ -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>

18
src/app/app.component.ts
View File

@ -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 {}

8
src/app/app.module.ts
View File

@ -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
View 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 {}

0
src/app/border-card.directive.ts → src/app/pokemon/border-card.directive.ts
View File

56
src/app/pokemon/detail-pokemon/detail-pokemon.component.html Normal file
View 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
View 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
View 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
View 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]);
}
}

0
src/app/mock-pokemon-list.ts → src/app/pokemon/mock-pokemon-list.ts
View File

0
src/app/pokemon-type-color.pipe.ts → src/app/pokemon/pokemon-type-color.pipe.ts
View File

24
src/app/pokemon/pokemon.module.ts Normal file
View 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 {}

0
src/app/pokemon.ts → src/app/pokemon/pokemon.ts
View File