Routing Introduction

Branch

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, handling URL changes within the application with JavaScript, not reloading the whole page on each new navigation, thanks to its router API.

The project currently only displays the TaskList componentin your browser. 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 package.json file.

We need three parts to implement routing:

• a list of routes to define the content displayed for a given URL
• a marker to decide where to display the content
• a link to trigger the navigation

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.

A directive is a component without a template. Such as a component, it can be used in the HTML Template with its selector (<router-outlet>), but it doesn’t have a template. It’s meant to encapsulate a logic that can be used in the HTML Template.

1. Update the src/app/app.ts file.

   <div class="navbar bg-base-100 shadow-sm">
     <a class="btn btn-ghost text-xl">Task Manager</a>
   </div>
   <main class="m-12">
     <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. Only the content inside the main tag will be replaced by the content of the route.

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, for example:

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

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.routes.ts file.

src
└─ app
    └─ app.routes.ts

Instructions

1. Update the src/app/app.routes.ts file.

   import { Routes } from "@angular/router";
   
   import { TaskList } from "./task-list/task-list";
   import { TaskForm } from "./task-form/task-form";
   
   export const routes: Routes = [
     { path: "", component: TaskList },
     { path: "add-task", component: TaskForm },
   ];

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.

1. Update the src/app/app.ts file.

   import { Component } from "@angular/core";
   
   import { RouterLink, RouterOutlet } from "@angular/router";
   
   @Component({
     selector: "app-root",
   
     imports: [RouterOutlet, RouterLink],
     template: `
       <div class="navbar bg-base-100 shadow-sm">
         <a class="btn btn-ghost text-xl">Task Manager</a>
   
         <ul class="menu menu-horizontal px-1">
           <li><a routerLink="/">Task List</a></li>
           <li><a routerLink="/add-task">Add new task</a></li>
         </ul>
       </div>
       <main class="m-12  max-w-screen-md mx-auto">
         <router-outlet />
       </main>
     `,
     styles: [],
   })
   export class App {
     protected title = "angular-introduction-course";
   }

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