docs: refactor routing doc (#35566)

This rewrite changes headings to focus on user tasks rather than features,
verifies that content is up-to-date and complete, removes colloquial phrases,
adds prerequisites, and expands on a task-based section in the beginning
(a quick reference).

PR Close #35566

aio/content/examples/router/src/app/app-routing.module.7.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router'; // CLI imports router
+
+const routes: Routes = []; // sets up routes constant where you define your routes
+
+// configures NgModule imports and exports
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

aio/content/examples/router/src/app/app-routing.module.8.ts

@@ -0,0 +1,26 @@
+// #docplaster
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router'; // CLI imports router
+
+// #docregion routes, routes-with-wildcard, redirect
+const routes: Routes = [
+  { path: 'first-component', component: FirstComponent },
+  { path: 'second-component', component: SecondComponent },
+  // #enddocregion routes
+  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
+  { path: '**', component: FirstComponent },
+  // #enddocregion redirect
+  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
+  // #docregion routes
+  // #docregion redirect
+];
+// #enddocregion routes, routes-with-wildcard, redirect
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+

aio/content/examples/router/src/app/app-routing.module.9.ts

@@ -0,0 +1,28 @@
+// #docplaster
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router'; // CLI imports router
+
+// #docregion child-routes
+const routes: Routes = [
+  { path: 'first-component',
+    component: FirstComponent, // this is the component with the <router-outlet> in the template
+    children: [
+      {
+        path: 'child-a', // child route path
+        component: ChildAComponent // child route component that the router renders
+      },
+      {
+        path: 'child-b',
+        component: ChildBComponent // another child route component that the router renders
+      }
+    ] },
+// #enddocregion child-routes
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+

aio/content/examples/router/src/app/app.component.4.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+// #docregion relative-to
+  goToItems() {
+    this.router.navigate(['items'], { relativeTo: this.route });
+  }
+// #enddocregion relative-to
+
+}

aio/content/examples/router/src/app/app.component.7.html

@@ -0,0 +1,10 @@
+<h1>Angular Router App</h1>
+<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
+<nav>
+  <ul>
+    <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
+    <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
+  </ul>
+</nav>
+<!-- The routed views render in the <router-outlet>-->
+<router-outlet></router-outlet>

aio/content/examples/router/src/app/app.component.8.html

@@ -0,0 +1,26 @@
+<!-- #docregion child-routes-->
+<h2>First Component</h2>
+
+<nav>
+  <ul>
+    <li><a routerLink="child-a">Child A</a></li>
+    <li><a routerLink="child-b">Child B</a></li>
+  </ul>
+</nav>
+
+<router-outlet></router-outlet>
+<!-- #enddocregion child-routes-->
+
+
+<!-- #docregion relative-route-->
+
+<h2>First Component</h2>
+
+<nav>
+  <ul>
+    <li><a routerLink="../second-component">Relative Route to second component</a></li>
+  </ul>
+</nav>
+<router-outlet></router-outlet>
+
+<!-- #enddocregion relative-route-->

aio/content/examples/router/src/app/app.module.8.ts

@@ -0,0 +1,17 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts

@@ -2,7 +2,9 @@
 // #docregion
 import { switchMap } from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
+// #docregion imports-route-info
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+// #enddocregion imports-route-info
 import { Observable } from 'rxjs';
 
 import { HeroService }  from '../hero.service';
@@ -16,11 +18,16 @@ import { Hero } from '../hero';
 export class HeroDetailComponent implements OnInit {
   hero$: Observable<Hero>;
 
+  // #docregion activated-route
   constructor(
     private route: ActivatedRoute,
+  // #enddocregion activated-route
     private router: Router,
     private service: HeroService
+  // #docregion activated-route
   ) {}
+  // #enddocregion activated-route
+
 
   ngOnInit() {
     this.hero$ = this.route.paramMap.pipe(