7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

7.1 Sending an HTTP Request

Let's start this chapter with a look at how we can make an HTTP request using Angular.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


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.

Back to the top