Angular HTTP | From Basics to Advanced

let's go over some of the pre-requisites that you need to have coming into this course this is an angular course this course is focused on angular http so the assumption is that you already know angular you've probably use it and you just want to improve your knowledge on the http communication that is built into angular so you need to understand angular and the second technology you need to understand is time script so again the assumption here will be that you know typescript because angular uses timescript so understanding of typescript and angular you need to have background and those two technologies now another thing i want to point out is that saying that you need to have some typescript background also implies that you need to understand javascript because typescript is more like a wrapper around javascript so if you know typescript i'm assuming that you also know on javascript and then you need to understand http because this is the protocol that is used over the internet and that's the protocol that we're going to be using to make requests now i'm not expecting you to have any in-depth knowledge of the http protocol but as long as you understand what requests and response and headers and things like that as long as you understand what those are then you should be good to go we're going to cover a lot of this in this course as well but just so you know what to expect coming into this course and then lastly you need to understand api which is application and programming interface so this whole idea of having a front-end and a back-end application where the front-end application is making http call to the back-end those back-ends they're usually called api or application programming interface so make sure you understand what that is and how it's used in this world today because a lot of the applications running today on the internet they're running using apis so make sure you understand these are coming into this course environment setup for this course is going to be fairly simple since we'll be working in the front end so i'll be using visual studio code as my text editor but you can use whatever editor you like you don't have to use visual studio code but i'm gonna be using a visual studio code and then i'm gonna be using google chrome so we're gonna need to access the developer tools and i'm gonna be using google chrome to do that so if you want to use firefox or any other browser feel free to do that i'm just showing you guys what i'm going to be using and then you're going to need a terminal and this is because we're going to be running the angular cli commands in the terminal so you guys will need to have some sort of a terminal now i didn't even have to put this on there most computers nowadays they come with a terminal but i'm going to show you how you can get one for windows where you can run linux commands into windows so this is the setup you need most of you guys probably already have all of these already but let me go ahead and show you where you can get those if you don't have them so to get visual studio code you just have to go to code.visualstudio.com and then you can download it for your operating system as you can see they support mac windows and linux so just go here and then download it for your operating system pretty simple just go through the prompts and then you should be good to go and then for chrome you just have to go to google.com chrome and then you can just download it using this button right here or you can just click on this button here and it's going to be fairly simple just accept the license and click ok ok continue and then have it installed now for windows users so i'm using this cmdr as my emulator or terminal so the reason that i like this when i'm on my windows computer is because i can run linux comments so if you go to cmdr.net if you scroll down you should see these two buttons here where you can download it on your windows computer and the download is going to be fairly simple again accept the license click ok continue and then boom it's installed now i'm going to show you what it looks like i'm using my windows computer so it's going to look like this after you have installed it and you can see that i can type ls and then i have the list of all the everything that i have in this folder so you can run linux commands as well like you can do use ssh and many other linux commands i don't think you can use all linux commands for this but most of them will work in this emulator so that's why i like to use it when i'm on my windows computer but when we start working on this when we start developing the applications and writing some code i'm gonna switch to my linux computer because i like to use it better for development so make sure you get those if you want to follow exactly along with what i'm doing otherwise you can use the command line or if you're on a mac you can use whatever terminal you want you can use any editor you want and you don't necessarily have to use chrome but i'm just showing you guys what i'm going to be using i want to quickly talk about angular a little bit uh i know you guys are probably familiar with angular because you're taking this course about the http aspect of angular but i still want to talk a little bit about what angular is so angular is a javascript framework and you can use it to design your application and develop your application you use it to build client-side single page application angular was designed and created by google it's one of the most powerful and one of the most popular javascript frameworks out there and i like to use it i use it pretty much every day and i like it a lot now that doesn't mean that there aren't any other frameworks or library that you can use the react.js is also very very popular and even i am using react sometimes when i'm working on certain projects so it really comes down to what i need what i think will work best for the situation and then i decide if i want to use react or if i want to use angular or if i want to use vue or even jquery or just plain old javascript so um i know a lot of people like to compare you know frameworks out there and libraries and stuff but in the real world when you need to build an application it will come down to what exactly you need to build how you need to build it you have to take into consideration like security scalability and so many other things and after you've reviewed everything all the requirements for your app then that's when you're going to make the decision if you want to go with angular or if you want to go with react.js or if you want to go with some other framework like vue or something else so in this course we're going to be looking at the http aspect of the angular framework and that's one of the like most important features for this framework because most client-side application need to manipulate data and this data is usually hosted on some server somewhere and you need to use http to make requests to access this data let's quickly take a look at the http protocol now http is the protocol that you use every time you try to access resource from a server now it's not the only protocol that you can use to access a server but it's the most common and it's the one that the internet or the world wide web uses so that makes it very very powerful and very popular now the whole thing with http is that when you have a front-end application you need to fetch resources as you can see here from a web server so that you can manipulate this data in the front-end for your client-side or client-facing application so that's why these front-end applications or this front-end javascript framework such as angular or react they use http to fetch resources and their resource can be anything it can be html documents it can be videos it can be even styles it can be anything so http is widely used you use it every day when you access the internet either on your phone or your computer and that's the protocol that these applications that's the protocol that they're using under the hood now we can talk way more about http but this course is not about http itself it's how we can use angular and http to fetch resources from servers but it's also important to understand what it is which is a protocol amongst others that is used to fetch data from a web server or some server somewhere on the internet or somewhere else on a network another very important concept that we have to understand is the concept of restful web service now there's really two parts to this there's the rest or restful and then there's the web service now rest is really an acronym for representation of state transfer now you can think of this just as an architecture that your application can follow they have certain rules that you have to follow if you want your application or your web service to implement this restful or to be restful and then implement this architecture now the second part to this which is the web service is that if your web service implements this restful architecture then your web service becomes a restful web service now as you can see most apis or application programming interface which is what the front end applications usually use they're using this restful or representational state transfer architecture so that they can create their application so we can talk a lot more about rest itself or restful web service but what i really want you to understand is that once we have our front end application and we're making http requests we're making http requests to web services and those web services most of them they're using this rest standard or they're implementing this representational state transfer architecture and this is really the de facto standard for building web services nowadays maybe something else gonna come and we don't know but for right now that's the most powerful and the most lightweight scalable maintainable way for building these web services that we want to interact with other web services on the internet so that's why our angular application or any friend application they can make an http request to those applications and then get data from them because they're using this representational stage transfer architecture that is a very again highly scalable maintainable and it's very commonly used for api or web-based application so earlier i mentioned that we're going to be using http domain calls to web servers and those servers they use this restful web service or this restful architecture so maybe this doesn't make a lot of sense right now but i'm going to show you how this restful web services i'm going to show you how it connects to http call that our angular application will be making whenever you have a web service you want to be able to modify the data on the web service or read the data or create data or delete data now we refer to this as crud or crud which stands for create read update delete and if you think about it most of the times or if not all the time whenever you're using certain applications you're usually doing one of those operations so if we take a quick facebook example right so let's say you're on facebook if you're on facebook and you're just scrolling you're just looking at what people are talking about then you're just scrolling and scrolling you're really reading data so you're doing the r here in this acronym now if you want to make a post or you're gonna make a comment on something or you're gonna send a message to one of your friends then you're creating data so in this acronym you're doing the c which is like create data and if you made a post then you realize you made a mistake or you have a typo then you go in and click on edit and then to edit the data then you are doing the you in here which is the update the data and if you don't like the post you want to post something else or you didn't mean to post it and you delete it then you're deleting the data and if you think about it really most of the times when you're interacting with an application you're doing one or many of those four operations so the c is for create the r is for read or to get data and then we have the u for update and then the d4 delete and you cannot see how this is going to connect with http to create this entire web service architecture that we're talking about so the c is for create and whenever you need to create data on the server you're going to send a post request so they associate the create data or create resource on the server with a post request so the server or the restful api or the restful web service they're able to understand that when you try to communicate with them using the http protocol and you send the posts method with the http protocol then they understand that your intention is to create resource on that specific server and the same goes for read so for reading data you send a get request so you're getting information or you're getting resources so when you send the get request the server understands or the web service understands that you're trying to read data you're not trying to create or update data or delete data and then for update you send a put or a patch request and i'm going to talk about the difference between put and patch later when you need to update data on the server you send a put or a patch request and then the server is able to understand that you're trying to update the data and then to delete the data you send a delete request which is a valid http method or http verb so you would send an http delete request and the server will be able to understand that you're trying to delete a resource on the server so you can see how with restful web service and crud operations we can connect that with http so that we can communicate with the server in a way that the server understands let's take a quick look at the http communication with angular the http communication is how angular communicate with backend services using the http protocol so let's take a look at this and see how this all happens so you will have your client application and that client application in our case is going to be the angular application so this is your client-facing or client-side application so that's the application that your users see that's the application that they interact with and then you will have your server so your server will be your back-end web service or your backend web services that's where all these services are and somehow you want this backend to be able to communicate with this front notice that the backend can be built using any technology it can be python java node or a php or anything else now what you want to happen is you want your client application in our case our angular application we want that application to be able to communicate with this backend application to manipulate data or to create update read and delete data and that communication is going to be done over http so whenever the client application needs to manipulate data it will send something called a request over to the server and the server will take that request process it and then send a response back to the client and then you have this client server communication where the client send requests over to the server and then the server sends response back to the client and this is how the communication happens with the client server communication over http now you have to understand that this is just an overview there is way more that goes into this but for now all you have to understand is that the client application using the hdb protocol will send an http request to manipulate data so to create data i will send a post to read data that's going to be a get to delete that it's going to be a delete and to update it's going to be a put or a patch and the server is just going to respond with an http response and then it will send it back to the client so i hope that makes sense and we're going to learn how to do all of this in this course let's go ahead and create our angular application and for this i'm going to be using the angular cli so let me open my terminal and i've already navigated to the folder where i want to create that application and that's in my downloads and i'm just gonna go and do ng new and i'm gonna call the application angular http and press enter uh yes routing i'm gonna say yes for now i'm gonna be using css for my styling and that's gonna go ahead and create the application so i'll pause the video and i'll come back when this is done all right the download is finished so i'm gonna go ahead and cd into that folder so angular http and i'm gonna clear the screen and i'm gonna do code that so that i can open this folder with visual studio code okay here we go so this is a basic angular application with all the default i'm pretty sure you guys know how to do this already we're going to start looking at configuring this application so that we can use http and start making requests so to configure our application so that our application can start making hdb requests we need to do some configuration so in the main module of our application in that case that's going to be our app module since we only have one module we're going to have to import the http client module as you can see here we're importing that from the angular slash command http and this http client module is a service module that is provided by angular and it allows us to perform http requests and once we have the import you can see down below we have to edit in our ng modules so that we can let our application know that we're going to be using this sap client module so let's go ahead and give this a try let's go into the app folder and we're going to navigate to the amazo.cs file so this is the main module of our application and then here we need to import the http client module so i'm going to collapse this and then right down below this ng module i'm going to do import i want to import this from angular common http and what i want to import is the http client module so i'm going to do http client module so once we have this imported we have to pass it into the ng module so down below here i'm going to go into the imports array here i'm just going to go ahead and paste that so now we have imported the http client module into this ng module which is the main module of our application you can think of module like the context of the application like the space in which the application leaves so now this application is aware of us wanting to use the http client module or the http client to make http call and that's exactly what we're going to be doing before we can actually start making requests there is another important concept that we have to understand with angular and that's the angular services so when you build an angular application your application is going to have multiple different components so you can have a user component and you might have like a profile component and that's just the way that the architecture of angular is you build your ui using multiple different components and you just make those components work together now let's say you want to fetch data from your backend api or your backend web service so that you can display this data in your component now you're not going to have every single component in your application making http requests what angular comes up with is this idea of creating a service so you have that one space where you have your services and every component that needs a specific information can reach to a specific service to get this information so in this example that i'm showing you right now we have a user component and let's just assume that this component is displaying information about like a list of users and then we have another component that's the profile component where we're showing information about one specific user so you can see those two components even though there are two separate components they're requesting information about users so we can create one service in that case we're gonna call it our user service and inside that service we can have maybe two functions one to return the list of all the users for the user component and another one for the profile of one specific user so that way your code is more organized and you're not using every single component to make http requests because you have one service that's making the request and every component can reach to that specific service if they need that specific data from that service so what we're going to be doing in our application we're going to create a service and then inside that service we're going to start writing our code to make http calls my assumption is that you're probably familiar with the angular cli and that's the same comment line that i'm going to be using to create the service that i need so i'm gonna scroll down and we're gonna scroll to the command overview and you can see all the different commands that you can run with the angular cli and the one that i'm looking for is this generate here and you use this generate to create stuff like to create component create services create classes so i'm going to go ahead and click on this generate here it's going to take me to a more detailed page of this command and what i want to do is to use this service here so this generate service let's click on that and you can see through generator service you can do ng generates and then service you pass in the name of the service with some options if you want to or you can just do ngg and then service and then pass in the name of the service so i'm gonna copy the shortcut command so the second one and i'm gonna open my terminal and then i'm just gonna go ahead and paste this command and now i need to give my service a name what i also like to do when i'm using services with angular i like to put all my services inside a folder and to do this i'm just going to pass in a new folder so i'm going to do service so what angular is going to do is or what the angular cli is going to do it's going to place that user service that i'm going to create inside this service folder and i'm just going to call it user and angular is going to take care of adding the that service.ts so let's go ahead and run this command and i'll say yes on that and you can see that the angular cli created two files for us the user service that's spec.cs and then the userservice.cs so this is how you create a service in angular and we're going to take a look at what this service looks like and the code so i'm back in vs code and what i want to do is go to this file explorer here and you can see that we have this new folder service and i'm going to go ahead and expand that and you can see we have our two files and the files that i'm interested in is the user that serves that cs file now the spec file is a test file and we're not going to be doing any testing in this course but the ts file the user service ts file is the file that we're interested in so let's go ahead and click on that and you can see that the angular cli stubbed out the class for us putting in the injectable and provide that service in the root of our application which means this service is going to be provided in the main module of our application which is the app module that we have now what we need to do is to inject this http client so that we can start making http requests to a backend service we need to inject the http client in our service and in our case we have a user service and the assumption here is that this user service is going to be manipulating data relating to user or users so the first thing we have to do is to import the http client so we have to add an import statement in our class so that we can import this http client and as you can see it's coming from the same library so at angular command http that's the same library as the http client module and then once we have that we need to inject it in the class and the way we do this is by passing a private parameter into the constructor and the class so as you can see we pass in this private http and we give it a type of the http client that we just imported what we're really doing is passing in this http as a member of the class so as a member of the user service class and what that means is that we'll be able to use this http anywhere in the class by using the disk keyword to refer to it since once we inject it that way it becomes a member of the user service class and that's just how you do dependency injection in angular so let's go ahead and give this a try so i'm back in vs code and what i want to do is to add in the import for the http client so i'm going to go below the injectable and then i'm going to do import and then here i want to import the http client so i'm gonna do http client and this is coming from the same module so we're gonna do from and then passing angular common and then slash http so now that we've imported this we have to inject it into this class and to do this we just have to pass in a private field to the constructor so i'm going to do private and i'm just going to call it http you can give it any name you want the only thing is you have to make sure that the type is of type http client so i'm going to do http client which is what we just imported so now this http is available in this user service class and you we can use it anywhere in the class by just using the disk keyword to refer to it as a member of the class so once we start building our function to make http requests you're gonna see how we're gonna be using this as a member of the class by using the disk keyword so that we can make our request to the back end now that we have injected the http client in our user service we can make use of it in that service so that we can make http requests and there are a few ways that you can make http requests inside of the service and angular but i'm going to show you one of the most common ways to make those requests so you typically see a function and inside that function you return the http call that you're making to the api as you can see here our function name is defined in that case that's get users and it doesn't take any parameters but notice one interesting thing is the return type and in this case that's the observable now we're going to talk a little bit more about observable but for now what you need to understand is that observable here means that this code is going to resolve at a later point in time because we're making a network call and we want to be notified whenever we get some data back in that case that would be the http response from the server and that can be the data that we requested or we can get an error from the server and then on the second line we call the http remember we defined it in the constructor which makes it a member of the class so we're using the disk keyword to access it and then on that http we access the get because we're trying to make a get request and this http also contains the posts put patch and delete and a couple more but in that case since we're trying to retrieve data we're calling the get and then we're passing in the type that we're expecting to get from this api here in our case api.com forward slash users so this api http calling forward slash api dot com is going to return an array of users or a list of users so the same way we're telling the observable that we're expecting an array of users we have to tell the git which is also generic the type of data that it's supposed to receive from that call and what the http client is going to do is it's going to serialize this data whenever this data is resolved or whenever we get the response and then it's going to parse it as an array of users another example of this is if we're trying to get one user so in that case we can define another function which we're going to call get user it doesn't take any parameter and the return type is also unobservable because this code is not going to resolve immediately it's going to take some time because we have to make a network call and then the return type or in the body of the response we're expecting to get a user and you can see we're doing the same thing on the second line when we call the get we pass in the type of data and then we pass in the url where we think this data leaves on that web service so this is the typical most common way that you would see the http client being used on an angular service and later in this course i'm going to show you a more advanced way that you can do this and there's really no right or wrong it's just a matter of what your requirements are so sometimes you might have an application it's so complex you might have to go with the basic way but sometimes your application might not be so complex and then you can use a more fancy a more advanced way to do this so for now let's go ahead and give this method a try i'm going to be using the jsonplaceholder and if you go to jsonplaceholder.tpcode.com should land on this page and as it says here you can see that it's a free fake api for testing and prototyping and it's really free you can just use it to test your application and if we scroll down a little bit and you can see here uh how to try it so you see the main url is the actual website itself so that's the base url and then they have a number of resources that you can interact with so if i scroll down a little bit you can see that you can get posts comments album photos toodles and users so we're gonna be using the last one which is the users and there's really plenty free apis online that you can use to test your application but i'm just gonna be using this one for now so back in our user service i'm going to go down the constructor and then i'm going to define our first function in that case it's the get users and remember it doesn't take any parameter and it returns an observable of user array so now we're going to pass user array now we haven't defined this user type yet and later we're going to define an interface to represent the type of data that we're requesting but for now let's go ahead and finish the function so here i'm going to call the http so i'm going to do return this http and then i'm going to call the get on it as you can see here we have the delete get head jason options and we're going to look at those later and then we also have the put so for now we're going to use the get request because we're trying to make a request to some api to retrieve data and then we have to pass in the url where this dida leave and this is going to be the json placeholder so here i can just pass in the url for json placeholder and then that's going to go to slash users so this is our first function and don't forget to pass in the type as well for the get so here we're going to pass in the type and then let's go ahead and define our second function so i'm gonna copy the first one go down a little bit and this is supposed to be get users and this is get user this gonna return one user and i'm gonna remove the bracket and pass in the id here let's say in this case we're going to pass in one so now what we need to do is to define this user here so that we can map this data properly you can see that we're getting errors here and those functions because typescript doesn't know where to get this user from so now what we have to do is to go to jsonplaceholder and see if we can understand exactly what are the properties that exist on this user so that we can map that user into this class here so a good use of interfaces is to just use them to define a type of a specific object so let's go back to jsonplaceholder and let's scroll down to the user because that's what we're interested in so here's the user resource so i'm just going to open this in a new tab just so i can see the response so here is the list of all the users and you can see one user here from line 5 to line 27 and the user has an id name username email on address which is an object as you can see here and this object contains another object in this case that's the geolocation as you can see here it's nested inside of the address which is also an object for the user and then we have a phone website and a company which is also an object as you can see that's defined here so we need to map this data in our http call so that we can deserialize it properly so that we can have intelligence whenever we get this data back so what i like to do is to use this website here called transform.tools and you can specify what language you want to transform to and from so here i'm just going to copy this first user here which defines the type of the user and i'm just going to go back here and i'm going to remove this and then i'm going to paste it and if you look to the right you can see that it defines all of the type for us and also the subtype and it defines the user in that case it's setting it at root but we can change that and then it pass in the address and the company and inside of the address we have the geolocation and the geolocation is also defined below so we can define all of those interfaces so that we can create or use a service now we don't have to define it that way we can use the type keyword and typescript to define types and we can also use open and close curly braces and define the type of a data using an object literal but i'm just going to go with this approach in this situation so what i also want you to see is the angular cli you can use it to generate interface as you can see here you can just pass an ng generate interface and then you pass in the name of the interface so i'm going to use this command and i'm just going to go ahead and copy it and then i'm going to open my terminal so make sure you are inside of your application as you can see here i am inside of my application and i'm just going to paste this command oops i didn't mean to do that i'm going to copy this again open my terminal and i'm going to delete this paste this command and i want to put all of those interfaces inside of an interface folder so i'm going to pass interface and then for slash user and press enter so now i have this user interface and also we need to define the other interfaces so let's go back so that i can see what i'm doing here so i'm going to shrink this a little bit so we have to define the user in that case that was the root and then the address so i'm going to run this one more time for address and i'm also going to do it for geo i'm going to remove this geo and i need to do it one more time for our company and i'm gonna run that all right so now i have all my interfaces so let's go back to the application and let's expand this panel and here's the interface folder and i can extend it you can see we have all of our classes in here so what i can do is just copy the information that i got into those classes so the first one is going to be the root so let's go back to json let's see if we can put those side by side so i have both of my windows side by side and i'm just going to go ahead and copy everything over so i'm just going to copy all of this and then paste it in for user and i like to have the semicolon so i'm going to put those in i'm gonna do the same for the address so i'm gonna copy everything here and go back here to the address and paste everything here and i have to do the same for the geo so i'm gonna open the geo copy everything for geo paste it in there and i need to do the last one which is the company so i'm going to copy everything here and paste it in the company again i like to have the semicolon but it's not required i'm going to close that and do the same here close this now i have to import this so i can just use the quick fix to import it and i'm gonna expand this because we don't need this anymore now i can go to users and import those classes or those interfaces so i'm going to import this from the address and import the company as well all right so now our user is defined so this is the shape of our user so all we have to do now is to import that user in this class and we can use the quick fix to do that quick fix import so at this point we're ready to go ahead and test those functions

Channel: Get Arrays

Views: 5,264

Rating: 4.9006209 out of 5

Keywords: angular, angular http, RESTfulapi, http, observables

Id: M2DkmeegdSY

Length: 37min 8sec (2228 seconds)

Published: Sun Apr 04 2021