Introduction to routing

Chapter objectives

• ✔️
  Understanding routing with Angular

  Learn how routing works in Angular.

• ✔️
  Define routes

  Define routes in your application.

What is routing?

Routing is the process of determining what content to display based on the browser’s URL. Angular is a Single Page Application (SPA) framework. By using the Router API, the application can display different content without completely reloading the page.

The project currently only displays the TaskListComponent. The Router will enable switching between this component and the new TaskFormComponent.

The Router API is provided by the @angular/forms package. It’s installed in any new Angular project by default and you cand find it in the pckage.json file.

Router-outlet directive

The Router API provides a directive called router-outlet. outed content will be displayed. When the user navigates to a different route, the content of the router-outlet is replaced with the content of the new route. The router-outlet directive’s only role is to mark the location in the HTML Template where the content corresponding to the URL you defined will be displayed.

🎓 Instructions

1. Modify the src/app/app.component.html file.

   <header>
     <h1>Angular Legacy course</h1>
   </header>
   
   <main class="container pt-4">
   
     <router-outlet />
   </main>

In the above case, the router-outlet is placed between the <main> tags. This means that you will continue to display the <header> on top of all pages and the configured content will change based on the URL you navigate to.

Define routes

To display the desired content based on the URL, you need to add a path to each of your components in your routes array:

{ path: 'add-task', component: TaskFormComponent }

The path is therefore the URL that the user will access. For example, the path /add-task means that the user will navigate to the URL http://localhost:4200/add-task.

The provided component is the component that will be displayed in the router-outlet placeholder when the user accesses this URL.

The route definition resides in the app-routing.module.ts file.

🎓 Instructions

1. Modify the src/app/app-routing.module.ts file.

   app-routing.module.ts

   import { NgModule } from "@angular/core";
   import { Routes, RouterModule } from "@angular/router";
   
   import { TaskListComponent } from "./task-list/task-list.component";
   import { TaskFormComponent } from "./task-form/task-form.component";
   
   const routes: Routes = [
     { path: "", component: TaskListComponent },
     { path: "add-task", component: TaskFormComponent },
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule],
   })
   export class AppRoutingModule {}

Add links to navigate between routes

You need to add links to trigger navigation between different routes. You could manually modify the URL in the browser, but users expect to have clickable links to navigate between pages.

The HTML <a> tag is used to create links and is associated with the routerLink directive to use Angular routing. This directive takes the path of the route to navigate to as a value.

🎓 Instructions

1. Modify the src/app/app.component.html file.

   app.component.html

   <header>
     <h1 class="navbar-brand fw-bold">Angular Legacy course</h1>
   
     <a class="btn btn-light" routerLink="/">Task List</a>
     <a class="btn btn-light" routerLink="/add-task">Add new task</a>
   </header>
   
   <main class="container pt-4">
     <router-outlet />
   </main>

2. Click on both links to see the content of TaskListComponent and TaskFormComponent displayed alternately at the location defined by the router-outlet.

Tip

The path of the TaskFormComponent is defined as add-task in the app-routing.module.ts file. However, in the HTML Template, in the routerLink directive, it is specified as /add-task (with the /).

routerLink builds the URL relative to the current path. Adding a slash indicates that the URL should be built from the base URL of the application (here http://localhost:4200). Without specifying the slash in the routerLink directive, you would create nesting and navigate to /add-task/add-task.

<a routerLink="/add-task">...</a> => http://localhost:4200/add-task <a routerLink="add-task">...</a> => http://localhost:4200/add-task/add-task :::

✔️ What you have learned

In this chapter, you learned how to add routing to your application. You learned how to define routes and navigate between them using the routerLink directive. You also learned how to display the content of the current route using the router-outlet directive.