今天是使用 https://stackblitz.com/angular/vmgxnnvnjyr?file=src%2Fapp%2Fcart.service.ts
解釋Angular的最後一天~明天開始就要到mysql了喔~

繼續先練習KEY~後面再來解釋~
1.右鍵單擊 app 資料夾，選擇 Angular Generator 和 Component產生一個名叫 cart 的購物車元件

2.到app.module.ts貼上程式碼:

{ path: 'cart', component: CartComponent },

3.到top-bar.component.html貼上程式碼:

<a routerLink="/cart" class="button fancy-button">
  <i class="material-icons">shopping_cart</i>Checkout
</a>

"Checkout" 按鈕

4.請點選“Checkout”按鈕。你會看到預設文字“cart works!”

5.到 cart.component.ts貼上程式碼:

import { CartService } from '../cart.service';

private cartService: CartService

6.這裡的cart.component.ts貼上程式碼:
要貼上的比較多，最後整體是

import { FormBuilder } from '@angular/forms';

import { CartService } from '../cart.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  items;
  checkoutForm;

  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder,
  ) {
    this.checkoutForm = this.formBuilder.group({
      name: '',
      address: ''
    });
  }

  ngOnInit() {
    this.items = this.cartService.getItems();
  }

  onSubmit(customerData) {
    // Process checkout data here
    this.items = this.cartService.clearCart();
    this.checkoutForm.reset();

    console.warn('Your order has been submitted', customerData);
  }
}

我覺得雖然說是手冊~但是看要貼在那個{}裡面是最難的

7.cart.component.html貼上程式碼:

<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>
</div>

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">

  <div>
    <label for="name">
      Name
    </label>
    <input id="name" type="text" formControlName="name">
  </div>

  <div>
    <label for="address">
      Address
    </label>
    <input id="address" type="text" formControlName="address">
  </div>

  <button class="button" type="submit">Purchase</button>

</form>

8.點選“Checkout”檢視購物車。

9.透過 assets/shipping.json 檔案提供了一些預定義的配送資料。你可以利用這些資料為購物車中的商品新增運費。

10.app.module.ts啟用 HttpClient程式碼:

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
import { ProductDetailsComponent } from './product-details/product-details.component';
import { CartComponent } from './cart/cart.component';
import { ShippingComponent } from './shipping/shipping.component';


@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
      { path: 'cart', component: CartComponent },
      { path: 'shipping', component: ShippingComponent },
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent,
    CartComponent,
    ShippingComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

反紅不見了~

11.cart.service.ts程式碼:

import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class CartService {
  items = [];

  constructor(
    private http: HttpClient
  ) {}

  addToCart(product) {
    this.items.push(product);
  }

  getItems() {
    return this.items;
  }

  clearCart() {
    this.items = [];
    return this.items;
  }

  getShippingPrices() {
    return this.http.get('/assets/shipping.json');
  }
}

12.產生一個名為 shipping 的新元件。在檔案列表框中，右鍵單擊 app 資料夾，選擇 Angular Generator 和 Component的/shipping.component.ts程式碼:

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();
  }

}

13.shipping.component.html程式碼:

<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
  <span>{{ shipping.type }}</span>
  <span>{{ shipping.price | currency }}</span>
</div>

手冊裡的"購物車"完成~
其實做到後面會發現其實程式碼都很像~
等mysql+spring介紹完~
就來個本機版的"購物站"

然後再回來介紹Angular

DEAR ALL 我們明天見~