Week 4 Day 3: Configured Angular routing and navigation
This commit is contained in:
30
Week-4/Day-3/angular-routing.md
Normal file
30
Week-4/Day-3/angular-routing.md
Normal file
@@ -0,0 +1,30 @@
|
||||
## Angular Routing – Basics
|
||||
|
||||
### What is Routing?
|
||||
Routing allows navigation between different views without reloading the page.
|
||||
|
||||
### Why Routing is Important?
|
||||
- Improves user experience
|
||||
- Supports Single Page Applications
|
||||
- Makes applications structured
|
||||
|
||||
### Router Module Setup
|
||||
const routes: Routes = [
|
||||
{ path: 'home', component: HomeComponent },
|
||||
{ path: 'about', component: AboutComponent }
|
||||
];
|
||||
|
||||
### Router Outlet
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
### Navigation Links
|
||||
<a routerLink="/home">Home</a>
|
||||
|
||||
### Practical Work Done
|
||||
- Created routes
|
||||
- Linked multiple components
|
||||
- Used router-outlet
|
||||
- Navigated without page reload
|
||||
|
||||
### Learning Outcome
|
||||
Learned how Angular handles client-side navigation efficiently.
|
||||
Reference in New Issue
Block a user