From: Kai Moritz <kai@juplo.de>
Date: Sat, 21 Dec 2019 12:48:50 +0000 (+0100)
Subject: Shipping-Component mit Data-Fetch über HTTP
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=ee115f4fe5bf9c35ef9ee5a1ae41b76e0bb88ea5;p=examples%2Fangular-tutorial

Shipping-Component mit Data-Fetch über HTTP
---

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9fa5aad..038c3cf 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { TopBarComponent } from './top-bar/top-bar.component';
@@ -8,6 +9,7 @@ import { ProductListComponent } from './product-list/product-list.component';
 import { ProductDetailsComponent } from './product-details/product-details.component';
 import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
 import { CartComponent } from './cart/cart.component';
+import { ShippingComponent } from './shipping/shipping.component';
 
 @NgModule({
   declarations: [
@@ -16,14 +18,17 @@ import { CartComponent } from './cart/cart.component';
     ProductListComponent,
     ProductDetailsComponent,
     ProductAlertsComponent,
-    CartComponent
+    CartComponent,
+    ShippingComponent
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     RouterModule.forRoot([
       { path: '', component: ProductListComponent },
       { path: 'products/:productId', component: ProductDetailsComponent },
-      { path: 'cart', component: CartComponent }
+      { path: 'cart', component: CartComponent },
+      { path: 'shipping', component: ShippingComponent }
     ])
   ],
   providers: [],
diff --git a/src/app/cart.service.ts b/src/app/cart.service.ts
index aeb5d9e..0d68518 100644
--- a/src/app/cart.service.ts
+++ b/src/app/cart.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
@@ -7,7 +8,7 @@ export class CartService {
 
   items= [];
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
 
   addToCart(product) {
     this.items.push(product);
@@ -21,4 +22,8 @@ export class CartService {
     this.items = [];
     return this.items;
   }
+  
+  getShippingPrices() {
+    return this.http.get('/assets/shipping.json');
+  }
 }
diff --git a/src/app/cart/cart.component.html b/src/app/cart/cart.component.html
index 222ee9d..5ccdc17 100644
--- a/src/app/cart/cart.component.html
+++ b/src/app/cart/cart.component.html
@@ -1,5 +1,9 @@
 <h3>Cart</h3>
 
+<p>
+  <a routerLink="/shipping">Shipping Prices</a>
+</p>
+
 <div class="cart-item" *ngFor="let item of items">
   <span>{{ item.name }}</span>
   <span>{{ item.price | currency }}</span>
diff --git a/src/app/shipping/shipping.component.css b/src/app/shipping/shipping.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shipping/shipping.component.html b/src/app/shipping/shipping.component.html
new file mode 100644
index 0000000..72fc2d5
--- /dev/null
+++ b/src/app/shipping/shipping.component.html
@@ -0,0 +1,6 @@
+<h3>Shipping Prices</h3>
+
+<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
+  <span>{{ shipping.type }}</span>
+  <span>{{ shipping.price | currency }}</span>
+</div>
diff --git a/src/app/shipping/shipping.component.spec.ts b/src/app/shipping/shipping.component.spec.ts
new file mode 100644
index 0000000..31bdd7f
--- /dev/null
+++ b/src/app/shipping/shipping.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShippingComponent } from './shipping.component';
+
+describe('ShippingComponent', () => {
+  let component: ShippingComponent;
+  let fixture: ComponentFixture<ShippingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShippingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShippingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shipping/shipping.component.ts b/src/app/shipping/shipping.component.ts
new file mode 100644
index 0000000..555abb7
--- /dev/null
+++ b/src/app/shipping/shipping.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { CartService } from '../cart.service';
+
+@Component({
+  selector: 'app-shipping',
+  templateUrl: './shipping.component.html',
+  styleUrls: ['./shipping.component.css']
+})
+export class ShippingComponent implements OnInit {
+
+  shippingCosts;
+
+  constructor(private cartService: CartService) { }
+
+  ngOnInit() {
+    this.shippingCosts = this.cartService.getShippingPrices();
+  }
+
+}
diff --git a/src/assets/shipping.json b/src/assets/shipping.json
new file mode 100644
index 0000000..94db54c
--- /dev/null
+++ b/src/assets/shipping.json
@@ -0,0 +1,14 @@
+[
+  {
+    "type": "Overnight",
+    "price": 25.99
+  },
+  {
+    "type": "2-Day",
+    "price": 9.99
+  },
+  {
+    "type": "Postal",
+    "price": 2.99
+  }
+]
\ No newline at end of file