¿Qué debo aprender primero?

import App from './App.svelte';

const app = new App({
	target: document.body,
});

export default app;

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// AppModule contiene todas las declaraciones de Componentes
// Y los Modulos de Angular a utilizar etc.
import { AppModule } from './app/app.module';

// Tienes diferentes archivos de configuración segun el entorno
import { environment } from './environments/environment';

if (environment.production) {
  //Corre con caracteristicas especificas de producción
  enableProdMode();
}

// No tenemos que decirele donde renderizar la aplicación
// Podemos utilzar esta etiqueta directamente en el html:
// <app-root></app-root>
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

<script>
  import PokedexScreen from './PokedexScreen.svelte'
  import PokemonForm from './PokemonForm.svelte'
</script>

<div class="pokedex">
  <div class="pokedex-left">
    <div class="pokedex-left-top">
      <div class="light is-sky is-big"/>
      <div class="light is-red" />
      <div class="light is-yellow" />
      <div class="light is-green" />
    </div>
    <div class="pokedex-screen-container">
      <PokedexScreen />
    </div>
    <div class="pokedex-left-bottom">
      <div class="pokedex-left-bottom-lights">
        <div class="light is-blue is-medium" />
        <div class="light is-green is-large" />
        <div class="light is-orange is-large" />
      </div>
      <PokemonForm />
    </div>
  </div>
  <div class="pokedex-right-front" />
  <div class="pokedex-right-back" />
</div>

<style>
  .pokedex {
    perspective: 1000px;
    position: relative;
    overflow: hidden;
    height: 31rem;
    width: 23rem;
    margin: 0 auto;
    overflow: initial;
    box-shadow: 0 2px 12px -2px rgba(255, 0, 0, 0.4);
  }
</style>

<template>
  <div class="pokedex">
    <div class="pokedex-left">
      <div class="pokedex-left-top">
        <div class="light is-sky is-big in-animated"/>
        <div class="light is-red" />
        <div class="light is-yellow" />
        <div class="light is-green" />
      </div>
      <div class="pokedex-screen-container">
        <pokedex-screen />
      </div>
      <div class="pokedex-left-bottom">
        <div class="pokedex-left-bottom-lights">
          <div class="light is-blue is-medium" />
          <div class="light is-green is-large" />
          <div class="light is-orange is-large" />
        </div>
        <pokedex-form/>
      </div>
    </div>
    <div class="pokedex-right-front" />
    <div class="pokedex-right-back" />
  </div>
</template>

<script>
import PokedexScreen from './PokedexScreen.vue'
import PokedexForm from './PokedexForm.vue'

export default {
  name: 'Pokedex',
  components: {
    PokedexScreen,
    PokedexForm
  },
}
</script>

ng generate component pokedex

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'pokedex',
  templateUrl: './pokedex.component.html',
  styleUrls: ['./pokedex.component.css']
})
export class PokedexComponent implements OnInit {
  constructor() { }

  ngOnInit() { }
}

<div class="pokedex">
  <div class="pokedex-left">
    <div class="pokedex-left-top">
      <div class="light is-sky is-big"></div>
      <div class="light is-red"></div>
      <div class="light is-yellow"></div>
      <div class="light is-green"></div>
    </div>
    <div class="pokedex-screen-container">
      <app-pokedex-screen></app-pokedex-screen>
    </div>
    <div class="pokedex-left-bottom">
      <div class="pokedex-left-bottom-lights">
        <div class="light is-blue is-medium"></div>
        <div class="light is-green is-large"></div>
        <div class="light is-orange is-large"></div>
      </div>
      <app-pokedex-form></app-pokedex-form>
    </div>
  </div>
  <div class="pokedex-right-front"></div>
  <div class="pokedex-right-back"></div>
</div>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PokedexComponent } from './pokedex/pokedex.component';
import { PokedexScreenComponent } from './pokedex-screen/pokedex-screen.component';
import { PokedexFormComponent } from './pokedex-form/pokedex-form.component';

@NgModule({
  declarations: [
    AppComponent,
    PokedexComponent,
    PokedexScreenComponent,
    PokedexFormComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div class="pokedex">
</div>

<style>
  .pokedex {
    height: 31rem;
    width: 23rem;
  }
<style>

<template>
  <div class="pokedex">
  </div>
</template>

<style>
  .pokedex {
    height: 31rem;
    width: 23rem;
  }
<style>

@Component({
  styleUrls: ['./pokedex.component.css']
})

"styles": [
    "src/styles.css"
  ],

<img
  src='img/error.gif'
  alt="Hubo un error buscando tu pokemon"
  class="pokedex-no-screen"
/>

<img
  v-if="error"
  src='../assets/error.gif'
  alt="Hubo un error buscando tu pokemon"
  class="pokedex-no-screen"
/>

// Dentro de `angular.json`
"assets": [
  "src/favicon.ico",
  "src/assets"
],

// Dentro de tu componente
<img
  *ngIf="error"
  src="/assets/error.gif"
  alt="Hubo un error buscando tu pokemon"
  class="pokedex-no-screen"
/>

let error = false
  let loading = false
  let pokemon = null
  const RandomId = Math.floor(Math.random() * 806 + 1)
  let pokemonId = RandomId.toString()


  // Puedes cambiar los valores en tu estado muy fácilmente
  error = true
  pokemonId = 25

export default {
  name: 'Pokedex',
  components: {
    PokedexScreen,
    PokedexForm
  },
  data () {
    return {
      error: false,
      loading: true,
      pokemon: null,
      pokemonId: Math.floor(Math.random() * 806 + 1).toString()
    }
  },
}

this.error = true
// error = true

public error:Boolean = false
public loading:Boolean = true
public pokemon:Object = null
public pokemonID:String = Math.floor(Math.random() * 806 + 1).toString()


// Para cambiar el estado
this.error = true
// error = true

// Solamente esta cargando mientras hacemos la petición,
  // cuando esta se resuelve o fue un éxito u un error.
  const getPokemon = () => {
    fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
      .then(res => res.json())
      .then(data => {
        pokemon = data
        loading = false
      })
      .catch(err => {
        loading = false
        error = true
      })
  }

  onMount(() => {
    getPokemon()
  })

<script>
import PokedexScreen from './PokedexScreen.vue'
import PokedexForm from './PokedexForm.vue'

export default {
  name: 'Pokedex',
  components: {
    PokedexScreen,
    PokedexForm
  },

  data () {
    return {
      error: false,
      loading: true,
      pokemon: null,
      pokemonId: Math.floor(Math.random() * 806 + 1).toString()
    }
  },

  created () {
    this.getPokemon()
  },

  methods: {
    // Mientras se llama a la API, loading es verdadero,
    // cuando la API nos da una respuesta, el estado se actualiza
    // dependiendo de si todo fue un éxito o un fracaso
    getPokemon () {
      fetch(`https://pokeapi.co/api/v2/pokemon/${this.pokemonId}`)
        .then(res => res.json())
        .then(data => {
          this.pokemon = data
          this.loading = false
        })
        .catch(err => {
          this.loading = false
          this.error = true
        })
    },
  }
}
</script>

ng generate service http    // abreviado como ng g s http

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // Añadimos el cliente

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { } // Añadimos el cliente

  // Añadimos el metodo que traera nuestros datos
  getPokemon(pokemonId) {
    return this.http.get(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
  }
}

import { HttpClientModule } from '@angular/common/http';  // Añadimos

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule   // Lo añadimos a la aplicación
  ],

//importamos nuestro servicio en pokedex.component.ts
import { HttpService } from '../http.service'

export class PokedexComponent implements OnInit {
  public error:Boolean = false
  public loading:Boolean = true
  public pokemon:Object = null
  public pokemonID:String = Math.floor(Math.random() * 806 + 1).toString()

  // Lo declaramos en el constructor de nuestro componente.
  constructor(private _http: HttpService) { }

  ngOnInit(): void {
    this.searchPokemon()
  }

  // Nuestra función
  searchPokemon(): void {
    // Este es el metodo creado en http.service.ts
    this._http.getPokemon(this.pokemonID)
      .subscribe(
        data => {
          this.pokemon = data
          this.loading = false
          this.error = false
        },
        error => {
          this.pokemon = null
          this.loading = false
          this.error = true
        }
      )
  }
}

<PokedexScreen
  pokemon={pokemon}
  loading={loading}
  error={error}
/>

<script>
  export let error
  export let loading
  export let pokemon
</script>

<div class="pokemon-info">
  <h2 class="pokemon-name">{pokemon.name}</h2>
  <img class="pokemon-img" src={pokemon.sprites.front_default} alt={pokemon.name} />
  <ul class="pokemon-stats">
    // Aqui iteraremos sobre la lista de estadisticas
  </ul>
</div>

<pokedex-screen
  v-bind:pokemon="pokemon"
  v-bind:loading="loading"
  v-bind:error="error"
/>

props: {
    // PropTypes on Vue
    pokemon: {
      type: Object,
      default: () => {}
    },
    error: {
      type: Boolean,
      default: () => false
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  }

<template>
  <div class="pokedex-screen">
    <div class="pokemon-info" v-else>
      <h2 class="pokemon-name">{{pokemon.name}}</h2>
      <img
        class="pokemon-img"
        v-bind:src="pokemon.sprites.front_default"
        :alt="pokemon.name" />
      <ul class="pokemon-stats">
      // Aqui iteraremos sobre las estadisticas
      </ul>
    </div>
  </div>
</template>

<app-pokedex-screen
  [loading]='loading'
  [error]='error'
  [pokemon]='pokemon'
></app-pokedex-screen>

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-pokedex-screen',
  templateUrl: './pokedex-screen.component.html',
  styleUrls: ['./pokedex-screen.component.css']
})
export class PokedexScreenComponent implements OnInit {
  @Input() public loading: boolean;
  @Input() public error: boolean;
  @Input() public pokemon: object;

  constructor() { }

  ngOnInit() {}

}

<div class="pokedex-screen">
  <div class="pokemon-info">
    <h2 class="pokemon-name">{{pokemon.name}}</h2>
    <img class="pokemon-img" src={{pokemon.sprites.front_default}} alt={pokemon.name}} />
    <ul class="pokemon-stats">

    </ul>
  </div>
</div>

<ul>
  // Para cada gato de la lista de gatos imprime una etiqueta <li> con el nombre del gato.
  // El identicador unico del componente es el segundo parametro y será el id del gato.
	{#each cats as cat (cat.id)}
    <li>{cat.name}</li>
	{/each}
</ul>

// Pokedex.svelte ...
<script>
  import Stat from './Stat.svelte'
</script>
// Pokedex.svelte...
<ul class="pokemon-stats">
  {#each pokemon.stats as item (item.stat.name)}
    <Stat item={item}/>
  {/each}
</ul>
// Pokedex.svelte...


// Debtro de Stat.svelte...
<script>
  export let item
</script>

<li class="pokemon-stat">
  <span class="stat-name">
    <b>{item.stat.name}: </b>
  </span>
  <span>{item.base_stat}</span>
</li>

<ul>
  <li v-for="cat in cats" v-bind:key="cat.id">
    {cat.name}
  </li>
</ul>

// ...Pokedex.vue
<ul class="pokemon-stats">
  <Stat
    v-bind:item="item"
    v-for="item in pokemon.stats"
    v-bind:key="item.stat.name"
  />
</ul>
// ...Pokedex.vue
<script>
import Stat from './Stat.vue'
export default {
  name: 'PokedexScreen',
  components: {
    Stat
  },
<script>
// ...Pokedex.vue


// Dentro de Stat.vue
<template>
  <li class="pokemon-stat">
    <span class="stat-name">
      <b>{{item.stat.name}}: </b>
    </span>
    <span>{{item.base_stat}}</span>
  </li>
</template>

<script>
export default {
  name: 'Stat',
  props: {
    // PropTypes on Vue
    item: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<ul>
    <li *ngFor="let cat of cats; trackBy: cat.id" [cat]="cat">
      {{cat.name}}
    </li>
  </ul>

// pokedex-screen.component.html ...
<ul class="pokemon-stats">
  <app-stat>
    class="pokemon-stat"
    *ngFor="let item of pokemon.stats;"
    [item]="item"
  >
  </app-stat>
</ul>
// pokedex-screen.component.html ...


// stat.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-stat',
  templateUrl: './stat.component.html',
  styleUrls: ['./stat.component.css']
})
export class StatComponent {
  @Input() item;
}
// stat.component.html
<li class="pokemon-stat">
  <span class="stat-name"><b>{{item.stat.name}}: </b></span>
  <span>{{item.base_stat}}</span>
</li>

<div class="pokedex-screen">
  // Habrimos un bloque condicional
  // Si ocurre un error, entonces...
  {#if error}
    <img
      src='img/error.gif'
      alt="Hubo un error buscando tu pokemon"
      class="pokedex-no-screen"
    />
  // Si no hay un pokemon o esta cargando, entonces...
  {:else if !pokemon || loading}
    <img
      src='img/loading.gif'
      alt="Aún no hay ningun pokeom"
      class="pokedex-no-screen"
    />
  // Todo bien hasta ahora, entonces...
  {:else}
    <div class="pokemon-info">
      <h2 class="pokemon-name">{pokemon.name}</h2>
      <img class="pokemon-img" src={pokemon.sprites.front_default} alt={pokemon.name} />
      <ul class="pokemon-stats">
        {#each pokemon.stats as item (item.stat.name)}
          <Stat item={item}/>
        {/each}
      </ul>
    </div>
  {/if}
  // Cerramos el {#if}
</div>

<template>
  <div class="pokedex-screen">
    <img
    // Si hay un error, entonces...
      v-if="error"
      src='../assets/error.gif'
      alt="Hubo un error buscando tu pokemon"
      class="pokedex-no-screen"
    />
    <img
    // Si esta cargando, entonces...
      v-else-if="loading"
      src='../assets/loading.gif'
      alt="Estamos buscando tu pokemon"
      class="pokedex-no-screen"
    />
    // Si todo esta bien, esta es la opción por defecto...
    <div class="pokemon-info" v-else>
      <h2 class="pokemon-name">{{pokemon.name}}</h2>
      <img
        class="pokemon-img"
        v-bind:src="pokemon.sprites.front_default"
        v-bind:alt="pokemon.name" />
      <ul class="pokemon-stats">
        <Stat
          v-bind:item="item"
          v-for="item in pokemon.stats"
          v-bind:key="item.stat.name"
        />
      </ul>
    </div>
  </div>
</template>

<div class="pokedex-screen">
  // Si hay un error, entonces...
  <img
    *ngIf="error"
    src="/assets/error.gif"
    alt="Hubo un error buscando tu pokemon"
    class="pokedex-no-screen"
  />
  // Si esta cargando y no hay un error, entonces...
  <img
    *ngIf="loading && !error;"
    src="/assets/loading.gif"
    alt="Aún no hay ningun pokemon"
    class="pokedex-no-screen"
  /> :
  // Si hay un pokemon y no está cargando, ni hay un error, entonces...
  <div class="pokemon-info" *ngIf="pokemon && !loading && !error">
    <h2 class="pokemon-name">{{pokemon.name}}</h2>
    <img class="pokemon-img" src={{pokemon.sprites.front_default}} alt={pokemon.name}} />
    <ul class="pokemon-stats">
      <li
        class="pokemon-stat"
        *ngFor="let item of pokemon.stats;"
      >
        <app-stat [item]="item"></app-stat>
      </li>
    </ul>
  </div>
</div>

<div class="pokedex-left-top">
  <div class={`light is-sky is-big ${loading ? 'is-animated' : ''}`}/>
  <div class="light is-red" />
  <div class="light is-yellow" />
  <div class="light is-green" />
</div>

<div class="light is-sky is-big" :class="loading && 'is-animated'"/>
<div >

<div class="pokedex-left-top">
  <div class="light is-sky is-big" [class.is-animates]="loading"></div>
  <div class="light is-red"></div>
  <div class="light is-yellow"></div>
  <div class="light is-green"></div>
</div>

<script>
  let pokemonName

  const handleSubmit = e => {
    e.preventDefault()

  }
</script>

<form class="pokemon-form" on:submit={handleSubmit}>
  <input
    class="pokemon-input"
    type="text"
    name="pokemon"
    bind:value={pokemonName}
    placeholder="Busca tu pokemon"
    autocomplete="off"/>
  <input type="submit" class="pokemon-btn" value=""/>
</form>

<template>
  <form class="pokemon-form" v-on:submit={handleSubmit}>
    <input
      class="pokemon-input"
      type="text"
      name="pokemon"
      v-model="pokemonName"
      placeholder="Busca tu pokemon"
      autocomplete="off"/>
    <input
      type="submit"
      class="pokemon-btn"
      value=""
    />
  </form>
</template>

<script>
export default {
  name: 'PokedexForm',

  data () {
    return {
      pokemonName: ''
    }
  },

  methods: {
    handleSubmit (e) {
      e.preventDefault() // Evitamos que el formulario mande una query por la url
    }
  }
}
</script>

// imports
import { FormsModule } from '@angular/forms';

@NgModule({
  //...
  imports: [
    BrowserModule,
    FormsModule,       // add
  ],
})

//pokedex-form.compontent.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-pokedex-form',
  templateUrl: './pokedex-form.component.html',
  styleUrls: ['./pokedex-form.component.css']
})
export class PokedexFormComponent{
  pokemonId: string = ''

  constructor() { }

  onSubmit(e) {
    e.preventDefault()
    // Llamamos a la API
    this.pokemonId = '' // Reiniciamos el formulario
  }
}


//pokedex-form.compontent.html
<form class="pokemon-form" (ngSubmit)="handleSubmit($event)">
  <input
    class="pokemon-input"
    type="text"
    [(ngModel)]="pokemonId"
    name="pokemonId"
    placeholder="Busca tu pokemon"
    autoComplete="off">
  <input type="submit" class="pokemon-btn" value="">
</form>

// ...Pokedex.svelte
<PokemonForm
  bind:pokemonId={pokemonId}
  bind:loading={loading}
  bind:error={error}
/>


// Dentro de PokedexForm.svelte
<script>
  let pokemonName
  // Recibimos los valores de nuestro estado
  export let pokemonId
  export let loading
  export let error

  const handleSubmit = e => {
    e.preventDefault()
    // Loading será true por que hará una petición a la API
    if(pokemonName !== ''){
      error = false
      loading = true
      const newPokemonId = window.isNaN(parseInt(pokemonName)) ? pokemonName.toLowerCase() : pokemonName
      pokemonId = newPokemonId
      pokemonName = '' // Reiniciamos el formulario
      return
    }
    error = true // Si mandas el formulario vacío, hay un error
  }
</script>

<form class="pokemon-form" on:submit={handleSubmit}>

//Si cambia, entonces..
$: if(pokemonId){
  getPokemon()
}

<template>
  <form class="pokemon-form" on:submit={handleSubmit}>

  </form>
</template>


<script>
export default {
  name: 'PokedexForm',
  data () {
    return {
      pokemonName: ''
    }
  },
  methods: {
    search (e) {
      e.preventDefault()
      const pokemonName = this.pokemonName
      const newPokemonId = window.isNaN(parseInt(pokemonName)) ? pokemonName.toLowerCase() : pokemonName
      this.$emit('submit', newPokemonId)
    }
  }
}
</script>

// ...Pokedex.vue
<pokedex-form
  v-on:submit="handleSubmit($event)"
/>
// Pokedex.vue..

<script>
//...
export default {
  //...
  methods: {
    getPokemon () {
      //...
    },
    handleSubmit (pokemonId) {
      if (pokemonId !== '') {
        this.error = false
        this.loading = true
        this.pokemonId = pokemonId
        this.getPokemon()
        return
      }
      this.error = true
    }
  }
}
</script>

// Importamos lo necesario de `@angular/core`
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-pokedex-form',
  templateUrl: './pokedex-form.component.html',
  styleUrls: ['./pokedex-form.component.css']
})
export class PokedexFormComponent{
  //Creamos un nuevo emisor de Eventos
  @Output() submit = new EventEmitter<string>();
  pokemonId: string = ''

  constructor() { }

  onSubmit(e) {
    e.preventDefault()
    // Al mandar el formulario, emitimos el evento con el valor actual del formulario
    this.submit.emit(this.pokemonId)
    this.pokemonId = ''
  }
}

<app-pokedex-form
  (searchPokemon)='handleSubmit($event)'
></app-pokedex-form>

export class PokedexComponent implements OnInit {
  // ...
  ngOnInit(): void {
    this.searchPokemon()
  }

  searchPokemon(): void {
    // ...
  }

  handleSubmit(pokemonId) {
    if(pokemonId !== ''){
      this.error = false
      this.loading = true
      this.pokemonID = window.isNaN(parseInt(pokemonId)) ? pokemonId.toLowerCase() : pokemonId
      this.searchPokemon()
      return
    }
    this.error = true
  }
}