Angular 4/5 HTTP GET and POST requests tutorial
ฝัง
- เผยแพร่เมื่อ 21 ก.ย. 2024
- Angular 5 fetching data using HTTP GET and Saving data using HTTP POST requests. Also fix CORS by setting allow-control-allow-origin using http interceptor.
Git Repo of this project
* github.com/tec...
Article and code samples from this tutorial
* techsith.com\
Please be my patreons on patreaon
* / techsith
Follow me for technology updates
* / techsith
* / techsith1
Help me translate this video.
* www.youtube.com...
There was a time when I had no hope to finish my task on the edge and then your video came and you're such a savior!
No other videos explained it like this.
Archita, I am glad that you were able to fine what you were looking for. :)
@@Techsithtube it's sad that you didn't do the Post request example into the input area :(
thank you for your down-to-earth teaching style. So nice to listen to you chat about coding without the inflated ego that so many people in the tech world seem to think is requisite to being a successful programmer. I really enjoy your videos, thank you!
Thank you for watching. I believe that as a teacher you need to be humble.
you have very pleasing way to present the topic in simple and lucid manner which made me comment .Looking forward for more in Angular God Bless!
Great component and as expected, full of necessary materiel related to "HttpService and CORS". You make complex thing simple and represented it nicely, Thanks
Somes, I am glad that it helped. I went through lot of trouble understanding it when i was learning so I thought it should be simpler than what others have been teaching.
Excellent Tutorial - in the first minute you pointed out some issues that took me a long time to even identify a while ago, that will help save ALOT OF PEOPLE ALOT OF TIME!
I did suffer from the same when i started and I thought its important for people to know. Thanks for watching!
Thank you so much...I am doing an Angular final in school and you have so helped me understand this !!Bless you!
Hi techsith your tutorial is very informative plz upload full series on angular6 it's very helpful
Hi, your online session presentation is awesome.
All your videos including the JavaScript ones are great. Thanks for the help!
This was great, you have a great way of explaining things and actually showed how to do this step by step. Thanks!
Well done tutorial, very explanatory, really amazing edition cutting the unnecessary typing time. Congrats!
Another great video (and thanks for answering my question, previously). You are knocking this out of the park. I just can't understand why you're doing all this for free. Anyway, thanks again for this. You're brilliant.
Thanks David for the kind words. Actually I had started creating a udemy course on Angular, I was half way through and someone stole my computer from my car so I lost all the work . I decided that I am going to keep it free to the world . May be one day I can create udemy course.
Thanks mate, I understood your tutorials very easily...have had been following many, but this helped me a lot actually.
thank you so much...today i learn new and first time ..........it possible for this tutorial.
it great teaching .....
Small and beautiful tutorial for a beginner
Oh my god thank you, i tried to find about how to fix that cross-origin for a long time, only this video tutorial helped me :)
Initially i struggled a lot on CORS issue and i could not find a good solution anywhere . So i understand your frustration. I am glad I could help. :)
Jsonp is the answer for CORS..
Excellent. This is exactly what I was looking for. To the point!
a very good and easy to understand tutorial..ty sir..
Thank you so much for the interceptor module ! Loved the video . Cheers
Cool stuff TechSith, liked the get & Post requests
Bundle of thanks for this video I was searching a lot for this please upload a tutorial about mapping
Like Map function in react?
Thank you so much for the videos ...
simplified and awesome, thanks a lot
Sir, you are a life savior.
Thank you so much, from Brazil!
thank you, for such a great tutorial.. I am beginner to angular and this series is helping me lot
Thanks for watching!
love you, thanks, bundle of thanks. you should know it only you're (very) public who is working with angular 5 :) even angular.io doesn't have such guides.
Thanks Faisal, ANgular documentation is confusing that is why i am creating these tutorials make more sense.
Hi Sir, I need your help. I got one API which is working on postman but when I have tried to call though angular code it is not working.. showing error
De Verdad muchas gracias mi pana, desde Venezuela. saludos!!
Venezuela
Explained very well. Thanks!
Hi Sir, I need help, can you please tell me how can I call an API which belongs to different domain form my localhost server, because currently, I am facing the cross-origin issue.
Nice videos.Request you to please add more questions on Angular 2
Very well explained, You are awesome man!
i appreciate your teaching style sir but i think you should have told about pipe operator and three functions error complete
So clear and easy to understand. Nicely done ;)
Thanks for watching :)
Muchas gracias, desde Chile.
Gracias por ver.
good teaching thank you stranger
right to the point !!! Perfect explanation!
Thanks for the video! Awesome explanation!
Nice video!! it helps me a lot!
Thanks for the wonderful video. Sir I would like to request you to make video on lazy loading.
Thanks for the tutorial.
Awesome.... Very Productive tutorial..
Thank you very much, techsith. I compare your tutorial videos with others. Your vedio is more compact, informative, and better organized. I like your videos very much.I coded according to your teaching step by step and met 2 problems and I solved it . I want to share with others.
1, because angular use json format to exchange data, when you use a local server based on PHP and Mysql, pls not forget to configure a right header when post a request, (postProfile(){
this.httpClient.post('localhost:8000/threads',{
title : "aaa",
body : "bbb"
}, {headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
.subscribe(
and at the server side,
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
2, cors( cross orgin) error is not a default of angular, it is a security limitation from browser. For Macbook, I use this command to avoid i : $ open -a Google\ Chrome --args --disable-web-security --user-data-dir
Appreciate the comment Cheng. Keep on learning
This is very helpful . Thanks a lot for your effort.
Great sir. Thank you so mush sir
Me gustan muchos sus videos, gracias!!!.
Thanks man! This really helped me out!
Very useful tutorial
This is very informative, Thanks for this tutorial
Thanks for watching Ram.
@techsith great tutorial, thanks so much. Can you explain how would basic authentication work in the same example?
Very clear and nice tutorial
Nice videos.Request you to please add more questions on CSS html
Yes I have plan to add some more videos on CSS interview questions.
Very nice sir je 🎉🎉
Thanks for this video
Very great... Much more helpful
Sir plz make a video on state management in angular 7
awesome tutorial, thanks bro, abraços do Brasil
I have problems with the post for the sent through slim framework 3, Error say "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)" sends as method "Option". I'm using Angular 6.
thank you a YOU ARE AMAZING ,it helped me a lot
Good one. Useful. One question: if we have multiple HttpClient url to get or post how to handle the access control allow origin? Is it possible to pass multiple URL in the interceptor?
awesome tutorial..
Thanks for watching! :)
If you are using the in-house developed spring boot API, just adding @CrossOrigin to controller will solve the Cross Origin problem.
Thats awesome. is it open sourse?
@@Techsithtube Yeah. Infact it is provided in spring framework itself, just like @RestController, @RequestMapping etc annotations.
For more info on how to use it, www.baeldung.com/spring-cors
Thank you a lot!! I spended days trying to fix this problem
Thanks for watching!
Eres un buenazo!! excelente tutorial
Gracias!
Great thank you very much
it is very helpful... thanks
Thanks for watching Deepika.
It was so nice sir
Super helpful you got another sub
hey man nice tutorial.. question though.. should api call not be done in a service file instead?
Hi @Techsith and thanks for this video. I really understood how to do GET and POST. THANKS.
I have a question now. Let's take this code you did here.
How can I print a list of "users" that are in that JSON file? I need for sure an Array, but how can I populate an Array of a json file that exist in a URL?
Thanks again.
Please, if someone knows the answer, I would appreciate the help :)
If they are inside a json file than you would have to navigate to the array. for example returning Obj = { users:[]} then you have to say myUsersArray = Obj.users; Does that answer your question?
great video helped alot solved nicely
Thanks, nice tutorial.
I might be very bad in basics but want to know why we are importing any module two times? Once in app.module.ts and again in the actual component file where we are going use. Am I missing anything
How to pass Cookie in header of Get request? I have been searching this since days but didn't get an answer
Thank you.. Keep up the good work.. 😀
Sir, but applying cors on every HTTP request does not create any security issue.
very helpful
thank you sir
grt video for learner
This is really nice and helpful.
it would be more better if you create components and module manually that might give better understanding of concepts.
not all vedios only one would be fine.
Anurag I have created components manually in first few videos. basically, when you create a component via cli you would see what has been created in the command line so follow that. I have a video on JavaScript modules check it out.
Yes, I have seen your javascript videos they are really helpful.
Nice tutorial sir.
Great tutorial. Thanks. Well I didn't understand the last portion of the tutorial. While giving "http post request" , its not actually getting update in the "db.json" file. Only just id increment is showing. What have to do for the getting real updation to db.json file. Anyone please give me an answer.
nice video, had a query ,how to send data in headers while http request, waiting to hear from you soon
excelent!, thx man
Gracias Bro saludos desde ecuador
Thanks very much!
Dear i have an problem when i am passing parameter in your given url
can you please help me into this
Hi. Thanks for the tutorial. I am facing the same issue while making a GET call to cross domain, i tried to add your Interception but even after that, i am facing same issue. Any suggestion would be welcome.
Thanks
need to update if your working in Angualr5 version.HttpClientModule in app.moudle.ts instead of HttpClinet. import in app.component.ts same. no change in that part
Very informative
Thanks for watching! :)
We should thank ...because your making time in this busy world and working to educate us Thanks For that :)
Great video!!!
Thanks for watching Sarah!!
Very nice, it seems to be for deeloppement only because the content of the json file is github...
yes it is for development only.
Thank u sir....
chrome extension is absolutely necessary
Sir Why we use * in angular? is there any logic behind.
thank you ! you're great
Maybe I'm missing something here. So, I add the interceptor.module.ts to the root area of my Angular5 App. I then add it to the app.module.ts file. I have a service that does CRUD operations. So, the part I'm not understanding is, where does this interceptor module fit into my angular app? Do I inject it into my component? Do I have to hard code my endpoint inside the interceptor.module file? Does anyone have a code snippet showing the whole process? Thanks for any help..
Nice and useful Tutorial
Thanks for watching! :)
Awesome Sir..