diff --git a/Week-4/Day-3/Readme.md b/Week-4/Day-3/Readme.md new file mode 100644 index 0000000..c417070 --- /dev/null +++ b/Week-4/Day-3/Readme.md @@ -0,0 +1,32 @@ +# Week 4 – Day 3: Angular Routing + +## Date +07 January 2026 + +## Objective +To understand Angular routing and implement navigation between multiple components in a single-page application. + +## Topics Covered +- Introduction to Angular Routing +- RouterModule and Routes +- router-outlet +- routerLink +- Client-side Navigation + +## Activities Performed +- Configured routing module +- Created multiple route-based components +- Implemented navigation using routerLink +- Used router-outlet for dynamic view rendering +- Tested navigation without page reload + +## Tools & Technologies Used +- Angular +- TypeScript +- Angular Router + +## Learning Outcome +Gained practical experience in building single-page navigation using Angular routing. + +## Status +Completed diff --git a/Week-4/Day-3/angular-routing.md b/Week-4/Day-3/angular-routing.md new file mode 100644 index 0000000..09fe732 --- /dev/null +++ b/Week-4/Day-3/angular-routing.md @@ -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 + + +### Navigation Links +Home + +### 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. \ No newline at end of file