docs(router): chalin router copyedits #3054 (#3060)

* docs(router): chalin copyedits
* docs(router): bell copy edits + routing module order & inspect config

Author: wardbell

public/docs/_examples/router/ts/app/app-routing.module.2.ts

@@ -1,14 +1,14 @@
-// #docplaster
 // #docregion
-// #docregion v2
 import { NgModule }              from '@angular/core';
 import { RouterModule, Routes }  from '@angular/router';
 
 import { CrisisListComponent }   from './crisis-list.component';
+// import { HeroListComponent }  from './hero-list.component';  // <-- delete this line
 import { PageNotFoundComponent } from './not-found.component';
 
 const appRoutes: Routes = [
   { path: 'crisis-center', component: CrisisListComponent },
+  // { path: 'heroes',     component: HeroListComponent }, // <-- delete this line
   { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];

public/docs/_examples/router/ts/app/app-routing.module.ts

@@ -8,7 +8,7 @@ import { PageNotFoundComponent }    from './not-found.component';
 
 import { CanDeactivateGuard }       from './can-deactivate-guard.service';
 import { AuthGuard }                from './auth-guard.service';
-import { SelectivePreloadingStrategy }   from './selective-preloading-strategy';
+import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
 
 const appRoutes: Routes = [
   {
@@ -47,4 +47,4 @@ const appRoutes: Routes = [
     SelectivePreloadingStrategy
   ]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

public/docs/_examples/router/ts/app/app.component.4.ts

@@ -9,9 +9,9 @@ import { Component } from '@angular/core';
     <nav>
       <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
       <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
-   // #docregion contact-link
-     <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
-   // #enddocregion contact-link
+      // #docregion contact-link
+      <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+      // #enddocregion contact-link
     </nav>
     // #docregion outlets
     <router-outlet></router-outlet>

public/docs/_examples/router/ts/app/app.module.3.ts

@@ -11,12 +11,14 @@ import { CrisisListComponent }   from './crisis-list.component';
 import { PageNotFoundComponent } from './not-found.component';
 
 @NgModule({
+// #docregion module-imports
   imports: [
     BrowserModule,
     FormsModule,
     HeroesModule,
     AppRoutingModule
   ],
+// #enddocregion module-imports
   declarations: [
     AppComponent,
     CrisisListComponent,

public/docs/_examples/router/ts/app/app.module.ts

@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
+// #docregion inspect-config
+import { Router } from '@angular/router';
 
+// #enddocregion inspect-config
 import { AppComponent }            from './app.component';
 import { AppRoutingModule }        from './app-routing.module';
 
@@ -33,4 +37,11 @@ import { DialogService }           from './dialog.service';
   ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule { }
+// #docregion inspect-config
+export class AppModule {
+  // Diagnostic only: inspect router configuration
+  constructor(router: Router) {
+    console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
+  }
+}
+// #enddocregion inspect-config

public/docs/_examples/router/ts/app/crisis-center/crisis.service.ts

@@ -1,5 +1,5 @@
 // #docplaster
-// #docregion
+// #docregion , mock-crises
 export class Crisis {
   constructor(public id: number, public name: string) { }
 }
@@ -10,6 +10,7 @@ const CRISES = [
   new Crisis(3, 'Giant Asteroid Heading For Earth'),
   new Crisis(4, 'Procrastinators Meeting Delayed Again'),
 ];
+// #enddocregion mock-crises
 
 let crisesPromise = Promise.resolve(CRISES);
 
@@ -28,15 +29,13 @@ export class CrisisService {
       .then(crises => crises.find(crisis => crisis.id === +id));
   }
 
-// #enddocregion
-
+  // #enddocregion
   addCrisis(name: string) {
     name = name.trim();
     if (name) {
       let crisis = new Crisis(CrisisService.nextCrisisId++, name);
       crisesPromise.then(crises => crises.push(crisis));
     }
   }
-// #docregion
+  // #docregion
 }
-// #enddocregion

public/docs/_examples/router/ts/app/heroes/heroes.module.1.ts

@@ -1,4 +1,6 @@
+// #docplaster
 // #docregion
+// #docregion v1
 import { NgModule }       from '@angular/core';
 import { CommonModule }   from '@angular/common';
 import { FormsModule }    from '@angular/forms';
@@ -8,23 +10,24 @@ import { HeroDetailComponent }  from './hero-detail.component';
 
 import { HeroService } from './hero.service';
 
-// #docregion heroes-routes
+// #enddocregion v1
 import { HeroRoutingModule } from './heroes-routing.module';
 
+// #docregion v1
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
+// #enddocregion v1
     HeroRoutingModule
+// #docregion v1
   ],
   declarations: [
     HeroListComponent,
     HeroDetailComponent
   ],
-  providers: [
-    HeroService
-  ]
+  providers: [ HeroService ]
 })
-// #enddocregion heroes-routes
 export class HeroesModule {}
+// #enddocregion v1
 // #enddocregion

public/docs/_examples/router/ts/app/heroes/heroes.module.ts

@@ -6,7 +6,7 @@
     <!-- #docregion base-href -->
     <base href="/">
     <!-- #enddocregion base-href -->
-    <title>Router Sample</title>
+    <title>Angular Router</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">

public/docs/_examples/router/ts/index.html

@@ -3,7 +3,7 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.[1].*"
+    "!**/*.[1,2].*"
   ],
   "tags": ["tutorial", "tour", "heroes"]
 }