Routing selects the component displayed from the browser’s current URL. In Angular, the Router service performs programmatic navigation, while the routerLink directive enables template navigation without injecting Router into the component. section 19.2 section 21.2
A routed application can define URLs such as:
- /products displays the product list, /order displays order details, and /summary/5 displays the summary for order 5. section 19.2 section 21.3.3
- The default URL can redirect to /products so the product list appears first. section 19.2 section 21.2
- React applications commonly use React Router because React itself does not provide built-in URL routing; BrowserRouter enables browser routing, while Routes and Route map paths to content. section 21.2
Navigate after submitting an order
Inject Router into an Angular component, wait for the server to return an order ID, and navigate to the matching summary URL: constructor(private dataSource: DataSource, private router: Router) {}. The submit method calls storeOrder().subscribe(id => this.router.navigateByUrl(`/summary/${id}`)). A template button can instead use routerLink="/products" for a direct link back to the product list. section 19.2
Listing 19.2 The contents of the orderDetails.component.ts file in the src/app folder
import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { Order } from "./data/entities";
import { DataSource } from './data/dataSource';
@Component({
selector: "order-details",
templateUrl: "./orderDetails.component.html"
})
export class OrderDetails {
constructor(private dataSource: DataSource, private router: Router) {}
get order() : Order {
return this.dataSource.order;
}
submit() {
this.dataSource.storeOrder().subscribe(id =>
this.router.navigateByUrl(`/summary/${id}`));
}
}
Inspect the complete Angular OrderDetails component, including Router injection, order submission, and navigation to a parameterized summary URL. section 19.2
