Fin section 5 : premiers pas et composants web

.dir-locals.el

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

src/app/app.component.ts

@@ -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}`);
+  }
 }

src/app/app.module.ts

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

src/app/mock-pokemon-list.ts

@@ -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(),
+  },
+];

src/app/pokemon.ts

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

tsconfig.json

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