7.1 Sending an HTTP Request

Hi folks. In this lesson we're going to take a look at some HTTP basics in Angular. Our example application doesnt have much need for AJAX as it's an entirely client side game. But we can still take a look at how we can handle HTTP in an angular application because it's such a common requirement. So first of all we got another slight issue that I want to fix up quickly. We fixed up going from the start screen to the help section and back again earlier on. But we've got an issue now where when we go from the game component to the help section and back, when we do this the game component thinks that the game is starting again. And it adds some more cards to the player's hand. Let's just see this bug in action. So we go to the game screen and everything is normal at this point. But now let's go to the Help section, so that's all working as expected. But now when we go back to the game screen, We've got some extra cards. So this should be pretty straightforward to fix. So first of all, let's add a new property to the game.service called gameStarted. And now in the startGame method, when we start the game, we can set this new gameStarted property to true. So now back in the game components we can check whether this property of the services sets before we start the game. So now we will only start a new game if the game started property of the game service is not already set. So let's just test that it's working correctly. We're back on the start screen. So we've started a game now. We have two cards in our hand. Let's go to the help component. And now let's go back to the game, and this time we don't get any extra cards. Great, okay. So let's do some HX now. So, there's a fun little API that I like to use in examples sometimes and it's kind of relevant here, it's called the numbers API. It's a service that returns facts about numbers. So, let's add a button to the game and this button will get a number fact for the combined total of the player's score, whatever that happens to be. So let's add a new button to the controls component, first of all. Then we can add the corresponding property to the controls component. So that's the Show Fact button property. And we will initialize that with the value of false like we do with all the other buttons. Lastly, we only want to show this button on the game screen. Great. So we have this new button and it's shown only on the game component, so now we need to wire up. The buttons are in the controls component which is separate from the game component. So what we'll need to do is add an output decorator for an event which the button would trigger In fact, all of the bonds will need to trigger output events. So we can add three outputs to the controls component for now. We'll need to import the output decorator and event emitter class first of all. And now we can add the outputs. And next we'll need to add a method that will trigger these events. We could have three methods, one for for each event but I think this is better. A single method which receives the name of the event we want to dispatch and use a square bracket notation to omit the correct event. So now back in the controls template, we can invoke this method when any of the buttons are clicked. So the game component is a host for the control components. So we can add handlers for these events there. We need to add handlers for these in the game component or we'll see an error when Angular tries to render the game component and can't find the methods. We'll add the logic for the doStake() and doHit() methods later on. For now, let's focus on the getFact() method. Now, before we can make any HTTP requests, we need to import the HTTP module into our own app module We can then add this to the imports array with the other modules. Personally, I like to have the RouterModule last because it's the only one which has a method invocation chained to it, but it doesn't matter too much. Okay, so we could make our HTTP requests directly from the game component. But it's recommended to keep all HTTP requests in a service For better reuse and organization, so that's how the actual request and the game service. To make a request we'll need to input the http class Client. And we'll need to inject this into the constructor. So now we can add a method which will actually make the http request. The method first constructs the URL to make the request too. The numbers API requires a base URL of numbersAPI.com/ and this should then be followed by the number we would like to get Get the random fact four. We can get this number from the player's score. We then use the get method of the HTTP client to make the request. This method takes the url that we want to take the request to as the first argument. The numbers API returns a plaintext response type by default, so we need to configure the request to tell it what the response type will be. By default, Angular sets this to JSON, but we'll see an error if Angular tries to parse plaintext as JSON. The get number facts method returns the return from the get method of the http client. This will be an observable. We can add a return type for our method then. So to do that we'll just need to import the observable type from RXJS. And then we can annotate the getNumberFact method with this type. So now back in the game component, we can invoke the getNumberFact method in the getFact event handler. The return of the git number fact method is unobservable. So we have to subscribe to it in order to actually make the http request. Okay so everything should now be in place. Let's go back to the browser. So, there's an unexpected closing tag. Let's just take a look at the template for the controls component. And it looks like I'm missing some quotes here. So let's get back to the browser again and see if everything's working as it should do. So when we hit the Get the number fact button, we should see the request in the Network tab of the developer tools here. So we can see that the score is 9, and that's the request that has been made.And we can see that we get a response containing a number fact. So in this lesson we saw how we can make a simple HTTP request in Angular using the HttpClient. We use the GET method of the HttpClient to issue a GET request to an external API. As well as the GET method. Angular also has other methods for other common request types including POST/PUT.DELETE ect. We saw that the GET method along with the other HTTP methods, returns an observable. And that we need to subscribe to this observable to actually make the request even if we do nothing with the response. We also saw how to configure options for the request using the second argument to the GET method, and we use that to set the response type option to text. Thanks for watching.