docs: Add new section, tutorials, to left nav, and a tutorial on routing (#36545)

This PR adds a new section, tutorials, to the left navigation. It also
adds a new, basic tutorial for routing.

PR Close #36545

aio/content/examples/router-tutorial/src/app/app.component.css

@@ -0,0 +1,34 @@
+.button {
+    box-shadow: inset 0px 1px 0px 0px #ffffff;
+    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
+    background-color: #ffffff;
+    border-radius: 6px;
+    border: 1px solid #dcdcdc;
+    display: inline-block;
+    cursor: pointer;
+    color: #666666;
+    font-family: Arial;
+    font-size: 15px;
+    font-weight: bold;
+    padding: 6px 24px;
+    text-decoration: none;
+    text-shadow: 0px 1px 0px #ffffff;
+    outline: 0;
+}
+.activebutton {
+    box-shadow: inset 0px 1px 0px 0px #dcecfb;
+    background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
+    background-color: #bddbfa;
+    border-radius: 6px;
+    border: 1px solid #84bbf3;
+    display: inline-block;
+    cursor: pointer;
+    color: #ffffff;
+    font-family: Arial;
+    font-size: 15px;
+    font-weight: bold;
+    padding: 6px 24px;
+    text-decoration: none;
+    text-shadow: 0px 1px 0px #528ecc;
+    outline: 0;
+}

aio/content/examples/router-tutorial/src/app/app.component.html

@@ -0,0 +1,31 @@
+<!-- #docplaster -->
+<!-- #docregion setup -->
+<h1>Angular Router Sample</h1>
+<!-- #enddocregion setup-->
+<!-- #docregion routeractivelink -->
+<nav>
+  <a class="button" routerLink="/crisis-list" routerLinkActive="activebutton">Crisis Center</a> |
+  <a class="button" routerLink="/heroes-list" routerLinkActive="activebutton">Heroes</a>
+</nav>
+<!-- #enddocregion routeractivelink-->
+<!-- #docregion router-outlet -->
+<router-outlet></router-outlet>
+<!-- #enddocregion router-outlet -->
+
+<div style="display: none;">
+<!-- This HTML represents the initial state for the tutorial. It is not intended to appear in the app. -->
+<!-- #docregion setup, components -->
+<app-crisis-list></app-crisis-list>
+<app-heroes-list></app-heroes-list>
+<!-- #enddocregion setup, components -->
+
+<!-- This HTML snippet is for when the user first adds the routerlink navigation. -->
+<!-- #docregion nav -->
+<nav>
+  <a class="button" routerLink="/crisis-list">Crisis Center</a> |
+  <a class="button" routerLink="/heroes-list">Heroes</a>
+</nav>
+<!-- #enddocregion nav-->
+
+
+</div>

aio/content/examples/router-tutorial/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'angular-router-sample';
+}

aio/content/examples/router-tutorial/src/app/app.module.ts

@@ -0,0 +1,38 @@
+// #docplaster
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+// #docregion router-import
+import { RouterModule } from '@angular/router';
+// #enddocregion router-import
+import { AppComponent } from './app.component';
+import { CrisisListComponent } from './crisis-list/crisis-list.component';
+import { HeroesListComponent } from './heroes-list/heroes-list.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    CrisisListComponent,
+    HeroesListComponent,
+    PageNotFoundComponent
+  ],
+  // #docplaster
+  // #docregion import-basic, import-redirect, import-wildcard
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([
+      {path: 'crisis-list', component: CrisisListComponent},
+      {path: 'heroes-list', component: HeroesListComponent},
+  // #enddocregion import-basic
+      {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
+  // #enddocregion import-redirect
+      {path: '**', component: PageNotFoundComponent}
+  // #enddocregion import-wildcard
+  // #docregion import-basic, import-redirect, import-wildcard
+    ]),
+  ],
+  // #enddocregion import-basic, import-redirect, import-wildcard
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html

@@ -0,0 +1,2 @@
+<h3>CRISIS CENTER</h3>
+<p>Get your crisis here</p>

aio/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-crisis-list',
+  templateUrl: './crisis-list.component.html',
+  styleUrls: ['./crisis-list.component.css']
+})
+export class CrisisListComponent {
+
+}

aio/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html

@@ -0,0 +1,2 @@
+<h3>HEROES</h3>
+<p>Get your heroes here</p>

aio/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-heroes-list',
+  templateUrl: './heroes-list.component.html',
+  styleUrls: ['./heroes-list.component.css']
+})
+export class HeroesListComponent {
+
+}

aio/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.html

@@ -0,0 +1,2 @@
+<h2>Page Not Found</h2>
+<p>We couldn't find that page! Not even with x-ray vision.</p>

aio/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.css']
+})
+export class PageNotFoundComponent {
+
+}