288. Resolving Data Before Loading

0:01

S… Speaker 1 (288. Resolving Data Before Loading)

We're almost done for the section,

0:03

S… Speaker 1 (288. Resolving Data Before Loading)

but we have another bug,

0:05

S… Speaker 1 (288. Resolving Data Before Loading)

or not really a bug,

0:07

S… Speaker 1 (288. Resolving Data Before Loading)

but a behavior,

0:07

S… Speaker 1 (288. Resolving Data Before Loading)

which I want to get rid of.

0:08

S… Speaker 1 (288. Resolving Data Before Loading)

If we are on a recipe detail page like this here,

0:11

S… Speaker 1 (288. Resolving Data Before Loading)

recipes slash two,

0:13

S… Speaker 1 (288. Resolving Data Before Loading)

and you reload,

0:14

S… Speaker 1 (288. Resolving Data Before Loading)

you get an error.

0:15

S… Speaker 1 (288. Resolving Data Before Loading)

You get an error that it can't read the property ingredients of undefined,

0:19

S… Speaker 1 (288. Resolving Data Before Loading)

and the bigger problem here is not related to the ingredients,

0:22

S… Speaker 1 (288. Resolving Data Before Loading)

but simply that we tried to load the detail page for a recipe.

0:26

S… Speaker 1 (288. Resolving Data Before Loading)

which doesn't exist because we're fetching our recipes from a

0:30

S… Speaker 1 (288. Resolving Data Before Loading)

backend and if we haven't pressed fetch data before,

0:35

S… Speaker 1 (288. Resolving Data Before Loading)

well then we simply have no recipes so accessing the details

0:39

S… Speaker 1 (288. Resolving Data Before Loading)

of our recipe is doomed to fail.

0:41

S… Speaker 1 (288. Resolving Data Before Loading)

Now there are different ways of

0:44

S… Speaker 1 (288. Resolving Data Before Loading)

making this work.

0:45

S… Speaker 1 (288. Resolving Data Before Loading)

One,

0:46

S… Speaker 1 (288. Resolving Data Before Loading)

of course, would be to simply add a guard that prevents

0:50

S… Speaker 1 (288. Resolving Data Before Loading)

us from accessing recipes slash two or the edit route,

0:54

S… Speaker 1 (288. Resolving Data Before Loading)

which also has an ID encoded in the URL when we

0:58

S… Speaker 1 (288. Resolving Data Before Loading)

have no recipes loaded and instead redirects us to just slash recipes,

1:01

S… Speaker 1 (288. Resolving Data Before Loading)

for example.

1:02

S… Speaker 1 (288. Resolving Data Before Loading)

That would be one way of doing it.

1:04

S… Speaker 1 (288. Resolving Data Before Loading)

We could use such a guard,

1:06

S… Speaker 1 (288. Resolving Data Before Loading)

but we can also use,

1:07

S… Speaker 1 (288. Resolving Data Before Loading)

well,

1:08

S… Speaker 1 (288. Resolving Data Before Loading)

yet.

1:08

S… Speaker 1 (288. Resolving Data Before Loading)

a guard,

1:09

S… Speaker 1 (288. Resolving Data Before Loading)

but another type of guard,

1:10

S… Speaker 1 (288. Resolving Data Before Loading)

we can use a resolver,

1:12

S… Speaker 1 (288. Resolving Data Before Loading)

which are also covered in the routing module.

1:14

S… Speaker 1 (288. Resolving Data Before Loading)

A resolver is essentially some code that runs before a route is

1:18

S… Speaker 1 (288. Resolving Data Before Loading)

loaded to ensure that certain data the route depends on is there.

1:22

S… Speaker 1 (288. Resolving Data Before Loading)

That sounds like a good idea to me.

1:25

S… Speaker 1 (288. Resolving Data Before Loading)

I'll add it in the recipes folder next to the recipes component and

1:29

S… Speaker 1 (288. Resolving Data Before Loading)

I'll name it the file.

1:31

S… Speaker 1 (288. Resolving Data Before Loading)

I'll name the file recipes

1:34

S… Speaker 1 (288. Resolving Data Before Loading)

Resolver .service .ts,

1:36

S… Speaker 1 (288. Resolving Data Before Loading)

because it is a normal Angular service in the end.

1:39

S… Speaker 1 (288. Resolving Data Before Loading)

In there,

1:40

S… Speaker 1 (288. Resolving Data Before Loading)

let's export a class,

1:41

S… Speaker 1 (288. Resolving Data Before Loading)

which should be named recipes,

1:42

S… Speaker 1 (288. Resolving Data Before Loading)

resolver service,

1:44

S… Speaker 1 (288. Resolving Data Before Loading)

and this

1:48

S… Speaker 1 (288. Resolving Data Before Loading)

will get the at injectable decorator,

1:51

S… Speaker 1 (288. Resolving Data Before Loading)

because it is injectable in the end,

1:55

S… Speaker 1 (288. Resolving Data Before Loading)

and injectable,

1:56

S… Speaker 1 (288. Resolving Data Before Loading)

as you learned,

1:57

S… Speaker 1 (288. Resolving Data Before Loading)

needs to be imported from at Angular core.

2:01

S… Speaker 1 (288. Resolving Data Before Loading)

And this will then get the provided in root object

2:06

S… Speaker 1 (288. Resolving Data Before Loading)

here to provide it application -wide automatically.

2:09

S… Speaker 1 (288. Resolving Data Before Loading)

Now the recipes resolver service

2:13

S… Speaker 1 (288. Resolving Data Before Loading)

now needs to implement the resolve

2:18

S… Speaker 1 (288. Resolving Data Before Loading)

interface.

2:19

S… Speaker 1 (288. Resolving Data Before Loading)

Now resolve is also imported from an Angular package,

2:24

S… Speaker 1 (288. Resolving Data Before Loading)

of course.

2:24

S… Speaker 1 (288. Resolving Data Before Loading)

It's imported from at Angular router.

2:29

S… Speaker 1 (288. Resolving Data Before Loading)

Now, resolve is a generic interface,

2:31

S… Speaker 1 (288. Resolving Data Before Loading)

which means we need to define which type of data we'll resolve in the end.

2:35

S… Speaker 1 (288. Resolving Data Before Loading)

And in our case,

2:36

S… Speaker 1 (288. Resolving Data Before Loading)

that will be the recipe data.

2:41

S… Speaker 1 (288. Resolving Data Before Loading)

So an array of recipes.

2:43

S… Speaker 1 (288. Resolving Data Before Loading)

And for that,

2:44

S… Speaker 1 (288. Resolving Data Before Loading)

let's also import recipe from the recipe

2:48

S… Speaker 1 (288. Resolving Data Before Loading)

model here.

2:49

S… Speaker 1 (288. Resolving Data Before Loading)

So our resolver will in the end run some code that loads some recipes.

2:57

S… Speaker 1 (288. Resolving Data Before Loading)

We now need to inject our data storage service here because that is the

3:01

S… Speaker 1 (288. Resolving Data Before Loading)

service that will make the HTTP request.

3:03

S… Speaker 1 (288. Resolving Data Before Loading)

So I'll name it data storage service here of

3:07

S… Speaker 1 (288. Resolving Data Before Loading)

type data storage service,

3:10

S… Speaker 1 (288. Resolving Data Before Loading)

which now also needs to be imported up there from

3:14

S… Speaker 1 (288. Resolving Data Before Loading)

the shared folder

3:18

S… Speaker 1 (288. Resolving Data Before Loading)

and there the data storage service file.

3:21

S… Speaker 1 (288. Resolving Data Before Loading)

And now the resolve interface forces us to add a resolve method

3:26

S… Speaker 1 (288. Resolving Data Before Loading)

here, which gets data about the route,

3:28

S… Speaker 1 (288. Resolving Data Before Loading)

the activated route snapshot,

3:31

S… Speaker 1 (288. Resolving Data Before Loading)

which is imported from the Angular router,

3:33

S… Speaker 1 (288. Resolving Data Before Loading)

and which gets the current routing state,

3:36

S… Speaker 1 (288. Resolving Data Before Loading)

which is of type router state snapshot,

3:39

S… Speaker 1 (288. Resolving Data Before Loading)

which is also imported from at Angular router.

3:43

S… Speaker 1 (288. Resolving Data Before Loading)

From there,

3:44

S… Speaker 1 (288. Resolving Data Before Loading)

we could get information like the ID we're requesting,

3:46

S… Speaker 1 (288. Resolving Data Before Loading)

but I'm not interested.

3:47

S… Speaker 1 (288. Resolving Data Before Loading)

I want to load all recipes anyways,

3:49

S… Speaker 1 (288. Resolving Data Before Loading)

otherwise things like editing them won't work correctly because we need to reinsert

3:54

S… Speaker 1 (288. Resolving Data Before Loading)

them into the array and so on.

3:55

S… Speaker 1 (288. Resolving Data Before Loading)

And therefore now here,

3:58

S… Speaker 1 (288. Resolving Data Before Loading)

The goal is to return either an array of recipes,

4:02

S… Speaker 1 (288. Resolving Data Before Loading)

which we can't because we need to load it first,

4:04

S… Speaker 1 (288. Resolving Data Before Loading)

or an observable that will in the end yield an array of

4:08

S… Speaker 1 (288. Resolving Data Before Loading)

recipes.

4:08

S… Speaker 1 (288. Resolving Data Before Loading)

And that is something different.

4:10

S… Speaker 1 (288. Resolving Data Before Loading)

That is something we can offer.

4:12

S… Speaker 1 (288. Resolving Data Before Loading)

For that,

4:12

S… Speaker 1 (288. Resolving Data Before Loading)

let's have a look at the data storage service.

4:14

S… Speaker 1 (288. Resolving Data Before Loading)

There we have fetch recipes.

4:16

S… Speaker 1 (288. Resolving Data Before Loading)

And right now we subscribe in here.

4:18

S… Speaker 1 (288. Resolving Data Before Loading)

We just have to tweak this a little bit.

4:20

S… Speaker 1 (288. Resolving Data Before Loading)

I still want to set the recipes in the recipe service from

4:25

S… Speaker 1 (288. Resolving Data Before Loading)

inside fetch recipes.

4:26

S… Speaker 1 (288. Resolving Data Before Loading)

But we can simply do this by adding another RxJS operator,

4:29

S… Speaker 1 (288. Resolving Data Before Loading)

the tap operator.

4:31

S… Speaker 1 (288. Resolving Data Before Loading)

And the tap operator also needs to be imported from RxJS operators.

4:35

S… Speaker 1 (288. Resolving Data Before Loading)

The tap operator allows us to execute some code here in place

4:39

S… Speaker 1 (288. Resolving Data Before Loading)

without altering the data that is funneled through that observable.

4:43

S… Speaker 1 (288. Resolving Data Before Loading)

So in here,

4:44

S… Speaker 1 (288. Resolving Data Before Loading)

we will get our recipes array indeed,

4:46

S… Speaker 1 (288. Resolving Data Before Loading)

and I will simply set the recipes in a service then,

4:49

S… Speaker 1 (288. Resolving Data Before Loading)

as before.

4:50

S… Speaker 1 (288. Resolving Data Before Loading)

But now I will not subscribe here anymore,

4:53

S… Speaker 1 (288. Resolving Data Before Loading)

but instead return this

4:55

S… Speaker 1 (288. Resolving Data Before Loading)

call to this HDB service.

4:57

S… Speaker 1 (288. Resolving Data Before Loading)

And that means that in the header component,

5:00

S… Speaker 1 (288. Resolving Data Before Loading)

we now have to subscribe here and you don't even have to pass

5:05

S… Speaker 1 (288. Resolving Data Before Loading)

in a function if you're not caring about the response anyways.

5:07

S… Speaker 1 (288. Resolving Data Before Loading)

So therefore here in the header component,

5:09

S… Speaker 1 (288. Resolving Data Before Loading)

this change of course is a bit redundant,

5:11

S… Speaker 1 (288. Resolving Data Before Loading)

but it's now really helpful here in the resolve method because here we can now

5:15

S… Speaker 1 (288. Resolving Data Before Loading)

return this.

5:17

S… Speaker 1 (288. Resolving Data Before Loading)

data storage service fetch recipes.

5:19

S… Speaker 1 (288. Resolving Data Before Loading)

Now, please note that I'm not subscribing here,

5:22

S… Speaker 1 (288. Resolving Data Before Loading)

but I'm simply not subscribing here because the resolver,

5:26

S… Speaker 1 (288. Resolving Data Before Loading)

this Angular feature will subscribe for me to basically find

5:30

S… Speaker 1 (288. Resolving Data Before Loading)

out once the data is there.

5:32

S… Speaker 1 (288. Resolving Data Before Loading)

You can ignore this error.

5:34

S… Speaker 1 (288. Resolving Data Before Loading)

It's my IDE not understanding that this is valid.

5:37

S… Speaker 1 (288. Resolving Data Before Loading)

So now we should have a valid resolver that loads the data

5:41

S… Speaker 1 (288. Resolving Data Before Loading)

before this page is loaded.

5:43

S… Speaker 1 (288. Resolving Data Before Loading)

So let's now fetch data.

5:46

S… Speaker 1 (288. Resolving Data Before Loading)

open the summer salad and reload.

5:48

S… Speaker 1 (288. Resolving Data Before Loading)

And we still fail.

5:50

S… Speaker 1 (288. Resolving Data Before Loading)

Now, obviously because we're not applying the resolver.

5:53

S… Speaker 1 (288. Resolving Data Before Loading)

So let's now go to the app routing module where we have our

5:57

S… Speaker 1 (288. Resolving Data Before Loading)

two paths that rely on a recipe being loaded.

6:00

S… Speaker 1 (288. Resolving Data Before Loading)

And on both these paths,

6:02

S… Speaker 1 (288. Resolving Data Before Loading)

we now have to add the resolve key,

6:05

S… Speaker 1 (288. Resolving Data Before Loading)

which is an array of resolvers.

6:07

S… Speaker 1 (288. Resolving Data Before Loading)

And there we should add our recipes.

6:12

S… Speaker 1 (288. Resolving Data Before Loading)

and that now needs to be imported.

6:14

S… Speaker 1 (288. Resolving Data Before Loading)

So let's import recipes resolver service

6:18

S… Speaker 1 (288. Resolving Data Before Loading)

from dot slash recipes.

6:22

S… Speaker 1 (288. Resolving Data Before Loading)

And then there it's that recipe resolver service file.

6:26

S… Speaker 1 (288. Resolving Data Before Loading)

Now let's add that same key,

6:28

S… Speaker 1 (288. Resolving Data Before Loading)

whoops, that same key here to the recipe added component.

6:31

S… Speaker 1 (288. Resolving Data Before Loading)

And now Angular will run this resolver before loading this route.

6:35

S… Speaker 1 (288. Resolving Data Before Loading)

So now if I reload this,

6:37

S… Speaker 1 (288. Resolving Data Before Loading)

this looks much better.

6:38

S… Speaker 1 (288. Resolving Data Before Loading)

And now that data is here because now what we do in the end is

6:43

S… Speaker 1 (288. Resolving Data Before Loading)

we run

6:44

S… Speaker 1 (288. Resolving Data Before Loading)

through the resolver,

6:45

S… Speaker 1 (288. Resolving Data Before Loading)

our data storage service fetch recipes method whenever this

6:49

S… Speaker 1 (288. Resolving Data Before Loading)

route gets loaded.

6:50

S… Speaker 1 (288. Resolving Data Before Loading)

And that is super helpful and important here to ensure

6:54

S… Speaker 1 (288. Resolving Data Before Loading)

that our data really is there when we need it.

6:57

S… Speaker 1 (288. Resolving Data Before Loading)

And therefore,

6:58

S… Speaker 1 (288. Resolving Data Before Loading)

even when editing this,

6:59

S… Speaker 1 (288. Resolving Data Before Loading)

if I reload this edit route,

7:01

S… Speaker 1 (288. Resolving Data Before Loading)

this also works.

7:02

S… Speaker 1 (288. Resolving Data Before Loading)

It takes a bit longer to load because the data needs to be fetched first.

7:06

S… Speaker 1 (288. Resolving Data Before Loading)

But since Firebase is super fast,

7:08

S… Speaker 1 (288. Resolving Data Before Loading)

this is no issue.

7:09

S… Speaker 1 (288. Resolving Data Before Loading)

And now we prevent nasty bugs by us loading data,

7:13

S… Speaker 1 (288. Resolving Data Before Loading)

which is not there.

7:14

S… Speaker 1 (288. Resolving Data Before Loading)

because now it is there.

7:15

S… Speaker 1 (288. Resolving Data Before Loading)

And as learned,

7:17

S… Speaker 1 (288. Resolving Data Before Loading)

of course, saving data and fetching data also works so that

7:21

S… Speaker 1 (288. Resolving Data Before Loading)

now we can freely delete our recipes as we want.

7:24

S… Speaker 1 (288. Resolving Data Before Loading)

We can always fetch them again,

7:26

S… Speaker 1 (288. Resolving Data Before Loading)

unless we saved again after deleting,

7:28

S… Speaker 1 (288. Resolving Data Before Loading)

of course.

288. Resolving Data Before Loading

Sammanfattning

Fråga AI om detta Transcript