135. Using Relative Paths in Programmatic Navigation

0:02

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

In the last lecture,

0:03

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we learned how to navigate programmatically.

0:05

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now I want to also have a look at how we can use relative paths

0:10

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

there.

0:10

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

So back in our service component,

0:13

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

let's say we have again our reload page link,

0:16

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

but this time it's a button here with button,

0:18

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

button primary,

0:19

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and still we might use this approach because we want to do some

0:23

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

different things.

0:24

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So reload page,

0:25

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and here I will have my click listener on

0:29

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

reload maybe.

0:31

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So if we now go to our TypeScript code here on

0:35

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

reload, we'll simply,

0:37

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

or will be the method which gets triggered.

0:40

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And we already inject this service service here.

0:43

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

I also want to inject the router.

0:46

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So let's add router here.

0:49

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Make sure to add the import from at Angular

0:53

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

router.

0:54

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So we learned that now we could say this router

0:58

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

navigate.

0:59

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And now let's add slash servers here.

1:02

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

If we do this and we save this page and

1:07

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we go to the service page and click reload,

1:09

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

nothing happens.

1:10

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

We don't get an error because we are already on this page.

1:13

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

Technically,

1:14

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

it still reloads the page,

1:15

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

but keep in mind it never sends a request,

1:17

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

so this reload icon will never spin.

1:20

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

But Angular has simply determined that we are on this page,

1:23

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

so no further action is needed.

1:25

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now let's say we remove the slash at the beginning,

1:28

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

so we turn this into a relative path,

1:30

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and we still are on the service component,

1:33

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

keep this in mind.

1:33

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So now if this reloaded and we click this page,

1:36

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we still don't get an error,

1:39

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and now this might be strange because before,

1:41

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

when we used the router link,

1:44

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

you saw that we did get an error because it would try to add servers

1:49

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

to the end of this path.

1:50

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And of course, this route now doesn't exist.

1:53

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So why does it work fine if we use the navigate method?

1:59

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Because unlike the router link,

2:01

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

the navigate method doesn't know on which route you're currently

2:05

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

on, so to say.

2:06

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

The router link always knows in which component it

2:10

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

sits, in which component's template,

2:12

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and therefore it knows what the currently loaded route is.

2:15

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now you could argue that here we also call this inside of the component

2:19

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

TypeScript code,

2:20

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

so it could determine where it is in,

2:22

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

but it's just not how it works.

2:25

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So to tell this where we currently are in,

2:29

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we have to pass a second argument to the navigate method,

2:32

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which is a JavaScript object.

2:34

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And here we can configure this navigation action.

2:38

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

Now,

2:39

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

I will come back to this later because there are more things we can add.

2:42

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

But one configuration is the relative to

2:47

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

property here.

2:49

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Here we define relative to which route this link

2:53

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

should be loaded.

2:54

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And by default,

2:54

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

this is always the root domain,

2:56

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which is why we didn't get an error for this service path.

2:59

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Here we have to give a route though.

3:03

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So we don't pass a string here.

3:05

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Instead,

3:06

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

the route is something we can inject here too.

3:09

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

We can get the currently active route by injecting route,

3:13

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which is of type activated route.

3:16

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And make sure to import activated route from

3:20

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

the at AngularRouter package too.

3:22

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

Now activated route,

3:24

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

like the name implies,

3:25

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

simply injects the currently active route.

3:28

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

So for the component you loaded,

3:30

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

this will be the route which loaded this component.

3:32

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And the route simply is kind of a complex JavaScript object,

3:36

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which keeps a lot of meta information about the currently active route.

3:40

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now we can set this as a value.

3:43

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So this route,

3:44

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

this injected route for the relative to property.

3:47

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And now with that extra piece of information,

3:51

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Angular knows what our currently active route is.

3:55

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And theoretically,

3:56

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

you could also set this to some other route,

3:58

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which you would have to get by some way.

4:01

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So here we're telling it.

4:03

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now, our currently active route is this activated route.

4:06

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Relative to this route,

4:07

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

you should navigate.

4:08

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And then it will simply resolve all

4:12

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

the relative paths you might have here relative to this route.

4:16

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So if this changes in place,

4:19

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we now click this button again.

4:21

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now we broke the app because now it again tries to find servers

4:26

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

slash servers,

4:27

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which doesn't exist.

4:28

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

So great,

4:29

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

we broke the app.

4:30

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

But with that,

4:31

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

you should understand how you can work with relative paths in the

4:35

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

navigate method you define relative to what.

4:38

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

This path should be loaded.

4:40

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

The default is the root URL.

4:41

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

That might be the behavior you're looking for.

4:44

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

It might not be the behavior you're looking for.

4:46

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

You can change it with this extra JavaScript object,

4:50

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

second argument to the navigate method,

4:52

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

where you have the relative to property you can set to the route you want

4:56

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

to navigate relative to.

4:57

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

For now,

4:58

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

I will simply comment this out to disable this not working

5:03

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

button and still keep the code in this example project.

135. Using Relative Paths in Programmatic Navigation

Yhteenveto

Kysy tekoälyltä tästä transcriptistä