265. Using a Service for Http Requests

0:01

S… Speaker 1 (265. Using a Service for Http Requests)

The code we have thus far is not bad and it does its job.

0:05

S… Speaker 1 (265. Using a Service for Http Requests)

And if our application were as simple as it is here,

0:09

S… Speaker 1 (265. Using a Service for Http Requests)

it would be perfectly fine.

0:10

S… Speaker 1 (265. Using a Service for Http Requests)

But in bigger applications,

0:12

S… Speaker 2 (265. Using a Service for Http Requests)

and maybe even in this one,

0:14

S… Speaker 1 (265. Using a Service for Http Requests)

we already have a quite big component with a

0:18

S… Speaker 1 (265. Using a Service for Http Requests)

lot of code that is only indirectly related to the user interface.

0:22

S… Speaker 1 (265. Using a Service for Http Requests)

Of course, we wanna send a request when a button is clicked and we wanna display that response

0:26

S… Speaker 1 (265. Using a Service for Http Requests)

data.

0:27

S… Speaker 2 (265. Using a Service for Http Requests)

But for example,

0:28

S… Speaker 1 (265. Using a Service for Http Requests)

transforming the result,

0:30

S… Speaker 1 (265. Using a Service for Http Requests)

transforming the data,

0:31

S… Speaker 1 (265. Using a Service for Http Requests)

we can do it here.

0:33

S… Speaker 1 (265. Using a Service for Http Requests)

It's not inherently bad,

0:34

S… Speaker 1 (265. Using a Service for Http Requests)

but it is a nice practice to outsource that into services.

0:39

S… Speaker 1 (265. Using a Service for Http Requests)

So that services are the parts in your Angular application that

0:43

S… Speaker 1 (265. Using a Service for Http Requests)

do the

0:44

S… Speaker 1 (265. Using a Service for Http Requests)

heavy lifting,

0:45

S… Speaker 1 (265. Using a Service for Http Requests)

the dirty work,

0:46

S… Speaker 1 (265. Using a Service for Http Requests)

and your components are relatively lean,

0:49

S… Speaker 1 (265. Using a Service for Http Requests)

as lean as they can be,

0:51

S… Speaker 1 (265. Using a Service for Http Requests)

and are mostly concerned with template -related work.

0:55

S… Speaker 1 (265. Using a Service for Http Requests)

So with things like the isFetching property and so on.

0:58

S… Speaker 2 (265. Using a Service for Http Requests)

And therefore,

0:59

S… Speaker 1 (265. Using a Service for Http Requests)

let's create a new service now,

1:01

S… Speaker 1 (265. Using a Service for Http Requests)

the posts service here.

1:04

S… Speaker 1 (265. Using a Service for Http Requests)

And I'll create it by exporting a class,

1:06

S… Speaker 2 (265. Using a Service for Http Requests)

posts,

1:07

S… Speaker 2 (265. Using a Service for Http Requests)

service,

1:08

S… Speaker 2 (265. Using a Service for Http Requests)

and we need to provide that.

1:10

S… Speaker 2 (265. Using a Service for Http Requests)

And for that,

1:10

S… Speaker 2 (265. Using a Service for Http Requests)

we can use two approaches.

1:12

S… Speaker 1 (265. Using a Service for Http Requests)

We can use at injectable,

1:14

S… Speaker 1 (265. Using a Service for Http Requests)

which you need to import from at AngularCore.

1:17

S… Speaker 1 (265. Using a Service for Http Requests)

And there we can pass an object and set provided into root,

1:21

S… Speaker 1 (265. Using a Service for Http Requests)

which is the more modern and recommended approach.

1:23

S… Speaker 1 (265. Using a Service for Http Requests)

But you could also provide it here in the providers array of the app module.

1:28

S… Speaker 1 (265. Using a Service for Http Requests)

And this also wouldn't be bad or a problem.

1:30

S… Speaker 1 (265. Using a Service for Http Requests)

Here,

1:31

S… Speaker 2 (265. Using a Service for Http Requests)

however, I will use this approach.

1:33

S… Speaker 2 (265. Using a Service for Http Requests)

Now, what's my idea behind that service?

1:36

S… Speaker 1 (265. Using a Service for Http Requests)

In this service,

1:37

S… Speaker 2 (265. Using a Service for Http Requests)

I wanna have my HTTP request methods.

1:40

S… Speaker 1 (265. Using a Service for Http Requests)

So the methods that do the HTTP requests,

1:43

S… Speaker 1 (265. Using a Service for Http Requests)

and I only want to get the responses or the

1:47

S… Speaker 1 (265. Using a Service for Http Requests)

message, whether we're done with the request in my front end.

1:50

S… Speaker 1 (265. Using a Service for Http Requests)

So therefore in this service,

1:53

S… Speaker 1 (265. Using a Service for Http Requests)

I will add a new method.

1:58

S… Speaker 1 (265. Using a Service for Http Requests)

create and store a post.

2:00

S… Speaker 1 (265. Using a Service for Http Requests)

You can of course name this however you want.

2:01

S… Speaker 1 (265. Using a Service for Http Requests)

And there I expect to get a title,

2:03

S… Speaker 2 (265. Using a Service for Http Requests)

which is a string and the content,

2:06

S… Speaker 1 (265. Using a Service for Http Requests)

which is a string as an argument,

2:07

S… Speaker 1 (265. Using a Service for Http Requests)

let's say.

2:08

S… Speaker 1 (265. Using a Service for Http Requests)

And here I want to send my HTTP request.

2:11

S… Speaker 2 (265. Using a Service for Http Requests)

Now,

2:12

S… Speaker 1 (265. Using a Service for Http Requests)

of course, I also want to be able to fetch my posts.

2:15

S… Speaker 1 (265. Using a Service for Http Requests)

So we'll add fetch posts here.

2:17

S… Speaker 1 (265. Using a Service for Http Requests)

And there I also want to send a request.

2:21

S… Speaker 2 (265. Using a Service for Http Requests)

Now, of course,

2:21

S… Speaker 2 (265. Using a Service for Http Requests)

I only want to move my code over.

2:23

S… Speaker 1 (265. Using a Service for Http Requests)

That's in the end what I want to do here.

2:25

S… Speaker 2 (265. Using a Service for Http Requests)

So let's grab that HTTP request here from onCreatePost and

2:29

S… Speaker 1 (265. Using a Service for Http Requests)

let's move it into the post service here.

2:32

S… Speaker 1 (265. Using a Service for Http Requests)

Now we're sending the HTTP request here.

2:34

S… Speaker 2 (265. Using a Service for Http Requests)

However, for this to work,

2:35

S… Speaker 1 (265. Using a Service for Http Requests)

we need to inject the HTTP service into this post service.

2:39

S… Speaker 1 (265. Using a Service for Http Requests)

So let's add a constructor.

2:41

S… Speaker 1 (265. Using a Service for Http Requests)

And with the help of that constructor,

2:43

S… Speaker 1 (265. Using a Service for Http Requests)

we inject the HTTP client.

2:46

S… Speaker 1 (265. Using a Service for Http Requests)

and we store it in a property named http and the http client

2:50

S… Speaker 1 (265. Using a Service for Http Requests)

is imported from at angular slash common slash http

2:54

S… Speaker 1 (265. Using a Service for Http Requests)

now of course here we have no post data property

2:59

S… Speaker 1 (265. Using a Service for Http Requests)

anymore i can create that here though and this will in the

3:03

S… Speaker 1 (265. Using a Service for Http Requests)

end be of type post and therefore it will have

3:07

S… Speaker 1 (265. Using a Service for Http Requests)

a thailand's on but we first of all need to import our own post

3:11

S… Speaker 1 (265. Using a Service for Http Requests)

model so let's import post from dot slash post

3:18

S… Speaker 1 (265. Using a Service for Http Requests)

And now to be a real post,

3:21

S… Speaker 1 (265. Using a Service for Http Requests)

we need to set a title property here,

3:23

S… Speaker 1 (265. Using a Service for Http Requests)

which is equal to our title we're getting as an argument.

3:26

S… Speaker 1 (265. Using a Service for Http Requests)

And we need to set a content property,

3:28

S… Speaker 1 (265. Using a Service for Http Requests)

which is equal to the content we're getting as an argument.

3:30

S… Speaker 1 (265. Using a Service for Http Requests)

So the right side of the colon refers to these arguments here.

3:34

S… Speaker 2 (265. Using a Service for Http Requests)

Now that's the post data we're sending.

3:36

S… Speaker 1 (265. Using a Service for Http Requests)

And now we can call create and store a post to

3:40

S… Speaker 1 (265. Using a Service for Http Requests)

send that request.

3:42

S… Speaker 1 (265. Using a Service for Http Requests)

So back in the app component,

3:43

S… Speaker 1 (265. Using a Service for Http Requests)

I now need to inject my own posts service,

3:46

S… Speaker 2 (265. Using a Service for Http Requests)

private posts service,

3:49

S… Speaker 1 (265. Using a Service for Http Requests)

like this,

3:52

S… Speaker 1 (265. Using a Service for Http Requests)

and make sure to add that import path here at the top.

3:56

S… Speaker 1 (265. Using a Service for Http Requests)

You need to import posts service from there.

3:58

S… Speaker 1 (265. Using a Service for Http Requests)

And now in onCreatePost,

4:00

S… Speaker 2 (265. Using a Service for Http Requests)

I simply call this posts service,

4:04

S… Speaker 1 (265. Using a Service for Http Requests)

create and store post.

4:07

S… Speaker 1 (265. Using a Service for Http Requests)

I get an error here because I need to pass some data to that method.

4:10

S… Speaker 1 (265. Using a Service for Http Requests)

I need to pass the title and the content.

4:12

S… Speaker 1 (265. Using a Service for Http Requests)

Now I get my post data here.

4:14

S… Speaker 1 (265. Using a Service for Http Requests)

So I access postdata .title and my second argument I send

4:19

S… Speaker 1 (265. Using a Service for Http Requests)

is postdata .content.

4:21

S… Speaker 2 (265. Using a Service for Http Requests)

And with that,

4:22

S… Speaker 1 (265. Using a Service for Http Requests)

we should be able to create new posts.

4:24

S… Speaker 2 (265. Using a Service for Http Requests)

Let's add a new

4:28

S… Speaker 1 (265. Using a Service for Http Requests)

post here, the best Angular course,

4:31

S… Speaker 2 (265. Using a Service for Http Requests)

which this one hopefully is.

4:33

S… Speaker 1 (265. Using a Service for Http Requests)

I'm of course interested in your feedback.

4:34

S… Speaker 2 (265. Using a Service for Http Requests)

So I hope so.

4:38

S… Speaker 2 (265. Using a Service for Http Requests)

Send that post.

4:39

S… Speaker 1 (265. Using a Service for Http Requests)

Now we have no logic to automatically update our list of posts down there,

4:43

S… Speaker 1 (265. Using a Service for Http Requests)

but that's fine.

4:44

S… Speaker 2 (265. Using a Service for Http Requests)

We can click fetch posts again,

4:45

S… Speaker 1 (265. Using a Service for Http Requests)

and now we see our post here.

4:48

S… Speaker 2 (265. Using a Service for Http Requests)

So that now still works,

4:50

S… Speaker 1 (265. Using a Service for Http Requests)

but now the logic was outsourced into the posts service.

4:54

S… Speaker 2 (265. Using a Service for Http Requests)

Let's do the same for fetching posts.

4:56

S… Speaker 2 (265. Using a Service for Http Requests)

Let's grab this logic here and we'll

5:00

S… Speaker 1 (265. Using a Service for Http Requests)

have a problem with is fetching,

5:02

S… Speaker 2 (265. Using a Service for Http Requests)

but I'll come back to this.

5:03

S… Speaker 2 (265. Using a Service for Http Requests)

Let's grab this logic here and move it into fetch posts

5:07

S… Speaker 1 (265. Using a Service for Http Requests)

in the posts service like that.

5:10

S… Speaker 2 (265. Using a Service for Http Requests)

Now let's remove is fetching and let's remove this loaded posts

5:14

S… Speaker 1 (265. Using a Service for Http Requests)

because we don't have these properties here and we don't really need them

5:18

S… Speaker 1 (265. Using a Service for Http Requests)

here in the post service.

5:19

S… Speaker 1 (265. Using a Service for Http Requests)

Is fetching and the loaded posts clearly belong into our

5:23

S… Speaker 1 (265. Using a Service for Http Requests)

app component and not into the service because the component is where we use them,

5:27

S… Speaker 1 (265. Using a Service for Http Requests)

where we want to display them or where we need them to change what we display

5:31

S… Speaker 1 (265. Using a Service for Http Requests)

in the template.

5:33

S… Speaker 1 (265. Using a Service for Http Requests)

Let's focus on the rest of this code for now.

5:35

S… Speaker 1 (265. Using a Service for Http Requests)

We're missing the map operator,

5:38

S… Speaker 1 (265. Using a Service for Http Requests)

so let's make sure we import that here.

5:40

S… Speaker 1 (265. Using a Service for Http Requests)

Let's import map from rx .js slash operators.

5:44

S… Speaker 2 (265. Using a Service for Http Requests)

And with that,

5:46

S… Speaker 1 (265. Using a Service for Http Requests)

we have a request that should work,

5:49

S… Speaker 1 (265. Using a Service for Http Requests)

but we'll still need to fine tune this later.

5:52

S… Speaker 2 (265. Using a Service for Http Requests)

At the moment,

5:53

S… Speaker 1 (265. Using a Service for Http Requests)

we can get rid of that private method here,

5:56

S… Speaker 1 (265. Using a Service for Http Requests)

of course, and instead where we previously called this fetchPosts,

6:00

S… Speaker 1 (265. Using a Service for Http Requests)

we can now use the posts service and call fetchPosts there.

6:03

S… Speaker 1 (265. Using a Service for Http Requests)

So we do that here in onFetchPosts and in ngOnInit.

6:08

S… Speaker 1 (265. Using a Service for Http Requests)

However, what you will see of course is that now we have no posts

6:12

S… Speaker 1 (265. Using a Service for Http Requests)

available because whilst we're running that code in

6:16

S… Speaker 1 (265. Using a Service for Http Requests)

the service and indeed you can see that if I click fetch posts,

6:20

S… Speaker 1 (265. Using a Service for Http Requests)

a HTTP request is sent and we are fetching the posts.

6:24

S… Speaker 1 (265. Using a Service for Http Requests)

Whilst all of that is happening,

6:26

S… Speaker 1 (265. Using a Service for Http Requests)

we're not seeing the posts here because we lost the connection between

6:31

S… Speaker 1 (265. Using a Service for Http Requests)

the data we fetched in the service and our template.

6:34

S… Speaker 1 (265. Using a Service for Http Requests)

Let's fix that.

265. Using a Service for Http Requests

Summa

De hoc translatio scripsit.