Submodule 21.1: Routing - Practice

Adding routes

Next, create a new file named routes.ts in the app-routing folder 

and update it as follows:

import { Routes } from '@angular/router';
import { MenuComponent } from '../menu/menu.component';
import { DishdetailComponent } from '../dishdetail/dishdetail.component';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'menu', component: MenuComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

Notice

• the import of the { Routes } from '@angular/router';. The Routes type is optional and lets an IDE with TypeScript support or the TypeScript compiler conveniently validate your route configuration during development.
• the import of our components
• The definition of the constant routes, of type Routes. The router configuration represents all possible router states of our application.

It is a tree of routes, defined as a JavaScript array, where each route can have the following properties:

• path: string, path to match the URL
• patchMatch: string, how to match the URL. Angular Router has two matching strategies:
  • prefix: default, matches when the URL starts with the value of path
  • full: matches when the URL equals the value of path.

• component: class reference, component to activate when this route is activated
• redirectTo: string, URL to redirect to when this route is activated
• data: static data to assign to route
• resolve: dynamic data to resolve and merge with data when resolved
• children: child routes.