In this lecture, we are going to begin registering roots in our app.
The content for the page is registered by a component for every route in our app.
We need to associate it with a component.
As you can imagine, we will be creating a lot of components.
Let's start by registering a route for the home page.
First, we will create a component in the command line.
Run the following command Njie G.
Component Home.
Creating a component for a page is not much different than creating a regular component.
Next, we need to update the template for the home component.
At the moment, we are rendering the content of the home component from the app component.
Let's open the app template file.
There are a total of four sections in this template.
We have the navigation intro main and modal sections.
The navigation and modal sections should remain inside this template.
We want these components to be available on any page.
Otherwise, the user will have to navigate to the home page to log in.
You should always consider which sections of your app should be global.
We don't want to transfer the entire template over to a page component.
Components for pages should focus on the main content of a page.
They shouldn't have to worry about the other page sections, such as a navigation menu.
Let's cut the intro and main sections.
Next, open the home template file.
We will replace the existing template with the code we copied earlier.
Our templates are ready.
We can move on to registering a route Angular does not know which component to render for a specific
route.
We must inform angler of the routes in our app.
The configuration for our router can be found in the app routing module.
We've outsourced the rules into a variable called roots inside this array.
We can add an object for each route before we start adding routes.
We should study the type.
The roots type will enforce a specific structure for each object in the array.
Looking closely at the roots types, our editor will provide more information about the type of value
we can add to this array.
It's expecting an array of objects with the type of roots.
Unfortunately, the info stops there.
If we want to learn more, we should search for the root interface in the documentation.
In the resource section of this lecture, I provide a link to this interface.
Let's read the description together, a configuration object that defines a single route, a set of
routes are collected any routes array to define a route or configuration.
The router attempts to match segments of a given URL against each route using the configuration options
defined in this object.
Below this description, we will come across a list of properties we can add to a route object.
In addition, we are given a description of each property.
There's one important piece of information I want to highlight.
It's not documented, but there is a question mark symbol next to each property name.
This symbol indicates the property is optional.
If you were to quickly scan through all the properties, they would be marked as optional.
This information can be helpful when learning about the various types and interfaces from Anguilla.
We should always check which properties are optional or required.
Let's start adding a route for the home page.
Go back to the editor.
In the roots array, we will add an object the first property will define in this object will be called
path.
The value for the path property must be a path to match against the Earl Angular will extract B path
from the Earl.
After doing so, it will perform a series of matches against our registered roots.
We can configure the path to match against by adding this property.
This route will be associated with the home page.
We're going to set this property to an empty string.
Normally, we would set this property to a forward slash character.
As we've learned in the previous lecture, Angular will prefix our paths with the base path.
Therefore, it's redundant to add the forward slash character at the beginning of our paths.
After adding the path, the next property we will add is called component.
If the path in the browser's you URL matches the path in this object, angular will load a component.
We can specify the component by adding the component property.
The value for this property must be the component object.
Let's import the home components at the top of the file.
Next, we will set this property to the home component.
We're almost finished.
There's one final step for loading the component Angular doesn't know where to load the component.
It does not magically inject the component in the correct location.
We must add a placeholder to configure the location for our route components.
Switch back to the app template file in between the navigation and authentication components.
We will add an element called router outlet.
This element is a directive defined by Angular.
It acts as a placeholder for our components.
Once the router has been initialized, this directive will load the component corresponding to the path.
We don't need to add a series of structural directives to accomplish this task.
The Root or outlet directive is a convenient directive for taking this action off our hands.
Let's refresh the page in the browser.
The implication is rendering without a problem.
We can verify if the router is working by checking the developer tools under the elements panel.
We will find the router outlet directive.
This directive does not get removed from the page.
Instead, it'll remain in the document below this directive.
We will find our home component.
We never added this component to the app template, nor did we export it regardless.
The router was able to render this component based on the path in the URL.
This is the basics of creating a route in the next lecture.
Let's tackle an exercise before learning more about routing.