132. Understanding Navigation Paths

Jul 15, 2026 05:29 · 4:54 · English · Whisper Turbo · 1 Reproduktory

Tento přepis dnes vyprší. Upgrade pro trvalé skladování →

Index přednášek

0:02

S… Speaker 1 (132. Understanding Navigation Paths)

In the last lecture,

0:03

S… Speaker 1 (132. Understanding Navigation Paths)

we added this navigation,

0:04

S… Speaker 1 (132. Understanding Navigation Paths)

and I also mentioned that you can change the way you use

0:09

S… Speaker 1 (132. Understanding Navigation Paths)

your paths here.

0:09

S… Speaker 1 (132. Understanding Navigation Paths)

Right now,

0:11

S… Speaker 1 (132. Understanding Navigation Paths)

we use slash slash servers,

0:12

S… Speaker 1 (132. Understanding Navigation Paths)

or even with this more complex notation,

0:15

S… Speaker 1 (132. Understanding Navigation Paths)

we have slash users as the first element.

0:17

S… Speaker 1 (132. Understanding Navigation Paths)

Now,

0:18

S… Speaker 1 (132. Understanding Navigation Paths)

what happens if we just use servers here like this and just use

0:23

S… Speaker 1 (132. Understanding Navigation Paths)

users like this?

0:24

S… Speaker 1 (132. Understanding Navigation Paths)

Let's save this without deleting slash.

0:26

S… Speaker 1 (132. Understanding Navigation Paths)

Now,

0:28

S… Speaker 1 (132. Understanding Navigation Paths)

if we click there on our links,

0:30

S… Speaker 1 (132. Understanding Navigation Paths)

You still see this works absolutely fine.

0:34

S… Speaker 1 (132. Understanding Navigation Paths)

Nothing changed.

0:35

S… Speaker 1 (132. Understanding Navigation Paths)

Now let's go to our service component template

0:40

S… Speaker 1 (132. Understanding Navigation Paths)

file here.

0:40

S… Speaker 1 (132. Understanding Navigation Paths)

And for now,

0:42

S… Speaker 1 (132. Understanding Navigation Paths)

let's quickly add an anchor teller element here where we also

0:46

S… Speaker 1 (132. Understanding Navigation Paths)

add a router link where I add service again.

0:51

S… Speaker 1 (132. Understanding Navigation Paths)

Reload page would be a fitting description.

0:53

S… Speaker 1 (132. Understanding Navigation Paths)

So on this service component,

0:55

S… Speaker 1 (132. Understanding Navigation Paths)

I now added this router link where I basically want to make sure that I stay on the service

0:59

S… Speaker 1 (132. Understanding Navigation Paths)

page, which I'm already on.

1:00

S… Speaker 1 (132. Understanding Navigation Paths)

So if you go to service here,

1:03

S… Speaker 1 (132. Understanding Navigation Paths)

we see the reload page here.

1:04

S… Speaker 1 (132. Understanding Navigation Paths)

And if I click it,

1:05

S… Speaker 1 (132. Understanding Navigation Paths)

you see we got an error.

1:07

S… Speaker 1 (132. Understanding Navigation Paths)

This error here occurs because it doesn't find a route

1:11

S… Speaker 1 (132. Understanding Navigation Paths)

which is servers slash servers.

1:14

S… Speaker 1 (132. Understanding Navigation Paths)

Now this error won't occur if on the service component I

1:18

S… Speaker 1 (132. Understanding Navigation Paths)

turn this to slash service so to an absolute path it was a

1:22

S… Speaker 1 (132. Understanding Navigation Paths)

relative path Here if we now have our

1:26

S… Speaker 1 (132. Understanding Navigation Paths)

console still open and I click reload page

1:30

S… Speaker 1 (132. Understanding Navigation Paths)

Nothing occurs here,

1:31

S… Speaker 1 (132. Understanding Navigation Paths)

no error occurs,

1:32

S… Speaker 1 (132. Understanding Navigation Paths)

because now it simply navigates to localhost 4200

1:36

S… Speaker 1 (132. Understanding Navigation Paths)

slash servers,

1:37

S… Speaker 1 (132. Understanding Navigation Paths)

as you can see down there.

1:39

S… Speaker 1 (132. Understanding Navigation Paths)

And if we turn this back to a relative path,

1:42

S… Speaker 1 (132. Understanding Navigation Paths)

the difference was that now it tries to go slash

1:46

S… Speaker 1 (132. Understanding Navigation Paths)

servers, servers.

1:47

S… Speaker 1 (132. Understanding Navigation Paths)

So with a relative path,

1:49

S… Speaker 1 (132. Understanding Navigation Paths)

it always appends the path you specify in the router link to the

1:54

S… Speaker 1 (132. Understanding Navigation Paths)

end of your current path.

1:55

S… Speaker 1 (132. Understanding Navigation Paths)

And important here,

1:56

S… Speaker 1 (132. Understanding Navigation Paths)

the current path depends on which component you're currently on.

1:59

S… Speaker 1 (132. Understanding Navigation Paths)

That is why we could remove that in our navigation,

2:04

S… Speaker 1 (132. Understanding Navigation Paths)

where we also use relative paths,

2:06

S… Speaker 1 (132. Understanding Navigation Paths)

because that is in our root component.

2:08

S… Speaker 1 (132. Understanding Navigation Paths)

This component is not loaded through the router,

2:11

S… Speaker 1 (132. Understanding Navigation Paths)

so this root component always sits at

2:14

S… Speaker 1 (132. Understanding Navigation Paths)

localhost 4200 slash nothing.

2:17

S… Speaker 1 (132. Understanding Navigation Paths)

So this is always at our root level,

2:20

S… Speaker 1 (132. Understanding Navigation Paths)

which is why we can use relative paths here too.

2:23

S… Speaker 1 (132. Understanding Navigation Paths)

But one layer below that,

2:25

S… Speaker 1 (132. Understanding Navigation Paths)

once we loaded a route,

2:27

S… Speaker 1 (132. Understanding Navigation Paths)

for example,

2:27

S… Speaker 1 (132. Understanding Navigation Paths)

the service component,

2:28

S… Speaker 1 (132. Understanding Navigation Paths)

this page is only loaded if we are at slash servers.

2:32

S… Speaker 1 (132. Understanding Navigation Paths)

So if we add a relative route here,

2:35

S… Speaker 1 (132. Understanding Navigation Paths)

This will now get appended to this route we are on,

2:38

S… Speaker 1 (132. Understanding Navigation Paths)

so it will try to load servers slash servers,

2:41

S… Speaker 1 (132. Understanding Navigation Paths)

and therefore it gives us an error in our case,

2:44

S… Speaker 1 (132. Understanding Navigation Paths)

because we haven't registered a servers slash servers route.

2:48

S… Speaker 1 (132. Understanding Navigation Paths)

Now,

2:49

S… Speaker 1 (132. Understanding Navigation Paths)

of course, using relative paths inside of active components,

2:54

S… Speaker 1 (132. Understanding Navigation Paths)

active routes,

2:55

S… Speaker 1 (132. Understanding Navigation Paths)

might be a nice thing if you have nested routes.

2:58

S… Speaker 1 (132. Understanding Navigation Paths)

Right now,

2:59

S… Speaker 1 (132. Understanding Navigation Paths)

it will only break the app,

3:00

S… Speaker 1 (132. Understanding Navigation Paths)

though.

3:01

S… Speaker 1 (132. Understanding Navigation Paths)

Now, you can also use relative paths with dot slash at the beginning.

3:05

S… Speaker 1 (132. Understanding Navigation Paths)

This is the same as having nothing there.

3:07

S… Speaker 1 (132. Understanding Navigation Paths)

And you can even navigate around like in a folder

3:11

S… Speaker 1 (132. Understanding Navigation Paths)

directory.

3:12

S… Speaker 1 (132. Understanding Navigation Paths)

You could add dot dot slash,

3:14

S… Speaker 1 (132. Understanding Navigation Paths)

which means go up one level,

3:16

S… Speaker 1 (132. Understanding Navigation Paths)

and then add this to the path

3:20

S… Speaker 1 (132. Understanding Navigation Paths)

here. Now,

3:22

S… Speaker 1 (132. Understanding Navigation Paths)

if we do this inside of our service component,

3:25

S… Speaker 1 (132. Understanding Navigation Paths)

You will see if I hover over this,

3:27

S… Speaker 1 (132. Understanding Navigation Paths)

now it again only tries to load slash servers,

3:30

S… Speaker 1 (132. Understanding Navigation Paths)

and therefore we don't see an error.

3:32

S… Speaker 1 (132. Understanding Navigation Paths)

Because now it first goes back one level,

3:36

S… Speaker 1 (132. Understanding Navigation Paths)

which basically is to just our root path,

3:39

S… Speaker 1 (132. Understanding Navigation Paths)

so it removes one path,

3:40

S… Speaker 1 (132. Understanding Navigation Paths)

and important path depends on the route you're on.

3:43

S… Speaker 1 (132. Understanding Navigation Paths)

So if you were on servers slash something,

3:47

S… Speaker 1 (132. Understanding Navigation Paths)

and this would load this component,

3:49

S… Speaker 1 (132. Understanding Navigation Paths)

it would remove both.

3:51

S… Speaker 1 (132. Understanding Navigation Paths)

So this does not necessarily only remove one segment here.

3:55

S… Speaker 1 (132. Understanding Navigation Paths)

It removes the currently loaded segment,

3:57

S… Speaker 1 (132. Understanding Navigation Paths)

you could say.

3:58

S… Speaker 1 (132. Understanding Navigation Paths)

So in this case,

3:59

S… Speaker 1 (132. Understanding Navigation Paths)

it removes this and then adds slash service again,

4:02

S… Speaker 1 (132. Understanding Navigation Paths)

which is why this works.

4:03

S… Speaker 1 (132. Understanding Navigation Paths)

And this is how you can navigate around absolute paths with

4:07

S… Speaker 1 (132. Understanding Navigation Paths)

a slash at the beginning,

4:09

S… Speaker 1 (132. Understanding Navigation Paths)

which will always get appended to the root domain.

4:11

S… Speaker 1 (132. Understanding Navigation Paths)

Relative paths without a slash or with dot slash,

4:16

S… Speaker 1 (132. Understanding Navigation Paths)

which means added to the currently loaded path.

4:19

S… Speaker 1 (132. Understanding Navigation Paths)

or dot dot slash,

4:21

S… Speaker 1 (132. Understanding Navigation Paths)

and you can even add more of them,

4:22

S… Speaker 1 (132. Understanding Navigation Paths)

to say,

4:24

S… Speaker 1 (132. Understanding Navigation Paths)

well, go back once path,

4:26

S… Speaker 1 (132. Understanding Navigation Paths)

go back another path.

4:27

S… Speaker 1 (132. Understanding Navigation Paths)

So always seen from the currently loaded component on.

4:31

S… Speaker 1 (132. Understanding Navigation Paths)

And if that is something which is not 100 % clear,

4:35

S… Speaker 1 (132. Understanding Navigation Paths)

you will see it throughout its module,

4:37

S… Speaker 1 (132. Understanding Navigation Paths)

but also feel free to play around with it,

4:39

S… Speaker 1 (132. Understanding Navigation Paths)

add your own routes,

4:40

S… Speaker 1 (132. Understanding Navigation Paths)

add some nesting,

4:41

S… Speaker 1 (132. Understanding Navigation Paths)

add more complex paths,

4:43

S… Speaker 1 (132. Understanding Navigation Paths)

and see how this works out.

4:45

S… Speaker 1 (132. Understanding Navigation Paths)

But for now,

4:46

S… Speaker 1 (132. Understanding Navigation Paths)

let's continue with our application.

4:48

S… Speaker 1 (132. Understanding Navigation Paths)

I will remove this reload page link and let's enhance this a bit more.

Tento přepis byl vytvořen AI (automatické rozpoznávání řeči). Může obsahovat chyby?? ověřit proti původnímu zvuku pro kritické použití. Politika AI

❤️ Máte rádi STT.ai? Řekněte to přátelům!

Shrnutí

Klikněte na Summarise pro generování AI shrnutí tohoto přepisu.

Zeptejte se UI na tento transcript

Zeptejte se na cokoliv o tomto přepisu, najdete příslušné sekce a odpověď.

Přepsat další