132. Understanding Navigation Paths

Jul 15, 2026 05:29 · 4:54 · English · Whisper Turbo · 1 דוברים

תעתיק זה פג היום. שדרוג לאחסון קבוע →

אינדקס הרצאה

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.

תעתיק זה נוצר על ידי AI (הכרה אוטומטית של דיבור). ייתכן שיש בו שגיאות אשר מאשרות את השמע המקורי לשימוש קריטי. מדיניות AI

❤️ אוהבים את STT.ai? ספרו לחברים שלכם!

תקציר

לחץ לסכם כדי ליצור סיכום AI של תעתיק זה.

שאל את אל על התעתיק הזה.

שאל כל דבר על התמליל הזה, הבינה המלאכותית תמצא חלקים רלוונטיים ותענה.

תמלול נוסף