Cómo consumir una API RESTFul con Angular: Tutorial paso a paso

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ม.ค. 2025

ความคิดเห็น • 50

  • @Programandoconestilo1
    @Programandoconestilo1  ปีที่แล้ว +3

    Web de las API para desarrolladores: rickandmortyapi.com/

  • @Asg04
    @Asg04 11 หลายเดือนก่อน +6

    buenas , la verdad que me ha gustado la forma de explicar todos los detalles para personas que acabamos de empezar y demás, gracias!

  • @zulmaagudelo3840
    @zulmaagudelo3840 ปีที่แล้ว +1

    Lo use para conectar el backend en Java y Spring Boot con el Frontend y funcionó a la primera, muchas gracias por compartir contenido de calidad.

  • @dieguillo6661
    @dieguillo6661 5 หลายเดือนก่อน +1

    justo lo que necesitaba, pero bueno no ví en los videos para consupir el otro get por id, post, put y delete, por poquito se gana un suscriptor

  • @GiovannyChica-v1u
    @GiovannyChica-v1u ปีที่แล้ว +1

    Lo use para conectar una API desde Django Rest Framework y una app Ionic y me funcionó a la perfección, muchas gracias

  • @rogerrodriguez1942
    @rogerrodriguez1942 10 หลายเดือนก่อน +1

    muy buena la explicación con todos los detalles.

  • @drfcozapata
    @drfcozapata 11 หลายเดือนก่อน +1

    Genial!!!
    Gracias bro.
    Bendiciones desde Venezuela

  • @ainponce
    @ainponce ปีที่แล้ว

    Muchas gracias, el video me sirvió para conectar una API que hice con Spring, genio!

  • @JuniorRA00
    @JuniorRA00 ปีที่แล้ว +4

    Genial, vamos a ver si me puedo guiar de aquí..

  • @cesarsalazar5932
    @cesarsalazar5932 ปีที่แล้ว +1

    Wow muchas gracias, funciona perfectamente

  • @manuelaranguri630
    @manuelaranguri630 ปีที่แล้ว +1

    es necesario crear interfaces para renderizar el resto de propiedades de la api, o solo como lo mostraste en el video 13:32 sería suficiente.

  • @kianetomoe4905
    @kianetomoe4905 7 หลายเดือนก่อน

    me salvaste de la locura, gracias

  • @jeisonvargas9738
    @jeisonvargas9738 2 หลายเดือนก่อน

    Gracias amigo me ayudó bastante, puedes hacerlo con la version 17 o 18?, nuevo sub

  • @adsoobregon9815
    @adsoobregon9815 ปีที่แล้ว

    Precioso video :)

  • @luigimori24
    @luigimori24 ปีที่แล้ว +1

    Gracias

  • @josedejesusramosramos9305
    @josedejesusramosramos9305 8 หลายเดือนก่อน +1

    Ando muy mal en esto, pero esto me serviría para conectar front (angular) a back (express node js)?
    Es una app simple de login y pago de cursos

    • @josedejesusramosramos9305
      @josedejesusramosramos9305 8 หลายเดือนก่อน

      X cierto también mi BD está en MySQL Workbench

    • @Programandoconestilo1
      @Programandoconestilo1  7 หลายเดือนก่อน +1

      Claro que te sirve, despues de todo es una peticion http y es independiente de q ue back tengas

    • @josedejesusramosramos9305
      @josedejesusramosramos9305 7 หลายเดือนก่อน

      @@Programandoconestilo1 gracias :)

  • @gottchbro650
    @gottchbro650 6 หลายเดือนก่อน

    Hay alguna forma de imprimir el array entero en lugar de solo un elemento como 'name', etc?

  • @djfeliperomero1
    @djfeliperomero1 ปีที่แล้ว +1

    Quise integrarlo como prueba a mi proyecto ya que quiero trabajar con aws pero no me muestra por consola del navegador los datos del array 😢 (ocupo la misma api del video pero no muestra ) ayuda plis

    • @Programandoconestilo1
      @Programandoconestilo1  ปีที่แล้ว

      Prueba haciendo un test de la API con Postman, de esa manera sabrás que resultado está trayendo

  • @mAariasanchez980
    @mAariasanchez980 ปีที่แล้ว +1

    Cordial saludo, tengo una duda al momento de crear el proyecto ya salen todas las carpetas por defecto pero no tengo por ninuna parte la carpeta "app-routing.module.ts, sabes por qué?

    • @jaidercorrea2025
      @jaidercorrea2025 ปีที่แล้ว +2

      cuando vas a crear el archivo de angular te aparece algo como que si quieres tener el routing module y ya tu pones que Y y te crea el archivo routing

    • @mAariasanchez980
      @mAariasanchez980 ปีที่แล้ว +1

      @@jaidercorrea2025 Muchas gracias!

    • @lorenacuadros_
      @lorenacuadros_ ปีที่แล้ว

      @@jaidercorrea2025 no me sale esa pregunta, se salta de una vez a la pregunta del formato de estilos

    • @shdevcode641
      @shdevcode641 ปีที่แล้ว

      La opción "Would you like to add Angular routing?" En versiones más recientes de Angular CLI (a partir de la versión 6), la configuración del enrutamiento se ha convertido en una opción por separado que puedes agregar posteriormente

    • @miguel000127
      @miguel000127 ปีที่แล้ว +2

      @@shdevcode641 creo que ng generate module app-routing --flat lo resolveria

  • @joseanquiles
    @joseanquiles 5 หลายเดือนก่อน

    Muy buena explicación. Pero me queda una duda: ¿por qué no ha dado un error CORS? Si desde localhost:4200 invocas a otro host (en tu caso al api), tendría que haber fallado por el CORS del navegador, pero no te falla ¿por qué?

    • @ingridledesma6825
      @ingridledesma6825 4 หลายเดือนก่อน

      hola como se puede solucionar ese error? me esta sucediendo eso, pense que creando la interfaz con el tipo de datos era suficiente pero sigue sin poder iterar nada. (console.log me muestra que estan llegando bien los datos)

  • @enzopena1875
    @enzopena1875 11 หลายเดือนก่อน +1

    te amo

  • @jaimemedina4867
    @jaimemedina4867 ปีที่แล้ว

    porque no me sale la opción del routing para darle yes ?

  • @PinlyModz
    @PinlyModz ปีที่แล้ว

    Buen video, una consulta.
    si tengo que pasar por la api headers y data (datos). como haría?

    • @isahirzm
      @isahirzm ปีที่แล้ว +1

      mi recomendación es que crees un http Interceptor así no tienes que pasar cada vez los headers

  • @adolfozamorapescador626
    @adolfozamorapescador626 ปีที่แล้ว +1

    Hola, el video esta bueno, pero al consumir otra api, me sale error
    home.component.ts:21 ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    que puede ser?

    • @Programandoconestilo1
      @Programandoconestilo1  ปีที่แล้ว

      El error va mas por el tipo de objeto que devuelve el API que estás tratando de consumir. Por lo general las API responden dos tipos, un object y un array de object. Esas son mas principales, y luego dentro de cada objeto o array de objetos siempre tendrás mas convinaciones pero tienes que identificar bien al menos el tipo padre para poder definir un type especifico para tu consumo.

    • @windowstec157
      @windowstec157 หลายเดือนก่อน

      @@Programandoconestilo1 oye bro como estas, estoy tratando de resolver lo mismo, no se si tenga que ver con la creacion de una interface, o por lomenos entender si es de tipo object ya que al momento mostrar por html da error

  • @Gerardocool13
    @Gerardocool13 11 หลายเดือนก่อน

    Coomo se haria esto mismo en angular 17 porque tengo entendido que ya no vienen con el routing module

    • @arturoperez85
      @arturoperez85 11 หลายเดือนก่อน +1

      puedes crear el proyecto con --standalone false, ejemplo: ng new apiDemo --standalone false

  • @sandrabernabe1f435
    @sandrabernabe1f435 ปีที่แล้ว +1

    Se puede hacer con localhost:8080?

    • @Programandoconestilo1
      @Programandoconestilo1  ปีที่แล้ว +1

      Claro, solo debes configurar en qué puerto quieres que salga la aplicación

  • @joseantonioamayapostigo2542
    @joseantonioamayapostigo2542 10 หลายเดือนก่อน

    con angular 17 ha cambiado casi todo no funciona ??

    • @wilsonpinzon3870
      @wilsonpinzon3870 10 หลายเดือนก่อน

      tambien tengo la misma duda

  • @noellaandrews8460
    @noellaandrews8460 ปีที่แล้ว +1

    'Promo SM' ✅

  • @yuhosSubs
    @yuhosSubs 3 หลายเดือนก่อน

    que version es? en mi angular tegno app.config y app.routes

  • @ingridledesma6825
    @ingridledesma6825 4 หลายเดือนก่อน +1

    core.mjs:6467 ERROR
    Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.mjs:34120:13)
    at _NgForOf.ngDoCheck (common.mjs:3507:36)
    at callHookInternal (core.mjs:5004:10)
    at callHook (core.mjs:5031:5)
    at callHooks (core.mjs:4988:9)
    at executeCheckHooks (core.mjs:4925:3)
    at refreshView (core.mjs:12826:11)
    at detectChangesInView (core.mjs:13025:5)
    at detectChangesInViewIfAttached (core.mjs:12987:3)
    at detectChangesInComponent (core.mjs:12976:3) alguien que me ayude con este error?