In this lecture, we are going to add navigation links to our app.
It's the next step after registering some routes.
At the moment, we aren't able to switch between pages unless we manually type the URL in the address
bar.
It's not common to navigate an app by typing the URL.
Most apps provide links to switch to different pages.
We should add links for a better user experience.
One solution for adding links to an app is through the anchor elements.
Each attribute?
Let's open the navigation template file.
Inside this template, we are going to update the links for the home and about pages.
Now that we have the rules for these pages, we should add links for them, for the home page.
We can find the link under a comment that says app name on the anchor element.
We will update the h ref attribute to a forward slash character.
As for the about page, we can find the link for this page towards the bottom of the template.
We will update the ref attribute to Slash about.
Let's give our links a test in the browser.
In our app, we can click on the links to switch between the home and about pages.
Our solution works, but it's not ideal.
The page is refreshing, which is a big problem.
If you look closely at the refresh icon, it changes on every page load.
This behavior indicates the browser is refreshing the page.
The user is forced to download the assets we need to switch between pages without refreshing the page.
The routing module has us covered.
It will export a directive for handling navigation between pages.
Let's check it out.
Head back to the editor on the anger element for the About page.
We will swap the ref attribute with a directive called Router Link.
The router linked DirecTV will redirect the user to a different route in our app without refreshing
the page.
The value for this DirecTV must be a path registered with our app.
This directive is capable of generating a link that points to the correct route.
We don't need to update the value.
It's good, as is.
Let's update the link for the home page with this directive on the anchor element.
Replace the RF attribute with the router link directv.
Next, let's refresh the page in the browser.
We can click on the links to navigate around the app as we do, so keep an eye on the refresh icon next
to the address bar.
It never changes.
Regardless, Angular can render the correct component that corresponds to the URL under the hood.
Angular is using the history API we can go back and forth between pages.
Angular is smart enough to update the page.
We don't need to add a directive or component to get this behavior.
It works out of the box.