Angular 9 Tutorial For Beginners #59- HttpClient

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn an extremely important feature of angular which is httpclient most applications that you will build in angular will require you to make calls to an end point or an API and get data or in fact as a matter of fact you will have to do multiple HTTP operations we will learn all about that in this tutorial welcome back my name is shredder I am bringing over ten years of experience and knowledge for all of you to share with I am also here to learn from you all so during the course of this tutorial series if you have any doubts any queries just ask me in the comment section and be happy to help you for free I am putting in a lot of hard work in bringing these tutorials for you so please support me by subscribing to my channel and liking the videos thank you in advance this is part of the angular 9 full tutorial playlist where we have close to 58 tutorials now the playlist link is in the description box below make sure you check it out to learn and master angular 9 so we can the past few episodes we are focusing on the series of angle of HTTP in the previous episodes we learned about observables dependency injections services and in today's episode we will focus on HTTP client let's get started what you will learn in this at the end of this tutorial you will learn what is HTTP client what are the different various HTTP requests that we can do what are the benefits of using HTTP client and some of the crud operations in angular apps we'll also learn how to put together a simple server and don't worry too much about it now since we will be building a mean stack application based on node and expressed yes very soon for now we will use a server based out of JSON server let's get started with httpclient so what is HTTP client HTTP client is used for performing HTTP requests and processing the responses the HTTP client service is available in angular common HTTP package the new HTTP client service is included in the HTTP client module which is used to initiate the HTTP request and response in angular apps to work with HTTP client we have to import HTTP client module into our app module if you don't do this step if the HTTP client will not work HTTP client also gives us other useful functionalities like headers and interceptors we will learn that in the coming sections so what are the different HTTP client methods that we can use right so some of the commonly used methods are your HTTP verbs like get post put delete head JSON P options and patch so these are some of the things that we will use when we start writing our API is you will see that you will use them very frequently especially get post put and delete so what are the benefits of using HTTP client so some of the benefits of using HTTP clients are HTTP client includes observable api's which means whenever we make a HTTP request or get the response the response is of type observable we have learnt what is observable how to process data in the previous episodes so if you have missed it kindly do check out the tutorial and observe able to learn at HTTP client can have various HTTP headers that you can send HTTP client includes the highly testability features which means it will give us a better control in writing our test specs httpclient includes time to request which means we can create an interface and we can say that it has to strictly abide by that the HTTP client includes response objects HTTP client includes request and response inter interception as well finally HTTP client includes error handling so some of the commonly used use cases for HTTP client are the crud operations now crud is nothing but it stands for create read update and delete whenever we create a new resource or usually when we do a post call it is to create a new resource and that's where we will use post method read is again just getting the data so it's usually a get method call similarly if we want to update a certain detail like update profile update contact update post it will be a put call finally when we want to delete it will be a delete method technically speaking we never delete anything unless if it's about data privacy or anything of those sorts unless user explicitly tells us we don't delete we usually use soft deletes which is putting a flag to set delete or so now we will learn about setting up a local server since we have to work with api's we have to learn we need a server basically right and you can create a server in different ways you can create a mock API server like using JSON server which we will be using in today's episode we can also use different servers like xampp or vamp these are used these are free distributions which are allow which allows us to quickly set up a server locally you can also use Python based module lock called simple HTTP to set up and run a server finally the best way to do that means he's using node and expressed yes we will learn this in the in the in the mean stack tutorial that I'm starting early next week where you will learn how to build API is using node and expressed years for our friends who are coming from dotnet background they can also use the IAS to set up their server or open source folks can also use Apache again there is no right or wrong way to set up a server it depe it depends upon your application requirement and infrastructure that being said let's do some notes and let's get our server up and running so the first thing we'll do is open so that we can make some notes so HTTP client we use HTTP client to make requests and process response of HTTP calls we make HTTP calls to server or in more generic word we call it endpoints or AP eyes that being said we need to be to work with HTTP client leaving to import HTTP client module in our app without this step without this step our HTTP will not work so it's very important we will link to import HTTP client in our component if we want to make HTTP calls as press practice we usually make HTTP calls in our services however technically speaking there is no restriction on where you can use right so these are some of the important notes now let's set up a mock server for our examples and application right again you can use like I said you can use any any a any server to set up those api's I will be covering I'll be covering need stack tutorials next week we will build node.js node and Express JS based API framework okay so state state you won't stick your own for this all right so just stay tuned for that once you get it we will process it alright so that being said let's get started and create our box over so first we'll need to install it so what we will do is we will then do NPM install right and we will say installed globally NPM install - globally and we'll say JSON server so you need to install this package it's the quickest way to get it but like I said you can use any server of your choice NPM install and hyphen G JSON server so we can see that the JSON server is added the package is added and to work with JSON server to work with JSON server you will need a mock data data file right now if you see I've already created one under assets DB dot JSON let's close things right let's see where our file is where we are making notes okay just give it a minute so these are all the other notes that we have I will share it with you when we are ready but look at this DV file it's nothing but it's just a JSON file with data that you want okay so this is the response output that you want so this is an API and call that you want to use so what I will do is I can then say let's go to this folder and see the source assets alright and then we will say JSON server - - watch DB JSON so it says that you see it says the JSON DB JSON which is the smoke file data that it started and it's listening on localhost 3000 so let me show you that in action how it would look so what we'll do is we will localhost 3000 when you enter it you see that congrats you have successfully running JSON server so we have our JSON server up and running and you can see there are three resources that is post comments and profile which you can relate in our DB JSON post comments and profile right so if you want you can play with these we can do currents and and all of that adding reading editing all of that we can do it right here so you can see the URLs are given here we can explore them so once you click on that if you click on the post you would see the same data output that you have in your DB JSON that being said so these are we have our local API set up running and if you are on vamp or xampp right you can also configure that by writing a simple PHP script and exposing an endpoint all right so so far have got our server up and running we've got a mock API so that we can start hitting we can do multiple operations like insert update delete all of the crud operations we can do with our of mach server now give it a try let me know if you have any questions I'll be happy to answer them in the next tutorial we will start with HTTP GET calls similarly coming forward going forward I'll cover get post delete put all of the HTTP methods for you that is in the next tutorial thank you so much for joining in today's episode see you in the next episode

Channel: ARC Tutorials

Views: 13,214

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular httpclient tutorial, angular 9 httpclient, angular httpclient examples, angular http

Id: xhFFFhLcycE

Length: 14min 5sec (845 seconds)

Published: Wed Jul 01 2020