As of Module 11

Author: DeborahK

APM-CLI-Final/src/app/app.module.ts

@@ -10,6 +10,7 @@ import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';
 import { StarComponent } from './shared/star.component';
 import { ProductDetailComponent } from './products/product-detail.component';
 import { WelcomeComponent } from './home/welcome.component';
+import { ProductGuardService } from './products/product-guard.service';
 
 @NgModule({
   declarations: [
@@ -26,13 +27,15 @@ import { WelcomeComponent } from './home/welcome.component';
     HttpModule,
     RouterModule.forRoot([
         { path: 'products', component: ProductListComponent },
-        { path: 'products/:id', component: ProductDetailComponent },
+        { path: 'products/:id',
+          canActivate: [ ProductGuardService ],
+          component: ProductDetailComponent },
         { path: 'welcome', component: WelcomeComponent },
         { path: '', redirectTo: 'welcome', pathMatch: 'full'},
         { path: '**', redirectTo: 'welcome', pathMatch: 'full'}
     ])
   ],
-  providers: [],
+  providers: [ProductGuardService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

APM-CLI-Final/src/app/products/product-detail.component.html

@@ -2,4 +2,9 @@
     <div class='panel-heading'>
         {{pageTitle + ': ' + product.productName}}
     </div>
+    <div class='panel-footer'>
+        <a class='btn btn-default' (click)='onBack()' style='width:80px'>
+            <i class='glyphicon glyphicon-chevron-left'></i> Back
+        </a>
+    </div>
 </div>

APM-CLI-Final/src/app/products/product-detail.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { IProduct } from './product';
 
@@ -10,9 +11,26 @@ export class ProductDetailComponent implements OnInit {
     pageTitle: string = 'Product Detail';
     product: IProduct;
 
-  constructor() { }
+  constructor(private _route: ActivatedRoute,
+              private _router: Router) { }
 
   ngOnInit() {
+    let id = +this._route.snapshot.paramMap.get('id');
+    this.pageTitle += `: ${id}`;
+    this.product =     {
+        "productId": id,
+        "productName": "Leaf Rake",
+        "productCode": "GDN-0011",
+        "releaseDate": "March 19, 2016",
+        "description": "Leaf rake with 48-inch wooden handle.",
+        "price": 19.95,
+        "starRating": 3.2,
+        "imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
+    }
+  }
+
+  onBack(): void {
+    this._router.navigate(['/products']);
   }
 
 }

APM-CLI-Final/src/app/products/product-guard.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ProductGuardService } from './product-guard.service';
+
+describe('ProductGuardService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ProductGuardService]
+    });
+  });
+
+  it('should be created', inject([ProductGuardService], (service: ProductGuardService) => {
+    expect(service).toBeTruthy();
+  }));
+});

APM-CLI-Final/src/app/products/product-guard.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router';
+
+@Injectable()
+export class ProductGuardService implements CanActivate {
+
+  constructor(private _router: Router) { }
+
+  canActivate(route: ActivatedRouteSnapshot): boolean {
+    let id = +route.url[1].path;
+    if (isNaN(id) || id < 1) {
+      alert('Invalid product Id');
+      this._router.navigate(['/products']);
+      return false;
+    };
+    return true;
+  }
+}

APM-CLI-Final/src/app/products/product-list.component.html

@@ -41,7 +41,10 @@ <h3>Filtered by: {{listFilter}} </h3>
                                 [style.width.px]='imageWidth'
                                 [style.margin.px]='imageMargin'>
                         </td>
-                        <td>{{ product.productName }}</td>
+                        <td><a [routerLink]="['/products', product.productId]">
+                                {{ product.productName }}
+                            </a>
+						</td>
                         <td>{{ product.productCode | lowercase | convertToSpaces: '-' }}</td>
                         <td>{{ product.releaseDate }}</td>
                         <td>{{ product.price | currency:'USD':true:'1.2-2'}}</td>