In this lecture, we are going to learn how to generate a routing module for our video feature.
We will be creating a couple of files related to the creation and management of videos.
These files should be grouped under a module.
It'll be easier to manage our project by dedicating a module for features related to the videos in our
app.
Some of the components will act as pages.
Along with generating a module, we should generate a routing module.
It's perfectly acceptable to have multiple routing modules within an app.
You may prefer multiple routing modules for easier management.
Let's get started.
As you might expect, Angular Seelye has an option for generating modules with an additional routing
module and the command line right the following command Nji G module video routing.
We're adding the routing flag to the generate module command.
This flag will generate an additional module for routing.
It'll automatically get imported into the video module.
Let's run the command after a few moments.
Two files should have been generated.
Open both files in your editor.
The first mile is a regular module file.
There's nothing special to mention about this file.
It's a regular module we've encountered numerous times.
This module imports the video router module.
Let's check it out inside this file.
We have the same setup as the last routing module.
We have an array called roots.
We can define routes inside this array.
The biggest difference from before is how the module is imported.
If you look closely at the imports option, the routing module is imported with the for child function.
It's completely different from the four root function.
We have two functions for registering roots with our app.
They're the four root and four child functions.
The four root function will register a service called router.
We will get an opportunity to use this service in a future lecture.
It's a service for interacting with the router in our app.
The four child function does not register this service.
There isn't a point in registering the service if it's already been registered.
Angular introduces another function for registering roots without having to create a new instance of
the router object.
In most cases, you should only call the four root function once for other routes.
You can use the for child function.
Let's register the video module inside the app module.
At the top of the file import, the video module.
Next, and this module to the imports array.
We don't need to import the video routing module, it's already imported from the video module.
Therefore, we will have access to the roots generated by this module.
Let's register a new route for the Manage page.
At the moment, the Manage link in the navigation menu will redirect the user to the home page.
We haven't properly created a manage page.
Let's fix that in the command line.
We will generate a component for rendering the page content.
Run the following command Kng G component video slash manage.
Next, let's update the template, we can find the template for the component under the managed HTML
file in the templates directory.
There are three sections we are going to copy over.
You can find them by searching for comments that say, top bar users video section and edit model.
Copy the selections into your clipboard.
Next, open the manage component template file.
Lastly, replace the template with the contents from your clipboard.
The next step is to register a route for the component, switch back to the video routing module at
the top of the file.
We will import the manage component.
Afterward, we will add an object to the roots array, the path for this component will be manage.
The component property will be set to the manage component.
We're almost finished the final step is to update the link in the navigation component to properly link
to this page, open the navigation template file.
Search for the manage link we had in the template.
We are going to update the Router Link directive to redirect the user to the managed page.
Finally, we're finished.
It was a lot to go through, but it should demonstrate the video routing module can register new routes
for our app.
Let's test the app in the browser.
The Manage Link should appear in the navigation and you if you're logged in, we can click on this link
to be taken to the Manage page.
Perfect.
We've successfully created a separate routing module for a different feature in our app and either gives
us separation of concerns by allowing us to structure our routes in different modules in the following
lecture.
We will start securing our routes.