131. Navigating with Router Links

0:02

S… Speaker 1 (131. Navigating with Router Links)

In the last lecture,

0:03

S… Speaker 1 (131. Navigating with Router Links)

we made our routing work.

0:05

S… Speaker 1 (131. Navigating with Router Links)

We added routes and we gave Angular a place to load our currently active component.

0:09

S… Speaker 1 (131. Navigating with Router Links)

But one issue we have is right now we can only navigate around

0:14

S… Speaker 1 (131. Navigating with Router Links)

by manually typing it here in the address bar.

0:17

S… Speaker 1 (131. Navigating with Router Links)

Not super convenient.

0:18

S… Speaker 1 (131. Navigating with Router Links)

And whilst it is important to be able to load a route directly from

0:23

S… Speaker 1 (131. Navigating with Router Links)

the address bar,

0:24

S… Speaker 1 (131. Navigating with Router Links)

it would also be nice to have some working links here in our navigation to have

0:28

S… Speaker 1 (131. Navigating with Router Links)

these tabs work.

0:29

S… Speaker 1 (131. Navigating with Router Links)

So let's add some links to our application.

0:32

S… Speaker 1 (131. Navigating with Router Links)

And if we go to our app component,

0:35

S… Speaker 1 (131. Navigating with Router Links)

we see here's our navigation.

0:36

S… Speaker 1 (131. Navigating with Router Links)

The first thing you might think about is,

0:39

S… Speaker 1 (131. Navigating with Router Links)

hey, we can or we already have this ref attribute here to be precise.

0:44

S… Speaker 1 (131. Navigating with Router Links)

So here we could have ref,

0:45

S… Speaker 1 (131. Navigating with Router Links)

well, just slash to load our root route.

0:48

S… Speaker 1 (131. Navigating with Router Links)

Here we could have slash servers.

0:50

S… Speaker 1 (131. Navigating with Router Links)

And here we could have slash users.

0:53

S… Speaker 1 (131. Navigating with Router Links)

And if we now save this,

0:55

S… Speaker 1 (131. Navigating with Router Links)

we added all the routes,

0:56

S… Speaker 1 (131. Navigating with Router Links)

the paths we set up in our routes configuration to our navigation

1:01

S… Speaker 1 (131. Navigating with Router Links)

here.

1:01

S… Speaker 1 (131. Navigating with Router Links)

And hence,

1:02

S… Speaker 1 (131. Navigating with Router Links)

if this reloads and we click the tabs,

1:04

S… Speaker 1 (131. Navigating with Router Links)

hey, this is indeed working.

1:06

S… Speaker 1 (131. Navigating with Router Links)

Now we are correctly loading the route you want to load.

1:09

S… Speaker 1 (131. Navigating with Router Links)

Okay, just...

1:10

S… Speaker 1 (131. Navigating with Router Links)

Tab is not updated,

1:11

S… Speaker 1 (131. Navigating with Router Links)

but I will come back to this later.

1:12

S… Speaker 1 (131. Navigating with Router Links)

But the reloading is working.

1:14

S… Speaker 1 (131. Navigating with Router Links)

And that's the issue.

1:16

S… Speaker 1 (131. Navigating with Router Links)

It's reloading the app.

1:17

S… Speaker 1 (131. Navigating with Router Links)

Watch this reload icon here.

1:20

S… Speaker 1 (131. Navigating with Router Links)

Do you see this?

1:21

S… Speaker 1 (131. Navigating with Router Links)

We refresh the app with every link we click.

1:24

S… Speaker 1 (131. Navigating with Router Links)

And that's the natural behavior because with every link we click,

1:28

S… Speaker 1 (131. Navigating with Router Links)

a new request gets sent to the server and it returns us a new page.

1:32

S… Speaker 1 (131. Navigating with Router Links)

And since this page is still our Angular app with the routes registered on

1:36

S… Speaker 1 (131. Navigating with Router Links)

it, it is able to give us the correct route.

1:39

S… Speaker 1 (131. Navigating with Router Links)

So the same thing happens as if we entered this manually here.

1:43

S… Speaker 1 (131. Navigating with Router Links)

That however is not the best behavior because it means it restarts

1:47

S… Speaker 1 (131. Navigating with Router Links)

our app on every navigation.

1:49

S… Speaker 1 (131. Navigating with Router Links)

That of course means our whole application state will be lost and it

1:53

S… Speaker 1 (131. Navigating with Router Links)

might not really be the behavior we want to offer to the user.

1:56

S… Speaker 1 (131. Navigating with Router Links)

So this is not how you should implement navigation.

2:00

S… Speaker 1 (131. Navigating with Router Links)

How should you implement it then?

2:02

S… Speaker 1 (131. Navigating with Router Links)

There is a special directive Angular gives us.

2:06

S… Speaker 1 (131. Navigating with Router Links)

Let's get rid of all these ref attributes here.

2:09

S… Speaker 1 (131. Navigating with Router Links)

So this is not how we will navigate around.

2:12

S… Speaker 1 (131. Navigating with Router Links)

Instead,

2:13

S… Speaker 1 (131. Navigating with Router Links)

let's use this special directive.

2:16

S… Speaker 1 (131. Navigating with Router Links)

It's called router link.

2:18

S… Speaker 1 (131. Navigating with Router Links)

Now router link like this simply is able

2:22

S… Speaker 1 (131. Navigating with Router Links)

to parse a string where we could pass just slash.

2:25

S… Speaker 1 (131. Navigating with Router Links)

So just this string slash to router link here.

2:28

S… Speaker 1 (131. Navigating with Router Links)

Now this will tell Angular that this element

2:32

S… Speaker 1 (131. Navigating with Router Links)

on which router link is placed here,

2:34

S… Speaker 1 (131. Navigating with Router Links)

this anchor tag here,

2:35

S… Speaker 1 (131. Navigating with Router Links)

will serve as a link in the end,

2:38

S… Speaker 1 (131. Navigating with Router Links)

but it will handle a click differently as you will see in a second.

2:41

S… Speaker 1 (131. Navigating with Router Links)

Let's now also add this to the service link.

2:44

S… Speaker 1 (131. Navigating with Router Links)

So router link equals slash servers.

2:47

S… Speaker 1 (131. Navigating with Router Links)

And I will come back to how you may write the path here in

2:51

S… Speaker 1 (131. Navigating with Router Links)

the next lecture.

2:52

S… Speaker 1 (131. Navigating with Router Links)

Another way of using router link is with property

2:56

S… Speaker 1 (131. Navigating with Router Links)

binding.

2:57

S… Speaker 1 (131. Navigating with Router Links)

So you can enclose it in square brackets.

2:59

S… Speaker 1 (131. Navigating with Router Links)

And now,

3:00

S… Speaker 1 (131. Navigating with Router Links)

of course, you can't just pass slash users here because this would now search

3:04

S… Speaker 1 (131. Navigating with Router Links)

for a property with that name,

3:06

S… Speaker 1 (131. Navigating with Router Links)

which would even be an invalid name in JavaScript.

3:08

S… Speaker 1 (131. Navigating with Router Links)

So now you have to pass a string here with single quotation marks

3:13

S… Speaker 1 (131. Navigating with Router Links)

or better an array,

3:15

S… Speaker 1 (131. Navigating with Router Links)

which gives you a more fine -grained control over route the link.

3:18

S… Speaker 1 (131. Navigating with Router Links)

And I will come back to this later when this is especially useful.

3:22

S… Speaker 1 (131. Navigating with Router Links)

Here in this array,

3:24

S… Speaker 1 (131. Navigating with Router Links)

you now specify all these segments of your path as elements

3:28

S… Speaker 1 (131. Navigating with Router Links)

in this array.

3:29

S… Speaker 1 (131. Navigating with Router Links)

So the first segment in this case is only a string

3:33

S… Speaker 1 (131. Navigating with Router Links)

slash users.

3:35

S… Speaker 1 (131. Navigating with Router Links)

And if you had slash users slash something,

3:38

S… Speaker 1 (131. Navigating with Router Links)

you would have a second element here,

3:40

S… Speaker 1 (131. Navigating with Router Links)

which is then just something without a slash.

3:43

S… Speaker 1 (131. Navigating with Router Links)

The leading slash here is only needed to make this an absolute path,

3:46

S… Speaker 1 (131. Navigating with Router Links)

and I will come back to this in the next lecture.

3:49

S… Speaker 1 (131. Navigating with Router Links)

For now,

3:49

S… Speaker 1 (131. Navigating with Router Links)

I will get rid of this.

3:51

S… Speaker 1 (131. Navigating with Router Links)

Now, this array notation is not super convenient,

3:53

S… Speaker 1 (131. Navigating with Router Links)

but soon you will see when it really gives you an advantage or when you need this notation.

3:58

S… Speaker 1 (131. Navigating with Router Links)

It allows you to construct more complex paths very easily.

4:02

S… Speaker 1 (131. Navigating with Router Links)

So with this,

4:03

S… Speaker 1 (131. Navigating with Router Links)

we set up our three links using router link,

4:05

S… Speaker 1 (131. Navigating with Router Links)

either by passing a string or this array,

4:08

S… Speaker 1 (131. Navigating with Router Links)

which allows us to define our individual path elements.

4:11

S… Speaker 1 (131. Navigating with Router Links)

With that,

4:12

S… Speaker 1 (131. Navigating with Router Links)

if we save this and have a look at our application,

4:16

S… Speaker 1 (131. Navigating with Router Links)

Now you see it still reloads or it still gives us the

4:20

S… Speaker 1 (131. Navigating with Router Links)

components, but it doesn't reload the page.

4:22

S… Speaker 1 (131. Navigating with Router Links)

If you watch this reload icon,

4:24

S… Speaker 1 (131. Navigating with Router Links)

nothing is happening there.

4:26

S… Speaker 1 (131. Navigating with Router Links)

Because the router link catches the click on the element,

4:30

S… Speaker 1 (131. Navigating with Router Links)

prevents the default,

4:31

S… Speaker 1 (131. Navigating with Router Links)

which would be to send a request,

4:33

S… Speaker 1 (131. Navigating with Router Links)

and instead analyzes what we passed here to the router

4:37

S… Speaker 1 (131. Navigating with Router Links)

link directive,

4:37

S… Speaker 1 (131. Navigating with Router Links)

so this path or this array of path elements,

4:40

S… Speaker 1 (131. Navigating with Router Links)

and then parses it and checks if it finds a fitting

4:45

S… Speaker 1 (131. Navigating with Router Links)

route in our configuration,

4:46

S… Speaker 1 (131. Navigating with Router Links)

which it of course does because we defined all the paths we're using here.

4:51

S… Speaker 1 (131. Navigating with Router Links)

And this is how we can navigate around with the router link,

4:55

S… Speaker 1 (131. Navigating with Router Links)

and this actually is how we should navigate around,

4:57

S… Speaker 1 (131. Navigating with Router Links)

because it gives us the better user experience,

5:00

S… Speaker 1 (131. Navigating with Router Links)

it doesn't restart our app,

5:02

S… Speaker 1 (131. Navigating with Router Links)

therefore it keeps the app state,

5:04

S… Speaker 1 (131. Navigating with Router Links)

and it's much faster than reloading the page all the time.

5:07

S… Speaker 1 (131. Navigating with Router Links)

You can,

5:08

S… Speaker 1 (131. Navigating with Router Links)

of course, still type something here manually,

5:11

S… Speaker 1 (131. Navigating with Router Links)

so that will still work,

5:12

S… Speaker 1 (131. Navigating with Router Links)

but if you're inside of the app,

5:13

S… Speaker 1 (131. Navigating with Router Links)

using router link is much better.

131. Navigating with Router Links

Summa

De hoc translatio scripsit.