Angular è un framework per creare Single Page Application (SPA). Il concetto principale di una SPA è quello di navigazione tra pagine dove la navigazine avviene interamente lato client senza coinvolgere il server. Per fare questo Angular mette a disposizione un sistema di routing molto potente.

Per configurare il sistema di routing, il primo passo consiste nell'importarte il modulo RoutingModule e la classe Routes nella nostra applicazione come mostrato nell'esempio.

import { Routes, RouterModule } from '@angular/router';

A questo punto dobbiamo dichiarare una costante, di tipo Routes, che contiene la lista delle nostre rotte. Una rotta è un oggetto che specifica un url e il component da caricare quando si naviga verso l'url.

const routes: Routes = [
  { path: 'company/search', component: CompanySearchComponent },
  { path: 'company/detail', component: CompanyDetailComponent },
];

Il terzo passo consiste nell'importare nel modulo principale della nostra applicazione il RoutingModule e configurarne le rotte tramite il metodo forRoot.

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  ...
})
export class AppModule { }

Infine, nel component principale della nostra applicazione dobbiamo inserire il component router-outlet all'interno del quale verrà inserito il codice HTML generato dal component verso cui si è navigato.