Angular Routing in 5 Minutes: A Minimal, Clear Example

Paccony — Sat, 06 Sep 2025 17:45:07 +0000

👋 Hi! I'm Pravoslav Nikolić, learning Angular from scratch. This is my first public tutorial — I hope it helps someone out there.

When I started learning Angular, routing felt confusing. How do components change without reloading the page? How do I organise multiple views?

So I built a minimal, clean demo — no extra libraries, no complex logic.
This is perfect if you're just starting and want to see how routing works in practice.

No APIs, no forms, no state management — just pure routing.

🛠️ Step 1: Generate Components

In the terminal, type in and make the next components:

ng generate component home
ng generate component about
ng generate component contact

Result:

Each has minimal content — just enough to see the change when navigating.

📂 Step 2: Configure Routes
In app-routing.module.ts:

ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

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

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

This tells Angular:

When URL is /, show HomeComponent
When URL is /about, show AboutComponent
And so on.
Result:

🖇️ Step 3: Add Navigation
In app.component.html:

html

<nav style="background: #1a3c6e; padding: 1rem; text-align: center;">
  <a 
    routerLink="/" 
    routerLinkActive="active" 
    style="margin: 0 15px; color: white; text-decoration: none; font-weight: 500;">
    Home
  </a>
  <a 
    routerLink="/about" 
    routerLinkActive="active" 
    style="margin: 0 15px; color: white; text-decoration: none; font-weight: 500;">
    About
  </a>
  <a 
    routerLink="/contact" 
    routerLinkActive="active" 
    style="margin: 0 15px; color: white; text-decoration: none; font-weight: 500;">
    Contact
  </a>
</nav>

<router-outlet></router-outlet>

routerLink handles navigation
router-outlet is where the active component is rendered

Result:

4. Step content of pages (minimal but clear)

🏠 home.component.html

 <div style="text-align: center; padding: 4rem 1rem; background: #f0f8ff;">
   <h1>Home</h1>
   <p>This is the home page.</p>
   <p>Angular routing demo — show content change without refreshing.</p>
 </div
>

ℹ️ about.component.html

<div style="text-align: center; padding: 4rem 1rem; background: #e8f5e8;">
  <h1>About</h1>
  <p>Ova stranica demonstrira Angular routing.</p>
  <p>Klik na link → promjena sadržaja.</p>
</div>

📞 contact.component.html

<div style="text-align: center; padding: 4rem 1rem; background: #fff3e0;">
  <h1>Contact</h1>
  <p>Kontakt stranica — treća ruta u aplikaciji.</p>
  <p>Routing je osnova svakog SPA-a.</p>
</div>

🎨Step 5. Styling (in styles.css)

a.active {
  text-decoration: underline;
  font-weight: bold;
}

In the end, you should see.

🔗 GitHub: github.com/Paccony/angular-routing

Angular Routing in 5 Minutes: A Minimal, Clear Example

Paccony — Sat, 06 Sep 2025 17:45:07 +0000

No APIs, no forms, no state. Just routing. A clean, step-by-step demo for anyone starting with Angular.

1.In the terminal, type in and make the next components:


**ng generate component home
ng generate component about
ng generate component contact**

Result:
![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv91uv6tzty2ithxe9p1.png)


**2.** Configure app-routing.module.ts
typescript

Result:
![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7zt550gg3e37d7s95ma.png)


`

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

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

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


**3.** Add navigation to app.component.html
html

Home

About

Contact


**4.** Content of pages (minimal but clear)
🏠 home.component.html
html

Home

This is the home page.

Angular routing demo — show content change without refreshing.

</div

ℹ️ about.component.html
html

About

Ova stranica demonstrira Angular routing.

Klik na link → promjena sadržaja.

📞 contact.component.html
html

Contact

Kontakt stranica — treća ruta u aplikaciji.

Routing je osnova svakog SPA-a.




In the end, you should see.


![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upyew1fg7y1iwgtvwlx4.png)

DEV Community: Paccony

Angular Routing in 5 Minutes: A Minimal, Clear Example

Angular Routing in 5 Minutes: A Minimal, Clear Example

Home

About

Contact