Refactoring productService

Author: aneguzman

APM - Start/app/app.component.ts

@@ -1,14 +1,15 @@
 import { Component } from 'angular2/core';
 import { ProductListComponent } from './products/product-list.component';
 import { ProductService} from './products/product.service';
-
+import { HTTP_PROVIDERS } from 'angular2/http';
+import 'rxjs/Rx';
 
 
 @Component({
 	selector: 'pm-app',
 	template: '<div><h1>{{pageTitle}}</h1><pm-products></pm-products></div>',
 	directives: [ProductListComponent],
-	providers: [ProductService]
+	providers: [ProductService, HTTP_PROVIDERS]
 })
 export class AppComponent {
 	pageTitle: string = "Acme Product Managment";

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

@@ -4,7 +4,6 @@ import { ProductFilterPipe } from './product-filter.pipe';
 import { StarComponent } from '../shared/star.component';
 import { ProductService } from './product.service';
 
-
 @Component({
 	selector: 'pm-products',
 	templateUrl: 'app/products/product-list.component.html',
@@ -17,8 +16,9 @@ export class ProductListComponent implements OnInit{
 	imageWidth: number = 50;
 	imageMargin: number = 2;
 	showImage: boolean = false;
-	listFilter: string = 'cart';
+	listFilter: string;
 	products: IProduct[];
+	errorMessage: string = "There was an error in the request."
 
 	constructor(private _productService: ProductService){}
 
@@ -27,6 +27,9 @@ export class ProductListComponent implements OnInit{
     }
 
     ngOnInit(): void{
-		this.products = this._productService.getProducts();
+		this._productService.getProducts()
+				.subscribe(
+					products => this.products = products,
+					error => this.errorMessage = <any>error);
     }
 }

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

@@ -1,39 +1,17 @@
 import { Injectable } from 'angular2/core';
 import { IProduct } from './product';
+import { Http, Response } from 'angular2/http';
+import { Observable } from 'rxjs/observable';
+
 
 @Injectable()
 export class ProductService {
-	getProducts(): IProduct[] {
-		return [
-			{
-				"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"
-			}];
+	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());
 	}
 }

APM - Start/index.html

@@ -19,6 +19,8 @@
     <script src="node_modules/rxjs/bundles/Rx.js"></script>
     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
 
+    <script src="node_modules/angular2/bundles/http.dev.js"></script>
+
     <!-- 2. Configure SystemJS -->
     <script>
         System.config({