In this lecture, we are going to explore the default configuration of the router during the creation
process of our new project.
We selected the routing option, the SEELYE installed the router package.
In addition, this package has been configured in our project.
We've been ignoring the configuration throughout the development lifecycle of our app.
It's time to look at the files generated by this package to get started.
We are going to look at the indexed HTML file inside these source directory.
Inside the head section of the document, there's a new tag called Base, the base tag has one attribute
called R&F.
The value of this attribute will be the base path of our app during navigation.
The base path will be prefixed to every path by default.
The base path is set to the route of the domain.
Let's modify the base path to learn how it affects the URLs in our app.
We will set the attributes value to test.
Switch over to the browser.
In the address bar, the URL has been updated to include the base path, regardless of where we navigate
angular will always prefix the base path.
If we were to attempt to remove the base path, angular would add it back in.
Configuring the base path can be useful if you want to isolate the app to a specific path for this course.
We don't need to configure the base path back in the ED. We are going to revert the base path to the
original value.
We can leave the base path, as is, let's explore the routing module inside the app directory.
Open the app routing module.
This module shouldn't be confused with the app module routing must be configured from within a module
as you'll soon learn routing can get messy.
It's common practice to create a separate module for configuring the router.
Not necessary, but recommended to keep our code base clean.
Another practice is to add D-word routing to the file name.
This naming convention helps other developers identify modules with configuration settings for routing.
Once again, not necessary, but recommended for this course.
We will be following these practices.
They are standard in most angular apps inside this file.
There's not much going on.
We are declaring a module with the nji module decorator at the top of the file.
We are importing the router module from the angular slash router package.
This module will import services, components and directives for adding routing capabilities to an app.
We must import this module if we want to start using its features below the import statement.
We are creating an array called roots.
This array will contain a list of objects with configuration settings for each root, a root prefers
a path in our application.
In subsequent lectures, we will explore these settings for a root.
The roots array is being annotated with the roots type.
This type is exported by the angular router package.
It's a convenient type for adding type checking to our array.
Lastly, the router module is imported into the app router module.
The router will not become aware of our roots unless we pass them in as an argument to the four root
function.
It's the most important step in this entire process by passing them into the four root function.
We are registering our roots.
The router module is being exported by our module.
Keep in mind, this module is meant to act as a configuration file for our router.
We can export the configuration file by exporting the router module.
Let's open the app module file.
Inside this file, we are importing the app router module.
Next, the module is added to the imports array.
This is the minimum configuration for adding the router to our project.
We can begin to add roots to our project before we jump in to the next lecture.
There's one important point I want to make about the router.
The router will handle paths for pages in our app.
It does not handle adding routes for static asset files.
Let's go back to the browser.
Every file in our app is imported through JavaScript.
There's one exception.
The video on the home page, this file is loaded on the page through the video tag in the elements panel
of the developer tools.
Let's look for this element.
Inside this element, we are adding the source to the file.
We can right click on the file to open the file in another tab.
We didn't add a route for this file.
The route was generated by the development server for static asset files.
We will let the server handle delivering these files.
During our discussion of routing, we are going to focus on adding routes for pages, not static asset
files.
I'm mentioning this to make a distinction between static asset files and web pages.
Most servers are capable of defining routes for static asset files.
We can focus on the pages for our app in the next lecture.
We are going to begin adding some routes.
When you're ready, I'll see you there.