All language subtitles for 5. Navigating with RouterLink

Now that we understand the purpose of this router outlet thing right here we can start to add in a navigation

bar.

And the reason that I am talking about adding in a navigation bar right now is well pretty much we always

want to show this navigation bar at the top.

Then underneath it depending upon the current route you want to show some different components and angular

is going to take care of all that stuff automatically.

You and I can add in a navigation bar that will be visible at all times.

We just write in a little bit of markup directly above that router outlet but can remove the two divs

we currently have inside of here and then we'll replace this one on top with how about an anchor tag

that has an 8 ref do slash elements

inside there I'll give it the text elements then I'll duplicate that on the second one I'll add in a

trough of collections and I'll give it the text collections.

Now we save that look back over.

We've got the elements link right here.

When I click it I go to the elements root and I got collections right here.

Now I've got some persistent content at the very top of the screen and the actual component that is

visible is going to be changing automatically depending upon the current route back and forth back and

forth.

Now there's just one little issue right now with those two anchor tags we just added in.

I want you to open up your chrome console and navigate to the Network tab on their once you get to the

Network tab.

Make sure that you are filtering by all take a look at what happens whenever I click on one of these

two links right here and click on say elements and as soon as I do I'll notice that all of these different

requests for the JavaScript files on my application have been repeated over to collections and I see

that they all get issued once again right now whenever a user navigates using these plane anchor tags

they're essentially doing a total refresh of our application that is not what we want inside of an angular

app.

Instead whenever a user navigates around we want to a transparently change the URL but not do an entire

refresh of the page.

Let me show you how we can do that and you'll see the impact right away back inside of my template file

I'm going to find those two H rough attributes we added.

I'm going to change both them to instead say router link and router link like so I'll then save this

to flip back over.

Now take a look at what happens when I click on these two links.

I'm going to click on say elements and the content on the screen changes instantly but I'm not making

any additional requests to my development server.

So what's going on here whenever we want to navigate a user around our application.

We're going to use this router link attributes the router link attribute talks directly to the router

inside of our application router is what decides what content to show in the screen depending upon or

based upon the current you are L and we add on this router link attribute that tells angular that whenever

user clicks on this anchor tag we want to navigate over to slash elements or slash collections.

We want to do so without completely refreshing the page but angular will automatically update the URL

but not issue an entire new browser request that you are url instead angular is just going to update

the URL and then automatically on the same page without any refresh whatsoever decide upon what content

to show instead.

So we prefer to use this router link attribute wherever possible that a user doesn't have to reload

the entire application.

Instead they just reach change or just change the content that's on the screen without re downloading

all these different JavaScript files the big takeaway here.

As soon as we start using angular and we want to navigate a user around we're going to use this router

link attribute instead of the classic trap that you might be used to.

All right.

Now that we've seen the router link and we've got some semblance of a little header right here a little

bit of navigation stuff.

Let's take a quick pause right here.

When come back the next video we're gonna add in a little bit better styling to this thing that it actually

looks like a proper navigation bar like what you see right there.