What is @angular/router?
The @angular/router package provides navigation and URL manipulation capabilities for Angular applications. It allows developers to define routes, navigate between them, handle route parameters, and guard routes among other functionalities.
What are @angular/router's main functionalities?
Route Configuration
Defines routes in an Angular application, associating paths with components.
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Router Outlet
A placeholder that Angular dynamically fills based on the current router state.
<router-outlet></router-outlet>
Navigation
Programmatically navigate to different routes within an Angular application.
constructor(private router: Router) { }
navigateToHome() {
this.router.navigate(['/home']);
}
Route Parameters
Access parameters for a given route, often used for fetching data based on the URL.
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.userId = params.get('id');
});
}
Route Guards
Protect routes with guards that can allow or prevent navigation to a route based on logic such as authentication.
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.authService.isAuthenticated();
}
}
Other packages similar to @angular/router
react-router
React Router is a routing library for React, similar to @angular/router but for React applications. It provides components for navigation, route matching, and history handling. While @angular/router is designed specifically for Angular, React Router is tailored to React's component structure.
vue-router
Vue Router is the official router for Vue.js. It integrates deeply with Vue.js core to make building Single Page Applications with Vue.js a breeze. It offers features similar to @angular/router but is designed to work seamlessly with Vue.js components and reactivity system.
reach-router
Reach Router is a small, simple router for React that is accessible and easy to use. It is similar to @angular/router in providing navigation and route matching, but it focuses on simplicity and accessibility. It has now been succeeded by React Router, which has incorporated its accessibility features.
17.3.0 (2024-03-13)
compiler
| Commit | Type | Description |
| -- | -- | -- |
| 1a6beae8a2 | feat | Enable template pipeline by default. (#54571) |
| f386a04c9d | fix | handle two-way bindings to signal-based template variables in instruction generation (#54714) |
| 1f129f114e | fix | not catching for loop empty tracking expressions (#54772) |
compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| 12dc4d074e | fix | account for as expression in docs extraction (#54414) |
| da7fbb40f0 | fix | detect when the linker is working in unpublished angular and widen supported versions (#54439) |
| 492e03f699 | fix | flag two-way bindings to non-signal values in templates (#54714) |
| 5afa4f0ec1 | fix | support ModuleWithProviders
literal detection with typeof
(#54650) |
core
| Commit | Type | Description |
| -- | -- | -- |
| 331b16efd2 | feat | add API to inject attributes on the host node (#54604) |
| fb540e169a | feat | add migration for invalid two-way bindings (#54630) |
| c687b8f453 | feat | expose new output()
API (#54650) |
| c809069f21 | feat | introduce outputFromObservable()
interop function (#54650) |
| aff65fd1f4 | feat | introduce outputToObservable
interop helper (#54650) |
| 974958913c | feat | support TypeScript 5.4 (#54414) |
| 39a50f9a8d | fix | ensure all initializer functions run in an injection context (#54761) |
| 243ccce624 | fix | exclude class attribute intended for projection matching from directive matching (#54800) |
| 2909e9817d | fix | prevent infinite loops in clobbered elements check (#54425) |
| 7243c704cf | fix | return a readonly signal on asReadonly
. (#54706) |
| bb35414a38 | perf | speed up retrieval of DestroyRef
in EventEmitter
(#54748) |
http
| Commit | Type | Description |
| -- | -- | -- |
| 8d37ed035c | fix | exclude caching for authenticated HTTP requests (#54746) |
router
| Commit | Type | Description |
| -- | -- | -- |
| c1c7384e02 | feat | Add reusable types for router guards (#54580) |
| 7225485311 | fix | Navigations triggered by cancellation events should cancel previous navigation (#54710) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="17.2.4"></a>