Angular call REST API | angular CORS error when calling API | Coding Session 5 | BibBobBib

HEJA coding people, I hope you're well,
WELCOME to this small coding exercise video ;)

THANK YOU
for being here, I hope you're well!

CONTENT
Our angular app from the last session will call our backend. For this I create a new angular component and also angular service, where I use HttpClient to call our backend service, which is running in docker container.
Here I also solved CORS Error (Cross-Origin Resource Sharing), because my frontend and backend have not the "same origin".

TIMESTAMPS
00:00 intro
00:07 explore our basic app - created in the last codng session
00:37 our simple angular app so far
00:46 build and start the angular app with ng build / ng serve commands
01:29 big - picture - next steps - add new angular component and angular service to the app
01:35 angular cli reference
02:02 generate new angular component using angular cli
02:26 generate new angular service using visual code
02:49 implement simple angular service
04:13 implement simple angular component, inject the angular service
06:10 build and start the angular app
06:25 let's check app running
06:57 let's go the backend service, modify it
07:11 build new image of backend and run it in docker container
07:44 frontend calling backend cause CORS Error (Cross-Origin Resource Sharing)
07:55 angular solution for CORS error - proxing to backend server example
08:29 let's try the solution for CORS error by implemeting it in our app
08:53 I also added CrossOrigin to the backend, built an image and started our backend
09:10 build our angula app and start it
09:27 let's check our app: angular frontend calling backend - success
09:57 bigpicture our example so far
10:04 outro - more videos

TOOLS
Intellij IDEA Community Edition, cmd, docker desktop, visual code studio

FRAMEWORK
angular, spring boot, rest api

PREVIOUS CODING SESSIONS
- HOW I created ANGULAR APP using angular cli: https://youtu.be/1fOtMt-Yjfw
- HOW I created BACKEND service with SPRING BOOT and REST API: https://youtu.be/LroKxIqEug0

SUSBCRIBE FOR MORE VIDEOS
https://www.youtube.com/channel/UCLmfcZaONRugSYKV48w_G9g?sub_confirmation=1

STAY CONNECTED
https://bento.me/annadamer

IDEAS
IYou have some ideas of making a coding video? Let me know!

COLLABORATE
Want to collaborate? Let’s chat!

WATCH - ENJOY - LIKE - COMMENT - SUPPORT - SUBSCRIBE - THANK YOU ;)
#codingwithbibbobbib #angular #restapi #programming #coding #howto #livecoding #codergirl #tutorial