Angular routing selects which components appear for the browser’s current URL and lets an application move between views without manually switching components. A route maps a path such as /products or /order to a component; the default path can redirect to /products. section 19.2 section 19.2.2
A small Angular application can organize its views around these routes:
- /products displays ProductList. section 19.2
- /order displays OrderDetails. section 19.2
- /summary/:id displays an order summary using the identifier assigned by the server, such as /summary/5. section 19.2
- The root URL redirects to /products, making the product list the default view. section 19.2.2
Place <router-outlet></router-outlet> in the application shell so Angular has a location for the component selected by the route. Use routerLink on template elements for direct links, or inject Router when navigation follows component logic. After storing an order, OrderDetails calls navigateByUrl to open its summary URL; a Back button can use routerLink="/products". section 19.2 section 19.2.2
Submitting an order and navigating to its summary
submit() { this.dataSource.storeOrder().subscribe(id => this.router.navigateByUrl(`/summary/${id}`)); } section 19.2
Listing 19.6 Configuring the application in the app.module.ts file in the src/app folder
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from "@angular/forms";
import { DataModelModule } from "./data/data.module";
import { ProductItem } from './productItem.component';
import { CategegoryList } from "./categoryList.component";
import { Header } from "./header.component";
import { ProductList } from "./productList.component";
import { RouterModule } from "@angular/router"
import { OrderDetails } from "./orderDetails.component";
import { Summary } from "./summary.component";
const routes = RouterModule.forRoot([
{ path: "products", component: ProductList },
{ path: "order", component: OrderDetails},
{ path: "summary/:id", component: Summary},
{ path: "", redirectTo: "/products", pathMatch: "full"}
]);
@NgModule({
declarations: [AppComponent, ProductItem, CategegoryList,
Header, ProductList, OrderDetails, Summary],
imports: [BrowserModule, AppRoutingModule, FormsModule,
DataModelModule, routes],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Inspect the Angular module configuration that imports routing, registers ProductList, OrderDetails, and Summary, and defines the application’s route mappings. section 19.2.2
