From f8359b597c256fd7441e0b90437922e433a1cb4c Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 19 Jun 2017 23:41:21 -0400
Subject: [PATCH] displaying links and showing the components based on URL

---
 router/src/app/app.component.html | 20 ++++++++++++---
 routing.md                        | 42 +++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/router/src/app/app.component.html b/router/src/app/app.component.html
index 07303eb..ffdff5b 100644
--- a/router/src/app/app.component.html
+++ b/router/src/app/app.component.html
@@ -1,4 +1,18 @@
 <h1>Welcome To My Personal Site</h1>
-<app-about></app-about>
-<app-links></app-links>
-<app-resume></app-resume>
+<nav>
+    <ul>
+        <li>
+            <a routerLink="/">Home</a>
+        </li>
+        <li>
+            <a routerLink="/about">About</a>
+        </li>
+        <li>
+            <a routerLink="/links">Links</a>
+        </li>
+        <li>
+            <a routerLink="/resume">Resume</a>
+        </li>
+    </ul>
+</nav>
+<router-outlet></router-outlet>
diff --git a/routing.md b/routing.md
index 8b4ea2a..55287b0 100644
--- a/routing.md
+++ b/routing.md
@@ -8,6 +8,8 @@
 1. Edit the HTML for the About, Links, and Resume components
 1. Display all components at once
 1. Set up the router
+1. Tell the router where to display the components
+1. Create links to the different "pages"
 
 ## Create a new angular app
 
@@ -148,3 +150,43 @@ imports: [
   ])
 ],
 ```
+
+## Tell the router where to display the components
+
+Now that we've set up the router, we need to tell it where to display the components.  Remove the component declarations in `src/app/app.component.html` and replace them with `<router-outlet></router-outlet>`
+
+```html
+<h1>Welcome To My Personal Site</h1>
+<router-outlet></router-outlet>
+```
+
+You can now test the different "pages" by going to
+
+- http://localhost:4200/about
+- http://localhost:4200/links
+- http://localhost:4200/resume
+
+## Create links to the different "pages"
+
+When creating links, we don't use `href` anymore.  Instead we use `routerLink`.  Edit `src/app/app.component.html`:
+
+```html
+<h1>Welcome To My Personal Site</h1>
+<nav>
+    <ul>
+        <li>
+            <a routerLink="/">Home</a>
+        </li>
+        <li>
+            <a routerLink="/about">About</a>
+        </li>
+        <li>
+            <a routerLink="/links">Links</a>
+        </li>
+        <li>
+            <a routerLink="/resume">Resume</a>
+        </li>
+    </ul>
+</nav>
+<router-outlet></router-outlet>
+```