284. Setting Up the DataStorage Service

0:02

S… Speaker 1 (284. Setting Up the DataStorage Service)

To use the Angular HTTP service,

0:04

S… Speaker 1 (284. Setting Up the DataStorage Service)

just to bring this back in memory,

0:05

S… Speaker 1 (284. Setting Up the DataStorage Service)

I want to use it here to save and fetch recipes in the end.

0:09

S… Speaker 2 (284. Setting Up the DataStorage Service)

So to use that,

0:10

S… Speaker 1 (284. Setting Up the DataStorage Service)

we need a place to make these HTTP requests.

0:13

S… Speaker 2 (284. Setting Up the DataStorage Service)

Now,

0:14

S… Speaker 1 (284. Setting Up the DataStorage Service)

the buttons I just showed you can be found in the header.

0:17

S… Speaker 2 (284. Setting Up the DataStorage Service)

So there,

0:19

S… Speaker 1 (284. Setting Up the DataStorage Service)

indeed, if we have a look at our project,

0:21

S… Speaker 1 (284. Setting Up the DataStorage Service)

we have the header component.

0:22

S… Speaker 2 (284. Setting Up the DataStorage Service)

Here,

0:23

S… Speaker 1 (284. Setting Up the DataStorage Service)

we have the save data and the fetch data buttons,

0:26

S… Speaker 1 (284. Setting Up the DataStorage Service)

and there's our header component.

0:29

S… Speaker 1 (284. Setting Up the DataStorage Service)

Now, of course, one thing we could do is we could add click listeners

0:33

S… Speaker 1 (284. Setting Up the DataStorage Service)

to these buttons and then in the component body of the header component,

0:36

S… Speaker 1 (284. Setting Up the DataStorage Service)

we could inject the Angular HTTP service and

0:40

S… Speaker 1 (284. Setting Up the DataStorage Service)

make our HTTP requests here.

0:42

S… Speaker 2 (284. Setting Up the DataStorage Service)

Now,

0:43

S… Speaker 1 (284. Setting Up the DataStorage Service)

this is a couple of disadvantages.

0:45

S… Speaker 1 (284. Setting Up the DataStorage Service)

One disadvantage is that here in the header component,

0:49

S… Speaker 1 (284. Setting Up the DataStorage Service)

we have the buttons,

0:50

S… Speaker 1 (284. Setting Up the DataStorage Service)

but we don't really have the data we want to interact with.

0:54

S… Speaker 1 (284. Setting Up the DataStorage Service)

The data we want to interact with are our recipes,

0:57

S… Speaker 1 (284. Setting Up the DataStorage Service)

of course, and these are managed in the recipe service.

0:59

S… Speaker 2 (284. Setting Up the DataStorage Service)

Therefore,

1:01

S… Speaker 1 (284. Setting Up the DataStorage Service)

a better place to make these requests would be the

1:05

S… Speaker 1 (284. Setting Up the DataStorage Service)

recipe service.

1:06

S… Speaker 1 (284. Setting Up the DataStorage Service)

Though I'll take yet another route here,

1:09

S… Speaker 1 (284. Setting Up the DataStorage Service)

which is optional though.

1:10

S… Speaker 1 (284. Setting Up the DataStorage Service)

I will create a new service for this in the shared folder

1:14

S… Speaker 1 (284. Setting Up the DataStorage Service)

and I will name this data -storage service.

1:18

S… Speaker 1 (284. Setting Up the DataStorage Service)

And that is totally optional.

1:20

S… Speaker 1 (284. Setting Up the DataStorage Service)

You could definitely manage this in the recipe service.

1:23

S… Speaker 1 (284. Setting Up the DataStorage Service)

I just want to split this up to make it really easy to focus on

1:27

S… Speaker 1 (284. Setting Up the DataStorage Service)

that HTTP functionality and for you to quickly find it if

1:31

S… Speaker 1 (284. Setting Up the DataStorage Service)

you later go through that project again.

1:33

S… Speaker 1 (284. Setting Up the DataStorage Service)

But handling the HTTP requests in the recipe service would be perfectly

1:37

S… Speaker 1 (284. Setting Up the DataStorage Service)

fine because we are interacting with recipes in the end.

1:40

S… Speaker 1 (284. Setting Up the DataStorage Service)

Yet here is the data storage service and there

1:44

S… Speaker 1 (284. Setting Up the DataStorage Service)

Let's export a class which should be named data storage service to use that

1:48

S… Speaker 1 (284. Setting Up the DataStorage Service)

typical naming pattern.

1:49

S… Speaker 1 (284. Setting Up the DataStorage Service)

And we can again provide,

1:52

S… Speaker 1 (284. Setting Up the DataStorage Service)

we have to provide this.

1:54

S… Speaker 1 (284. Setting Up the DataStorage Service)

Now, first of all,

1:56

S… Speaker 1 (284. Setting Up the DataStorage Service)

we will inject the Angular HTTP service.

2:00

S… Speaker 1 (284. Setting Up the DataStorage Service)

And since we will inject a service into a service,

2:03

S… Speaker 1 (284. Setting Up the DataStorage Service)

we need to add at injectable.

2:06

S… Speaker 1 (284. Setting Up the DataStorage Service)

You learned this in the services section and it is important to keep this in mind.

2:10

S… Speaker 1 (284. Setting Up the DataStorage Service)

Theoretically,

2:11

S… Speaker 1 (284. Setting Up the DataStorage Service)

at injectable is optional.

2:13

S… Speaker 1 (284. Setting Up the DataStorage Service)

You don't need to add it to your services.

2:15

S… Speaker 1 (284. Setting Up the DataStorage Service)

But you need to add it as soon as your service gets

2:20

S… Speaker 1 (284. Setting Up the DataStorage Service)

another service injected,

2:21

S… Speaker 1 (284. Setting Up the DataStorage Service)

which will be the case here because I will inject the HTTP service.

2:25

S… Speaker 1 (284. Setting Up the DataStorage Service)

And in addition to that,

2:27

S… Speaker 1 (284. Setting Up the DataStorage Service)

here we can now also use that newer shortcut of

2:31

S… Speaker 1 (284. Setting Up the DataStorage Service)

providing this,

2:32

S… Speaker 1 (284. Setting Up the DataStorage Service)

the alternative to adding it to the providers array in the app module.

2:36

S… Speaker 1 (284. Setting Up the DataStorage Service)

We can simply add an object which we pass as an argument to

2:41

S… Speaker 1 (284. Setting Up the DataStorage Service)

add injectable where we set provided into root.

2:44

S… Speaker 1 (284. Setting Up the DataStorage Service)

Now again, as you learned,

2:45

S… Speaker 1 (284. Setting Up the DataStorage Service)

this is optional.

2:46

S… Speaker 1 (284. Setting Up the DataStorage Service)

You could not use that and instead add the data storage

2:50

S… Speaker 1 (284. Setting Up the DataStorage Service)

service here to providers,

2:52

S… Speaker 1 (284. Setting Up the DataStorage Service)

just as we're doing it with the shopping list service and the recipe service.

2:55

S… Speaker 1 (284. Setting Up the DataStorage Service)

And on the other hand,

2:56

S… Speaker 1 (284. Setting Up the DataStorage Service)

you could of course also provide these services in the same way we're

3:00

S… Speaker 1 (284. Setting Up the DataStorage Service)

providing this data storage service now.

3:03

S… Speaker 2 (284. Setting Up the DataStorage Service)

Now, with that,

3:04

S… Speaker 1 (284. Setting Up the DataStorage Service)

I already mentioned it,

3:05

S… Speaker 1 (284. Setting Up the DataStorage Service)

we definitely should inject something into the data storage service

3:10

S… Speaker 1 (284. Setting Up the DataStorage Service)

and that something will be the Angular HTTP client.

3:13

S… Speaker 2 (284. Setting Up the DataStorage Service)

Now,

3:14

S… Speaker 1 (284. Setting Up the DataStorage Service)

as you learned in that HTTP module,

3:17

S… Speaker 1 (284. Setting Up the DataStorage Service)

for that to be usable,

3:18

S… Speaker 1 (284. Setting Up the DataStorage Service)

we first of all need to do something in the app module.

3:21

S… Speaker 2 (284. Setting Up the DataStorage Service)

There,

3:22

S… Speaker 1 (284. Setting Up the DataStorage Service)

we need to import the HTTP client

3:26

S… Speaker 1 (284. Setting Up the DataStorage Service)

module from

3:30

S… Speaker 1 (284. Setting Up the DataStorage Service)

at Angular common HTTP.

3:33

S… Speaker 1 (284. Setting Up the DataStorage Service)

So this import statement needs to be added at the top

3:37

S… Speaker 1 (284. Setting Up the DataStorage Service)

of the app module.

3:38

S… Speaker 2 (284. Setting Up the DataStorage Service)

And with that added,

3:40

S… Speaker 1 (284. Setting Up the DataStorage Service)

we have to import that HTTP client module.

3:44

S… Speaker 1 (284. Setting Up the DataStorage Service)

So now down there in the imports array of our ng module,

3:47

S… Speaker 1 (284. Setting Up the DataStorage Service)

here maybe after the reactive forms module,

3:51

S… Speaker 1 (284. Setting Up the DataStorage Service)

because I like to group all the Angular modules together before our

3:55

S… Speaker 1 (284. Setting Up the DataStorage Service)

custom modules come.

3:56

S… Speaker 2 (284. Setting Up the DataStorage Service)

So here,

3:58

S… Speaker 1 (284. Setting Up the DataStorage Service)

We can now add that HTTP client module and this is crucial

4:02

S… Speaker 1 (284. Setting Up the DataStorage Service)

to unlock the HTTP client functionality in our application.

4:06

S… Speaker 2 (284. Setting Up the DataStorage Service)

With that,

4:07

S… Speaker 1 (284. Setting Up the DataStorage Service)

in any part of our application,

4:10

S… Speaker 1 (284. Setting Up the DataStorage Service)

we can use the Angular HTTP client,

4:12

S… Speaker 1 (284. Setting Up the DataStorage Service)

which means we can inject it.

4:14

S… Speaker 1 (284. Setting Up the DataStorage Service)

And that's the next step.

4:15

S… Speaker 1 (284. Setting Up the DataStorage Service)

Here in the data storage service,

4:18

S… Speaker 1 (284. Setting Up the DataStorage Service)

I want to send HTTP requests and I will do that or

4:22

S… Speaker 1 (284. Setting Up the DataStorage Service)

we will do that by using the Angular HTTP client.

4:26

S… Speaker 1 (284. Setting Up the DataStorage Service)

Now with the HTTP client module imported into our project,

4:30

S… Speaker 1 (284. Setting Up the DataStorage Service)

we can inject the Angular HTTP client here.

4:33

S… Speaker 2 (284. Setting Up the DataStorage Service)

For that,

4:35

S… Speaker 1 (284. Setting Up the DataStorage Service)

we first of all need to import it.

4:37

S… Speaker 1 (284. Setting Up the DataStorage Service)

Now here it's named HTTP client and we import it from

4:41

S… Speaker 1 (284. Setting Up the DataStorage Service)

at Angular slash common slash HTTP.

4:44

S… Speaker 2 (284. Setting Up the DataStorage Service)

Now...

4:46

S… Speaker 1 (284. Setting Up the DataStorage Service)

I will store it in a private property named HTTP.

4:49

S… Speaker 1 (284. Setting Up the DataStorage Service)

And again,

4:50

S… Speaker 1 (284. Setting Up the DataStorage Service)

this is this TypeScript shortcut where by adding an accessor

4:55

S… Speaker 1 (284. Setting Up the DataStorage Service)

like private in front of the argument,

4:57

S… Speaker 1 (284. Setting Up the DataStorage Service)

TypeScript automatically creates a property of the same name and stores

5:01

S… Speaker 1 (284. Setting Up the DataStorage Service)

whatever we accept as an argument here in that property.

5:05

S… Speaker 1 (284. Setting Up the DataStorage Service)

And for Angular's dependency injection to work,

5:08

S… Speaker 1 (284. Setting Up the DataStorage Service)

we now have to set the type here of that injected argument

5:12

S… Speaker 1 (284. Setting Up the DataStorage Service)

to HTTP client.

5:13

S… Speaker 1 (284. Setting Up the DataStorage Service)

So what I imported here.

5:15

S… Speaker 1 (284. Setting Up the DataStorage Service)

Now Angular is able to inject this,

5:18

S… Speaker 1 (284. Setting Up the DataStorage Service)

also thanks to us unlocking the HTTP client in the

5:22

S… Speaker 1 (284. Setting Up the DataStorage Service)

app module.

5:23

S… Speaker 1 (284. Setting Up the DataStorage Service)

And now we can start writing logic to save recipes

5:27

S… Speaker 1 (284. Setting Up the DataStorage Service)

to our backend and to fetch them from there.

284. Setting Up the DataStorage Service

Oversigt

Spørg AI om denne transskription