In this lecture, we are going to do an exercise for registering a route.
It's going to be quick and easy for this exercise.
We are going to register a route for the about page in my browser.
I have an example of what the page should look like.
Since this is an exercise, I want you to try it on your own.
The process will be straightforward.
The first step is to create a component for housing the content for the page.
After creating a component, the template should be updated with the content from the Aboutwhat HTML
file.
We stored a copy of our static templates in a directory called templates.
You can retrieve the template from this file.
Lastly, you should register the component if you're unfamiliar with any of these steps.
I recommend rewatching the previous lecture pass the video and good luck.
Welcome back.
If you were able to successfully create a route for the about page, then congrats.
If not, that's fine as well.
Let's tackle this exercise together.
The first step was to generate a component in the command line.
We will run the following command energy g component about.
After creating the component, we will update the template.
First, let's grab the template from the static HTML file.
We uploaded the static template files to the template directory.
Open the About.com HTML file.
In this file, we have the main content section.
We're going to copy everything from this part of the template.
Afterward, we will open the about template file.
Replace the current template with these static template.
The last step is to register a route to load the component.
Open the app routing module.
At the top of the file, let's import the about component.
Lastly, we will add an object to the roots array to register a new roots in this object.
It'll have two properties.
The first property will be Path, which is the path to match in the URL.
We will set this property to about.
We can exclude the Fords character at the beginning of the path, the base path will be prefixed to
the path.
For example, if our app were hosted on example rt.com, the full path would be example dot com slash
about.
There's another property we will add to this object.
We all set the component property to the about component.
We're finished if you tackled this exercise on your own.
Your solution should look similar to mine.
Let's test the route in the browser.
If we were to access the route path, we would be presented with the correct component, the angular
router was able to decide which component to render on the page.
Let's update the URL to navigate to the About page.
This time, the about component gets rendered as the main content.
We've successfully registered a new route in the next lecture, we're going to learn how to add navigation
to our app.