add router and routes

Author: jeffbcross

src/app/app.component.html

@@ -1,3 +1,4 @@
 <h1>
   {{title}}
 </h1>
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -2,17 +2,39 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { RouterModule, Route } from '@angular/router';
 
 import { AppComponent } from './app.component';
+import { ItemsComponent } from './items/items.component';
+import { HomeComponent } from './home/home.component';
+
+const homeRoute: Route = {
+  path: '',
+  component: HomeComponent
+};
+
+const otherRoute: Route = {
+  path: 'other',
+  component: ItemsComponent
+};
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    ItemsComponent,
+    HomeComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    RouterModule.forRoot([
+      {
+        path: 'items',
+        component: ItemsComponent
+      },
+      homeRoute,
+      otherRoute])
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/home/home.component.css

@@ -0,0 +1,3 @@
+<p>
+  home works!
+</p>

src/app/home/home.component.html

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('Component: Home', () => {
+  it('should create an instance', () => {
+    let component = new HomeComponent();
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/home/home.component.ts

@@ -0,0 +1,3 @@
+<p>
+  items works!
+</p>

src/app/items/items.component.css

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { ItemsComponent } from './items.component';
+
+describe('Component: Items', () => {
+  it('should create an instance', () => {
+    let component = new ItemsComponent();
+    expect(component).toBeTruthy();
+  });
+});

src/app/items/items.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-items',
+  templateUrl: './items.component.html',
+  styleUrls: ['./items.component.css']
+})
+export class ItemsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}