Skip to main content

Routing

  • Route Guards
  • <router-outlet> Directive

Angular 20: Angular has a robust, built-in routing module (@angular/router) with a declarative syntax.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

Router Service​

Angular's router service allows us to manage the addressable state and the view state. In a nutshell, the router state determines which components are visible on the screen and it handles navigation between application states. Any state transition results in a URL change. It is very important to emphasise, because of the router is a resource-oriented engine, we cannot place more than one component into the same location at the same time (~Auxiliary Routes!). This means, when building a router based SPA, we should approach an UX-driven Web API interface to determine the right data model and resource types. The project should aim to introduce user-centered design, where user actions define the component and resource (URL) workflow.

It must be ensured that the routes are covered by the Web API Layer. No routes should be defined that can not be used through a SPA approach. For example, do not use routes like /products/:id/edit?filter='mam', if the Web API Layer does not handle query-params for a filter.

Routes and Paths​

Path Matching Strategies

{ path:  'contacts', component:  ContactListComponent}

Could be also written as:

{ path:  'contacts',pathMatch: 'prefix', component:  ContactListComponent}

The second  matching strategy is full. When it’s specified for a route, the router will check if the the path is exactly equal to the path of the current browser’s URL:

{ path:  'contacts',pathMatch: 'full', component:  ContactListComponent}

Params​

const routes: Routes = [
{path: 'listings', component: ListingsPageComponent},
{ path:'listings/:id', component: ListingDetailsPageComponent },
{ path: 'contact/:id', component: ContactPageComponent },
{ path: }
]

MULTIPLE Router OUTLETS AND AUXILIARY ROUTES​

Angular Router supports multiple outlets in the same application.

To create an auxiliary route, you’ll need a named router outlet where the component associated with the auxiliary route will be displayed.

<router-outlet></router-outlet>  
<router-outlet  name="outlet1"></router-outlet>
  • The outlet with no name is the primary outlet.
  • All outlets should have a name except for the primary outlet.