Lo que aprenderás para consumir API con Angular

1/23
Recursos
Transcripción

¡Hola! Bienvenido o bienvenida al Curso de Consumo de API rest con Angular. Angular es un gran framework de desarrollo front-end con todo un ecosistema de herramientas que te facilitan el trabajo a la hora de desarrollar una aplicación.

En este curso, aprenderás todo lo relacionado con el consumo de APIs con Angular, utilizando su Cliente HTTP.

Otros temas que vas a explorar

Además de estos conocimientos también profundizarás en los siguientes temas:

  • Buenas prácticas de desarrollo
  • Verbos HTTP
  • Conexión HTTP con API Rest
  • CORS
  • Manejo de ambientes en Angular
  • Autentificación
  • Seguridad y tokens
  • Manejo avanzado de Observables con RxJS
  • Descarga y subida de archivos
  • ¡Y mucho más!

¡Comencemos!


Contribución creada por: Kevin Fiorentino.

Aportes 26

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Hola, este es el repo con el código base en donde lo puedes descargas desde la rama main https://github.com/platzi/angular-APIS

Vengo de React y en mi trabajo me llamaron para un proyecto con Angular, gracias a estos cursos tuve la confianza para decir que si, vamos con todo!

Para las grandes mentes que verán este curso en un futuro, la manera correcta de instalar el repositorio es la siguiente:
.

  1. Clonas el repositorio de github utilizando Git Clone, si tienes conectada tu llave SSH a github, sería tan fácil como:
$ git clone git@github.com:platzi/angular-APIS.git
  • Recuerda que siempres puedes saber como conectar tu llave de una manera muy facil en el Curso de Git y Github o directamente en la siguiente clase Vinculando nuestra llave SSH en Github
    .
  • De lo contrario, utiliza el método HTTPS que nos ofrece github:
$ git clone https://github.com/platzi/angular-APIS.git
  1. Una vez hayas descargado el repo, ejecuta NPM Install para que se instalen todas las dependencias que serán utilizadas, recuerda que esto debes hacerlo dentro de la carpeta “angular-APIS”.
$ npm init
  1. Una vez instaladas todas las dependencias, debes asegurarte de no tener ninguna vulnerabilidad en el proyecto, de lo contrario tendrás que ejecutar:
npm audit fix
  1. Si esto no arregla las vulnerabilidades, puedes recurrir a:
npm audit fix --force
  1. Y listo! ya tienes tu proyecto a la perfección para poder empezar a programar!
    .

¡Nunca pares de aprender!

Construyendo el conocimiento que construirá mi futuro.

Hola, soy nuevo en el tema de angular y git, para clonar el repositorio tube que escoger un sitio en mi computador y escribir:
git clone https://github.com/platzi/angular-APIS.git

Despues de que se clone debemos instalar las dependencias, por lo cual es necesario tener instalado node.js, yo instale la version mas actual del node.js

luego abri, la carpeta en visual studio code y habilite los scripts de windows de la siguiente manera:

abrir el power shell de windows como administrador y escribir : Set-ExecutionPolicy Unrestricted y darle que si

luego regrese a visual studio code, y instale las dependencias con npm install, sin ocurren errores corri npm audix fix , y si aparecen mas npm audix fix --force

luego si aparece un error, como el que me aparecio es por la version de angular que usa el proyecto que es la 12.1, esta toca actualizarla de la siguiente manera

en la terminal escribir :
ng update @angular/cli@13 @angular/core@13 --allow-dirty --force

si no es suficiente actualizo a la siguiente:
ng update @angular/cli@14 @angular/core@14 --allow-dirty --force

hasta llegar a la version compatible y listo para verificar corri el comando ng serve -o .

Comencemos este nuevo curso.

3er Curso de mi ruta de Angular 😄

Iniciando un nuevo curso de Angular, realmente el manejo de APIs es muy importante para un desarrollador, tengo grandes espectativas.

  1. Ejecutar = npm install
  2. Ejecutar = ng update
    y finalmente
  3. Ejeutar = npm update
  4. Ejecutar
ng update @angular/cli @angular/core @angular-eslint/schematics --allow-dirty --force

La guia de actualizacion de Angular 😄 https://update.angular.io/

Nuevo curso nuevo look todo pinta bien … xd

Tengo node 18 y tuve que actualizar a Angular 13 para que me funcione el proyecto.

Ya configure mi entorno para poder seguir con las clases 😄!!

¡Here we go!

Si recién llegas a este curso, sigue los siguientes pasos para que te corra el proyecto - esto fue lo que me sirvió a mi: 1\. `$ git clone `[`https://github.com/platzi/angular-APIS.git`](https://github.com/platzi/angular-APIS.git) 2\. `$ yarn install` Debido a que el proyecto se encuentra construido con otra versión de CLI y Node, se puede utilizar lo siguiente para que fuerce a que node ejecute lo que debe. 3\. `$ export NODE_OPTIONS=--openssl-legacy-provider;` 4\. `$ ng serve -o` Con esto pueden correr el proyecto sin preocuparse mucho de las versiones de node. También pueden cambiar en el `package.json`. Yo lo dejé así: ```js "scripts": { "ng": "ng", "start": "export NODE_OPTIONS=--openssl-legacy-provider; ng serve", "start:proxy": "export NODE_OPTIONS=--openssl-legacy-provider; ng serve --proxy-config ./proxy.config.json", "build": "export NODE_OPTIONS=--openssl-legacy-provider; ng build", "watch": "ng build --watch --configuration development", }, ```Solamente que deben correr el proyecto como: `$ yarn start:proxy`

Estos son los pasos que tendrás que realizar una ves hayas clonado el repositorio del curso
Primero paso

npm i

Segundo paso

npm update

Tercer paso

git add .
git commit -m "Updated npm packages to latest versions"

Cuarto paso

ng update

Te aparecerá una lista de actualizaciones que están disponibles, en mi caso ejecutare los siguiente comandos

ng update @angular-eslint/schematics && ng update @angular/cli && ng update @angular/core

Para luego ejecutar

git add .
git commit -m ":arrow_up: Upgrade to Angular 16"

Quinto paso

ng v

Si te sale este warning Warning: The current version of Node (20.9.0) is not supported by Angular o cualquier versión. Tendras que realizar lo siguiente
RECUERDA TENER INSTALADO NVM

nvm use $(cat .nvmrc)

para luego ejecutar los siguiente comandos

npm install -g @angular/cli@latest
ng v

Al realizar ng v ya no te aparecería el warning y podrás seguir con la clase

Si no utilizan nvm, les recomiendo que lo usen. Empecé desde el primer curso de fundamentos de Angular usando node 12.14.0 pues la version de Angular de un proyecto en el que estoy trabajando es Angular 11, y necesito que lo que aprenda aqui poder aplicarlo allá, y dado el caso que necesite cualquier otra version de node para otro proyecto, simplemente la cambio instalando esa version de node con nvm y usándola. Otra opción es trabajar con los contenedores de docker y las imágenes de node ahi mismo.

que buen curso, actualmente estoy haciendo un proyecto similar y creo que puede ayudar bastante

Que emoción seguir aprendiendo todo lo de programación !! 🤩

SIUUUUUUU ACTUALIZADO !!!

Vamos con todo!!!

Muy emocionado 😁

Buen curso

Ya he manejado el HttpClientModule, pero siempre se puede aprender algo nuevo 😃

Si tienen problemas con las versiones, lo más fácil es remplazar el package-lock.json y el package.json de la versión Init por los que se encuentran en la versión main