Let’s improve our project by creating a home page with a simplified menu for our interface, thereby exploring the possibilities we can have with Angular routes. In the command line, we’ll use the Angular CLI to create a new module and the component page:
ng g m home –routing
In the preceding snippet, we first create a new module, and by using the –routing parameter, we instruct the Angular CLI to create the module along with the routing file. The following command creates the component we are working on:
ng g c home
For more details about the Angular CLI and modules, you can refer to Chapter 2, Organizing Your Application.
First, let’s create the template in the HTML file of the component we just created:
<div class=”flex h-screen”>
<aside class=”w-1/6 bg-blue-500 text-white”>
<nav class=”mt-8″>
<ul class=”flex flex-col items-center space-y-4″>
<li>
<a class=”flex items-center space-x-2 text-white”>
<span>Diary</span>
</a>
</li>
<li>
<a class=”flex items-center space-x-2 text-white”>
<span>New Entry</span>
</a>
</li>
</ul>
</nav>
</aside>
<main class=”flex-1 bg-gray-200 p-4″>
<router-outlet></router-outlet>
</main>
</div>
In this template example, we are using the <aside> and <main> HTML elements to create the menu and the area where the selected pages will be projected. For this purpose, we are using the <router-outlet> directive to indicate the correct area to Angular.
To make the home page the main page, we need to modify the main routing module of our application in the app-routing.module.ts file:
.
.
.
const routes: Routes = [
{ path: ”, pathMatch: ‘full’, redirectTo: ‘home’ },
{
path: ‘home’,
loadChildren: () =>
import(‘./home/home.module’).then((file) => file.HomeModule),
},
];
.
.
.
export class AppRoutingModule {}
The routes array is the main element of the Angular routing mechanism. We define objects in it that correspond to the routes our users will have access to. In this example, we defined that the root route (“/”) of our application will redirect the user to the home route using the redirectTo property.
Here, we should use the pathMatch property with the “full” value. This is because it determines whether the Angular route engine will match the first route that matches the pattern (the default behavior, which is “prefix”), or whether it will match the entire route.
In the second object, we are defining the home route and loading the Home module lazily. For more details about lazy loading, you can refer to Chapter 2, Organizing Your Application.
When running our application, we have the menu and the area where the pages of our workout diary will be displayed.
To include the workout diary on the home page, we need to modify the HomeRoutingModule module:
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { HomeComponent } from ‘./home.component’;
const routes: Routes = [
{
path: ”,
component: HomeComponent,
children: [
{
path: ‘diary’,
loadChildren: () =>
import(‘../diary/diary.module’).then((file) => file.DiaryModule),
},
{
path: ”,
redirectTo: ‘diary’,
pathMatch: ‘full’,
},
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {}
In this routes file, similar to the previous one, we define that the main route will direct to the HomeComponent component. However, here, we want the routes and modules to be rendered in the router outlet of the component instead of AppModule.
Here, the children property comes into play in which we will define the nested routes for this module. Since we want to use DiaryComponent, we are performing lazy loading of its module. This follows the Angular best practice of separating functional modules in the application.
Now, when running our application again, we have the diary page back.
Figure 7.1 – Gym Diary home page with Diary
To conclude this session, let’s add the links for the new exercise entry in the Home template. Make the following modification:
<li>
<a routerLink=”./diary” class=”flex items-center space-x-2 text-white”>
<span>Diary</span>
</a>
</li>
<li>
<a routerLink=”./diary/new-reactive” class=”flex items-center space-x-2 text-white”>
<span>New Entry</span>
</a>
</li>
We are using the Angular routerLink directive to create the link in the template, specifying the URL it should navigate to.
An important detail to note is that we are using the relative path of the project to create the link using ./. Since the entry form route is located in the diary module, Angular interprets that the module has already been loaded and allows the link without requiring an additional declaration in the HomeRoutingModule component.
In the next section, let’s explore how to handle a scenario in which the user enters a date that does not exist.