How to Configure Routes in Angular
💡 Concept Name
Routing in Angular – It allows navigation between different components and views in a single-page application using route configuration and the RouterModule.
📘 Quick Intro
Angular routing lets you define paths in your app and link them to components. The RouterModule reads the browser’s URL and displays the matching component via <router-outlet>.
🧠 Analogy / Short Story
Think of Angular routing like a hotel directory. The URLs are room numbers, and each one opens a door to a different room (component). The RouterModule is the front desk helping guests get to the right place.
🔧 Technical Explanation
- 📜 Define routes as an array of objects with
pathandcomponentkeys. - 🔧 Import
RouterModule.forRoot(routes)inAppModuleorforChildin feature modules. - 🔗 Use
routerLinkdirective to navigate between routes. - 🧱 Display routed components using
<router-outlet>. - 🛡️ Routes can include guards, child routes, lazy loading, and route parameters.
🎯 Purpose & Use Case
- ✅ Enables SPA navigation without full page reloads.
- ✅ Organizes content into modules and views.
- ✅ Improves UX with seamless transitions between pages.
- ✅ Allows implementation of access control and dynamic routing.
💻 Real Code Example
// 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 { }
<!-- app.component.html -->
<nav>
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>
❓ Interview Q&A
Q1: How do you define routes in Angular?
A: By creating an array of Route objects and passing them to RouterModule.forRoot().
Q2: What is the purpose of <router-outlet>?
A: It acts as a placeholder to render components based on the active route.
Q3: What does routerLink do?
A: Binds an anchor tag to a route path, enabling client-side navigation.
Q4: What’s the difference between forRoot and forChild?
A: forRoot is used in root module, forChild is used in feature modules.
Q5: Can routes be lazy loaded?
A: Yes, using loadChildren for dynamic module loading.
📝 MCQs
Q1. Which Angular module provides routing functionality?
- FormsModule
- CommonModule
- RouterModule
- HttpClientModule
Q2. What directive is used to create navigation links?
- href
- routerPath
- routerLink
- navigateTo
Q3. Where is the routed component displayed?
- router-inject
- ng-view
- router-outlet
- ng-container
Q4. What does forRoot() do?
- Exports services
- Registers root routes
- Defines guards
- Creates lazy modules
Q5. What defines the URL path to a component?
- ViewChild
- Route object
- Selector
- Renderer
Q6. Which is used for feature module routing?
- RouterModule.add()
- RouterModule.forChild()
- RouterModule.feature()
- RouterModule.map()
Q7. How are Angular routes defined?
- Using HTML
- Via index.ts
- As an array of route objects
- Using services only
Q8. What does loadChildren enable?
- Eager loading
- Router caching
- Lazy loading of modules
- Form validation
Q9. How to redirect a default route?
- Use defaultRoute
- Use routerSync
- Use pathMatch and redirectTo
- Use navGuard
Q10. What module usually defines all routes?
- MainModule
- RouteConfig
- AppRoutingModule
- AppModule
💡 Bonus Insight
Angular routing supports nested routes, lazy loading, route guards, and query parameters — giving you full control over navigation logic and performance tuning.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!