DEV Community

Cover image for Angular Routing in 5 Minutes: A Minimal, Clear Example
Paccony
Paccony

Posted on

Angular Routing in 5 Minutes: A Minimal, Clear Example

#webdev #programming #beginners #tutorial

👋 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
Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
>
Enter fullscreen mode Exit fullscreen mode

ℹ️ 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>
Enter fullscreen mode Exit fullscreen mode

📞 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>
Enter fullscreen mode Exit fullscreen mode

🎨Step 5. Styling (in styles.css)

a.active {
  text-decoration: underline;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

In the end, you should see.

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

Top comments (0)