progress

section 11

Author: idevN

Diff for: APM-Start/src/app/app.component.ts

@@ -2,9 +2,21 @@ import {Component} from '@angular/core'
 import {ProductService} from './products/product.service'
 @Component({
 selector:'pm-root',
-template:`<div>
-<h1>{{pageTitle}}</h1>
-<pm-products></pm-products></div>`,
+template:`
+<div>
+<nav class='navbar navbar-default'>
+  <div class='container-fluid'>
+    <a class='navbar-brand'>{{pageTite}}</a>
+    <ul class='nav navbar-nav'>
+      <li><a [routerLink]="['/welcome']">Home</a></li>
+      <li><a [routerLink]="['/products']">Product List</a></li>
+    </ul>
+  </div>
+</nav>
+<div class='container'>
+  <router-outlet></router-outlet>
+</div>
+</div>`,
 providers: [ProductService]
 })
 

Diff for: APM-Start/src/app/app.module.ts

@@ -6,19 +6,36 @@ import {ProductListComponent} from './products/product-list.component';
 import {ProductFilterPipe} from './products/product-filter.pipe'
 import {StarComponent} from './shared/star.component'
 import {HttpModule} from '@angular/http'
+import { WelcomeComponent } from './home/welcome.component'
+import { ProductDetailComponent } from './products/product-detail.component'
+
+import { RouterModule } from '@angular/router'
+
+import { ProductDetailGuard } from'./products/product-guard.service';
 @NgModule({
   declarations: [
     AppComponent,
     ProductListComponent,
     ProductFilterPipe,
-    StarComponent
+    StarComponent,
+    ProductDetailComponent,
+    WelcomeComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    RouterModule.forRoot([
+      { path: 'products', component: ProductListComponent},
+      { path: 'product/:id',
+      canActivate:[ProductDetailGuard], component: ProductDetailComponent},
+      { path: 'welcome', component: WelcomeComponent},
+      { path: ' ', redirectTo:'welcome', pathMatch:'full'},
+      { path: '**',  redirectTo:'welcome', pathMatch:'full' }
+      
+    ])
   ],
-  providers: [],
+  providers: [ProductDetailGuard],
   bootstrap: [AppComponent]
 })
 

Diff for: APM-Start/src/app/products/product-detail.component.html

@@ -0,0 +1,10 @@
+<div class='panel panel-primary'>
+    <div class="panel-heading">
+        {{pageTitle}}
+    </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>

Diff for: APM-Start/src/app/products/product-detail.component.ts

@@ -0,0 +1,26 @@
+import {Component,OnInit} from '@angular/core'
+import {IProduct} from './product'
+
+import { ActivatedRoute, Router } from '@angular/router'
+@Component({
+    templateUrl:'product-detail.component.html'
+})
+export class ProductDetailComponent implements OnInit{
+    pageTitle:string = 'Product Detail';
+    product: IProduct;
+
+    constructor(private _route:ActivatedRoute,
+    private _router: Router)
+    {
+
+    }
+
+    ngOnInit():void {
+        let id=+this._route.snapshot.params['id']; // + to convert to number
+        this.pageTitle+=`: ${id}`;
+    }
+
+    onBack():void {
+        this._router.navigate(['/products']);
+    }
+}

Diff for: APM-Start/src/app/products/product-guard.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router';
+
+@Injectable()
+export class ProductDetailGuard 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;
+    }
+}

Diff for: APM-Start/src/app/products/product-list.component.html

@@ -37,7 +37,7 @@ <h3>Filtered by: {{listFilter}}</h3>
                         <td><img *ngIf="showImage" [src]='product.imageUrl' [title]='product.productName'
                             [style.width.px]='imageWidth'
                             [style.margin.px]='imageMargin'></td>  <!-- property binding -->
-                        <td>{{product.productName}}</td>
+                        <td><a [routerLink]="['/product',product.productId]">{{product.productName}}</a></td>
                         <td>{{product.productCode}}</td>
                         <td>{{product.releaseDate}}</td>
                         <td>{{product.price | currency:'USD':true:'1.2-2' | lowercase}}</td>

Diff for: APM-Start/src/app/products/product-list.component.ts

@@ -2,7 +2,7 @@ import {Component,OnInit} from '@angular/core'
 import {IProduct} from './product'
 import {ProductService} from './product.service'
 @Component({
-selector:'pm-products',
+//selector:'pm-products',
 moduleId:module.id, //use for component relative path
 templateUrl:'product-list.component.html',
 styleUrls:['product-list.component.css']

Diff for: APM-Start/src/app/products/product.service.ts

@@ -16,7 +16,7 @@ export class ProductService {
     getProducts(): Observable<IProduct[]>{
         return this._http.get(this._productUrl)
         .map((response: Response) => <IProduct[]> response.json())
-        .do(data => console.log('All'+ JSON.stringify(data)))
+        .do(data => console.log('All'+ JSON.stringify(data))) // to peak into response data
         .catch(this.handleError);
     }