Solution for lab #17

src/app/app.component.html

@@ -1,23 +1,11 @@
 <app-navigation></app-navigation>
 
 <main role="main">
-  <app-carousel></app-carousel>
-
-  <div class="container">
-    <div class="row" >
-      <app-license-plate *ngFor="let plate of licensePlates | async" appHighlight
-                     [plate]="plate" (onAddToCart)="addToCart($event)" buttonText="Add to cart" class="col-md-4">
-      </app-license-plate>
-    </div>
-  </div>
+  <router-outlet></router-outlet>
 </main>
 
 <footer class="container">
   <p>&copy; License Plate Store 2017</p>
 </footer>
 
-<app-popup-window [isOpen]="showPopup" title="Item added to cart" (onClose)="showPopup = false"  >
-  Thanks for shopping with us!
-</app-popup-window>
-
 

src/app/app.component.ts

@@ -1,24 +1,9 @@
 import { Component } from '@angular/core';
-import {LicensePlate} from './license-plate';
-import {LicensePlateService} from './license-plate.service';
-import {Observable} from 'rxjs';
-import {CartService} from './cart.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {
 
-  licensePlates: Observable<LicensePlate[]>;
-  showPopup = false;
-
-  constructor(private service: LicensePlateService, private cartService: CartService) {
-      this.licensePlates = this.service.getList();
-  }
-
-  addToCart(plate: LicensePlate) {
-    this.cartService.addToCart(plate)
-      .subscribe(done => this.showPopup = true);
-  }
 }

src/app/app.module.ts

@@ -43,6 +43,7 @@ import { CartService } from './cart.service';
 import {CartViewComponent} from './cart-view/cart-view.component';
 import {CheckoutFormComponent} from './checkout-form/checkout-form.component';
 import {CheckoutViewComponent} from './checkout-view/checkout-view.component';
+import { StoreViewComponent } from './store-view/store-view.component';
 //import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
@@ -59,13 +60,13 @@ import {CheckoutViewComponent} from './checkout-view/checkout-view.component';
     HighlightDirective,
     CurrencyRendererPipe,
     CurrencySwitcherComponent,
-    CartViewComponent, CheckoutFormComponent, CheckoutViewComponent
+    CartViewComponent, CheckoutFormComponent, CheckoutViewComponent, StoreViewComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpClientModule,
-    RouterModule , routing
+    RouterModule, routing
     //,ReactiveFormsModule
   ],
   providers: [AuthGuard, LoginService, PostsService, LicensePlateService, CurrencyService, CartService],

src/app/app.routing.ts

@@ -1,11 +1,19 @@
 import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import {HelloComponent} from "./hello/hello.component";
+import {StoreViewComponent} from './store-view/store-view.component';
+import {CartViewComponent} from './cart-view/cart-view.component';
+import {CheckoutViewComponent} from './checkout-view/checkout-view.component';
 
 const appRoutes: Routes = [
   {
-    path: '', component: HelloComponent
+    path: '', component: StoreViewComponent
+  },
+  {
+    path: 'cart', component: CartViewComponent
+  },
+  {
+    path: 'checkout', component: CheckoutViewComponent
   }
 ];
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

src/app/navigation/navigation.component.html

@@ -7,13 +7,13 @@
   <div class="collapse navbar-collapse" id="navbarsExampleDefault">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item">
-        <a class="nav-link" routerLink="">Home <span class="sr-only">(current)</span></a>
+        <a class="nav-link" routerLink="/">Home <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
-        <a class="nav-link"  >My cart <span class="sr-only"></span></a>
+        <a class="nav-link" routerLink="/cart">My cart <span class="sr-only"></span></a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" >Checkout <span class="sr-only"></span></a>
+        <a class="nav-link" routerLink="/checkout">Checkout <span class="sr-only"></span></a>
       </li>
 
     </ul>

src/app/store-view/store-view.component.html

@@ -0,0 +1,13 @@
+<app-carousel></app-carousel>
+
+<div class="container">
+  <div class="row" >
+    <app-license-plate *ngFor="let plate of licensePlates | async" appHighlight
+                       [plate]="plate" (onAddToCart)="addToCart($event)" buttonText="Add to cart" class="col-md-4">
+    </app-license-plate>
+  </div>
+</div>
+
+<app-popup-window [isOpen]="showPopup" title="Item added to cart" (onClose)="showPopup = false"  >
+  Thanks for shopping with us!
+</app-popup-window>

src/app/store-view/store-view.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import {LicensePlate} from '../license-plate';
+import {Observable} from 'rxjs/Observable';
+import {LicensePlateService} from '../license-plate.service';
+import {CartService} from '../cart.service';
+
+@Component({
+  selector: 'app-store-view',
+  templateUrl: './store-view.component.html',
+  styleUrls: ['./store-view.component.css']
+})
+export class StoreViewComponent {
+
+  licensePlates: Observable<LicensePlate[]>;
+  showPopup = false;
+
+  constructor(private service: LicensePlateService, private cartService: CartService) {
+    this.licensePlates = this.service.getList();
+  }
+
+  addToCart(plate: LicensePlate) {
+    this.cartService.addToCart(plate)
+      .subscribe(done => this.showPopup = true);
+  }
+}