64 lines
1.2 KiB
Markdown
64 lines
1.2 KiB
Markdown
# Angular Routing
|
|
|
|
## Overview
|
|
Angular Routing allows navigation between different components in a Single Page Application (SPA) without reloading the page.
|
|
|
|
It maps URL paths to components and dynamically loads them inside the application.
|
|
|
|
---
|
|
|
|
## Key Concepts
|
|
|
|
### Routes
|
|
Routes define the relationship between a URL path and a component.
|
|
|
|
Example:
|
|
|
|
const routes: Routes = [
|
|
{ path: 'home', component: HomeComponent },
|
|
{ path: 'about', component: AboutComponent }
|
|
];
|
|
|
|
---
|
|
|
|
### Router Outlet
|
|
`<router-outlet>` is a directive that acts as a placeholder where routed components are displayed.
|
|
|
|
Example:
|
|
|
|
<router-outlet></router-outlet>
|
|
|
|
---
|
|
|
|
### RouterLink
|
|
Used in HTML to navigate between routes.
|
|
|
|
Example:
|
|
|
|
<a routerLink="/home">Home</a>
|
|
<a routerLink="/about">About</a>
|
|
|
|
---
|
|
|
|
### Programmatic Navigation
|
|
You can navigate using the Router service.
|
|
|
|
Example:
|
|
|
|
constructor(private router: Router) {}
|
|
|
|
goHome() {
|
|
this.router.navigate(['/home']);
|
|
}
|
|
|
|
---
|
|
|
|
## Steps to Implement Routing
|
|
|
|
1. Install Angular Router (included in Angular CLI projects)
|
|
2. Define routes in a routes file
|
|
3. Import RouterModule
|
|
4. Use `<router-outlet>` in the main template
|
|
5. Add navigation links using `routerLink`
|
|
|
|
--- |