Back to results for “Routing”
Angular › Routing

What is client side routing in Angular, and how do you define basic routes?

Beginner

Answer

Client side routing lets a user navigate between different pages, called views, of a single page app without the browser actually reloading the page from the server every single time. You define routes as an array of path and component pairs, telling Angular which component to display for each specific web address.
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});
Real-world example A company website switches between its home page and about page instantly, without any visible page reload, thanks to Angular's router handling navigation entirely on the client side.

Common follow-ups: What happens to the browser's back and forward buttons with client side routing?;How is client side routing different from a traditional multi page website?