From 8476a463f3490731fe29b2eb19e3159a0ab18634 Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Mon, 19 Jun 2017 23:30:43 -0400
Subject: [PATCH] Set up the router

---
 router/src/app/app.module.ts | 17 ++++++++++++++++-
 routing.md                   | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/router/src/app/app.module.ts b/router/src/app/app.module.ts
index 872bc4c..c357c04 100644
--- a/router/src/app/app.module.ts
+++ b/router/src/app/app.module.ts
@@ -5,6 +5,7 @@ import { AppComponent } from './app.component';
 import { AboutComponent } from './about/about.component';
 import { LinksComponent } from './links/links.component';
 import { ResumeComponent } from './resume/resume.component';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [
@@ -14,7 +15,21 @@ import { ResumeComponent } from './resume/resume.component';
     ResumeComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    RouterModule.forRoot([
+      {
+        path: 'about',
+        component: AboutComponent
+      },
+      {
+        path: 'resume',
+        component: ResumeComponent
+      },
+      {
+        path: 'links',
+        component: LinksComponent
+      }
+    ])
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/routing.md b/routing.md
index 2f475a9..8b4ea2a 100644
--- a/routing.md
+++ b/routing.md
@@ -7,6 +7,7 @@
 1. Create About, Links, and Resume components
 1. Edit the HTML for the About, Links, and Resume components
 1. Display all components at once
+1. Set up the router
 
 ## Create a new angular app
 
@@ -113,3 +114,37 @@ Edit `src/app/app.component.html`:
 ```
 
 You should now see all components displayed on the page
+
+## Set up the router
+
+First import the RouterModule in to `src/app/app.module.ts`:
+
+```javascript
+import { AppComponent } from './app.component';
+import { AboutComponent } from './about/about.component';
+import { LinksComponent } from './links/links.component';
+import { ResumeComponent } from './resume/resume.component';
+import { RouterModule } from '@angular/router'; // add import statement here
+```
+
+Now add the module as an import in `src/app/app.module.ts` and define which modules go with which routes:
+
+```javascript
+imports: [
+  BrowserModule,
+  RouterModule.forRoot([
+    {
+      path: 'about',
+      component: AboutComponent
+    },
+    {
+      path: 'resume',
+      component: ResumeComponent
+    },
+    {
+      path: 'links',
+      component: LinksComponent
+    }
+  ])
+],
+```