resuming learning

31 oct

Author: idevN

APM-Start/src/app/app.component.ts

@@ -1,10 +1,11 @@
 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>`
+<pm-products></pm-products></div>`,
+providers: [ProductService]
 })
 
 export class AppComponent{

APM-Start/src/app/app.module.ts

@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule} from '@angular/forms'
 import { AppComponent } from './app.component';
 import {ProductListComponent} from './products/product-list.component';
-import {ProductFilterPipe} from './products/product-filter-pipe'
+import {ProductFilterPipe} from './products/product-filter.pipe'
 import {StarComponent} from './shared/star.component'
-
+import {HttpModule} from '@angular/http'
 @NgModule({
   declarations: [
     AppComponent,
@@ -15,7 +15,8 @@ import {StarComponent} from './shared/star.component'
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
+    HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]

APM-Start/src/app/products/product-filter-pipe.ts renamed to APM-Start/src/app/products/product-filter.pipe.ts

@@ -1,10 +1,11 @@
 import {Component,OnInit} from '@angular/core'
 import {IProduct} from './product'
+import {ProductService} from './product.service'
 @Component({
 selector:'pm-products',
 moduleId:module.id, //use for component relative path
-templateUrl:'./product-list.component.html',
-styleUrls:['./product-list.component.css']
+templateUrl:'product-list.component.html',
+styleUrls:['product-list.component.css']
 })
 
 export class ProductListComponent implements OnInit{
@@ -24,67 +25,21 @@ export class ProductListComponent implements OnInit{
   imageWidth:number=50;
   imageMargin:number=2;
   showImage:boolean=false;
-  listFilter:string='cart';
-  products:IProduct[]=[
-    {
-        "productId": 1,
-        "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"
-    },
-    {
-        "productId": 2,
-        "productName": "Garden Cart",
-        "productCode": "GDN-0023",
-        "releaseDate": "March 18, 2016",
-        "description": "15 gallon capacity rolling garden cart",
-        "price": 32.99,
-        "starRating": 4.2,
-        "imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
-    },
-    {
-        "productId": 5,
-        "productName": "Hammer",
-        "productCode": "TBX-0048",
-        "releaseDate": "May 21, 2016",
-        "description": "Curved claw steel hammer",
-        "price": 8.9,
-        "starRating": 4.8,
-        "imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
-    },
-    {
-        "productId": 8,
-        "productName": "Saw",
-        "productCode": "TBX-0022",
-        "releaseDate": "May 15, 2016",
-        "description": "15-inch steel blade hand saw",
-        "price": 11.55,
-        "starRating": 3.7,
-        "imageUrl": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
-    },
-    {
-        "productId": 10,
-        "productName": "Video Game Controller",
-        "productCode": "GMG-0042",
-        "releaseDate": "October 15, 2015",
-        "description": "Standard two-button video game controller",
-        "price": 35.95,
-        "starRating": 4.6,
-        "imageUrl": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png"
-    }
-];
-
+  listFilter:string;
+  products:IProduct[]=[];
+    errorMessage:string;
+constructor (private _productService: ProductService){
+    
+}
 toggleImage(): void
 {
 this.showImage=!this.showImage;
 }
 
 ngOnInit():void {
-    console.log("init")
+   this._productService.getProducts()
+   .subscribe(products => this.products=products,
+    error => this.errorMessage=<any> error);
 }
 
 
@@ -96,4 +51,6 @@ onRatingClicked(message:string): void {
 
 
 
+
+
 }

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

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core'
+import { IProduct } from './product';
+import { Http, Response} from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/catch';
+
+@Injectable()
+export class ProductService {
+
+    private _productUrl="api/products/products.json"
+    constructor(private _http: Http){
+
+    }
+    getProducts(): Observable<IProduct[]>{
+        return this._http.get(this._productUrl)
+        .map((response: Response) => <IProduct[]> response.json())
+        .do(data => console.log('All'+ JSON.stringify(data)))
+        .catch(this.handleError);
+    }
+
+    private handleError(error: Response){
+        console.log(error);
+        return Observable.throw(error.json().error||"Server error");
+    }
+
+}

APM-Start/src/app/products/product.service.ts

@@ -3,8 +3,9 @@ Output, EventEmitter } from '@angular/core';
 
 @Component({
     selector:'ai-star',
-    templateUrl:'./star.component.html',
-    styleUrls: ['./star.component.css']
+    moduleId:module.id,
+    templateUrl:'star.component.html',
+    styleUrls: ['star.component.css']
 })
 export class StarComponent implements OnChanges{
     @Input() rating:number;