Previous
Next

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.
Previous
Next