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

Fin section 5 : premiers pas et composants web

This commit is contained in:
Lucien Cartier-Tilet 2023-02-24 09:31:35 +01:00
parent 012fab3178
commit 7b9abb3aba
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
6 changed files with 162 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.dir-locals.el Normal file
View File

@ -0,0 +1,8 @@
;;; Directory Local Variables -*- no-byte-compile: t -*-
;;; For more information see (info "(emacs) Directory Variables")
((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")))))

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

@ -1,32 +1,20 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { POKEMONS } from './mock-pokemon-list';
import { Pokemon } from './pokemon';
@Component({
selector: 'app-root',
template: `
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center" class="content">
<h1>
Welcome to {{title}}!
</h1>
<span style="display: block">{{ title }} app is running!</span>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
`,
styles: []
template: `<h1>Liste de Pokémons</h1>`,
})
export class AppComponent {
title = 'ng-pokemon-app';
export class AppComponent implements OnInit {
pokemonList: Pokemon[] = POKEMONS;
ngOnInit() {
console.table(this.pokemonList);
this.selectPokemon(this.pokemonList[0]);
}
selectPokemon(pokemon: Pokemon) {
console.log(`Vous avez cliqué sur le pokémon ${pokemon.name}`);
}
}

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

@ -5,14 +5,9 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
})
export class AppModule { }
export class AppModule {}

124
src/app/mock-pokemon-list.ts Normal file
View File

@ -0,0 +1,124 @@
import { Pokemon } from "./pokemon";
export const POKEMONS: Pokemon[] = [
{
id: 1,
name: "Bulbizarre",
hp: 25,
cp: 5,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png",
types: ["Plante", "Poison"],
created: new Date(),
},
{
id: 2,
name: "Salamèche",
hp: 28,
cp: 6,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png",
types: ["Feu"],
created: new Date(),
},
{
id: 3,
name: "Carapuce",
hp: 21,
cp: 4,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/007.png",
types: ["Eau"],
created: new Date(),
},
{
id: 4,
name: "Aspicot",
hp: 16,
cp: 2,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/013.png",
types: ["Insecte", "Poison"],
created: new Date(),
},
{
id: 5,
name: "Roucool",
hp: 30,
cp: 7,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/016.png",
types: ["Normal", "Vol"],
created: new Date(),
},
{
id: 6,
name: "Rattata",
hp: 18,
cp: 6,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/019.png",
types: ["Normal"],
created: new Date(),
},
{
id: 7,
name: "Piafabec",
hp: 14,
cp: 5,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/021.png",
types: ["Normal", "Vol"],
created: new Date(),
},
{
id: 8,
name: "Abo",
hp: 16,
cp: 4,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/023.png",
types: ["Poison"],
created: new Date(),
},
{
id: 9,
name: "Pikachu",
hp: 21,
cp: 7,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/025.png",
types: ["Electrik"],
created: new Date(),
},
{
id: 10,
name: "Sabelette",
hp: 19,
cp: 3,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/027.png",
types: ["Normal"],
created: new Date(),
},
{
id: 11,
name: "Mélofée",
hp: 25,
cp: 5,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/035.png",
types: ["Fée"],
created: new Date(),
},
{
id: 12,
name: "Groupix",
hp: 17,
cp: 8,
picture:
"https://assets.pokemon.com/assets/cms2/img/pokedex/detail/037.png",
types: ["Feu"],
created: new Date(),
},
];

9
src/app/pokemon.ts Normal file
View File

@ -0,0 +1,9 @@
export class Pokemon {
id: number;
hp: number;
cp: number;
name: string;
picture: string;
types: Array<string>;
created: Date;
}

6
tsconfig.json
View File

@ -6,6 +6,7 @@
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"strictPropertyInitialization": false,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
@ -19,10 +20,7 @@
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
"lib": ["ES2022", "dom"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,