angular入门篇5----订单创建

Angular入门篇5----订单创建

1. 创建订单模型

1.1 创建订单

在Store/src/app/model下创建如下文件:

order.component.ts

import { Injectable } from "@angular/core";
import { Cart } from "./cart.model";

@Injectable()

export class Order {
    public id: number|null =null;
    public name: string|null =null;
    public address: string|null =null;
    public city: string|null =null;
    public state: string|null =null;
    public zip: string|null =null;
    public country: string|null =null;
    public shipped: boolean = false;
    
    constructor(public cart: Cart) { }

    clear() {
        this.id= null;
        this.name=this.address=this.city=null;
        this.state=this.zip=this.country=null;
        this.shipped=false;
        this.cart.clear();
    }
}

order.repository.ts

import {Injectable } from "@angular/core";
import { Observable, from } from "rxjs";
import { Order } from "./order.model";
import { StaticDataSource } from "./static.datasource";

@Injectable()

export class OrderRepository {
    private orders: Order[]=[];

    constructor(private datasource: StaticDataSource){ }

    getOrders():Order[] {
        return this.orders;
    }

    saveOrder(order: Order): Observable<Order> {
        return this.datasource.saveOrder(order);
    }
}

1.2 注册组件

将它们注册到model.module.ts中:

看到这里我相信很多入门的朋友已经能理解框架的套路了。对比一下Product模型就能发现很多相似点。

再在static.datasource.ts加入一些功能:

因为saveOrder函数只是将order打印和返回。如果有提供后端接口，我们大可以将这些数据传至后端处理。

2. 将订单模型展现在Store上

在store/src/app/store内:

2.1 修改checkout.component.ts

将修改checkout.component.ts为:

import { Component } from "@angular/core"
import { NgForm } from "@angular/forms"
import { OrderRepository } from "../model/order.repository"
import { Order } from "../model/order.model"
import { from } from "rxjs";

@Component({
    moduleId: module.id,
    templateUrl: "checkout.component.html",
    styleUrls: ["checkout.component.css"]
})

export class CheckOutComponent { 
    orderSent: boolean =false;
    submitted: boolean =false;
    
    constructor(public repository: OrderRepository,
        public order: Order){ }

    submitOrder(form: NgForm){
        this.submitted = true;
        
        if(form.valid){
            this.repository.saveOrder(this.order).subscribe(order => {
                this.order.clear();
                this.orderSent = true;
                this.submitted = false;
            })
        }
    }
}

再创建用户详细页面:

checkout.component.html

<div class="navbar navbar-inverse bg-inverse">
    <a class="navbar-brand">SPORT STORE</a>
</div>
<div *ngIf="orderSent" class="m-a-1 text-xs-center">
    <h2>Thanks!</h2>
    <p>Thanks for placing your order</p>
    <p>We'll ship your goods as soon as possible</p>
    <button class="btn btn-primary" routerLink="/store"> Return to Store</button>
</div>
<form *ngIf="!orderSent" #form="ngForm" novalidate
    (ngSubmit)="submitOrder(form)" class="m-a-1">
    <div class="form-group">
        <label>Name</label>
        <input class="form-control" #name="ngModel" name="Name"
        [(ngModel)]="order.name" required/>
        <span *ngIf="submitted && name.invalid" class="text-danger">
            Please enter your name
        </span>
    </div>
    <div class="form-group">
        <label>Address</label>
        <input class="form-control" #address="ngModel" name="Address"
        [(ngModel)]="order.address" required />
        <span *ngIf="submitted && address.invalid" class="text-dnager">
            Please enter your adadress
        </span>
    </div>
    <div class="form-group">
        <label>City</label>
        <input class="form-control" #city="ngModel" name="City"
        [(ngModel)]="order.city" required />
        <span *ngIf="submitted && city.invalid" class="text-dnager">
            Please enter your city
        </span>
    </div>
    <div class="form-group">
        <label>State</label>
        <input class="form-control" #state="ngModel" name="State"
        [(ngModel)]="order.state" required />
        <span *ngIf="submitted && state.invalid" class="text-dnager">
            Please enter your state
        </span>
    </div>
    <div class="form-group">
        <label>Zip/Postal Code</label>
        <input class="form-control" #zip="ngModel" name="Zip"
        [(ngModel)]="order.zip" required />
        <span *ngIf="submitted && zip.invalid" class="text-dnager">
            Please enter your zip/postal code
        </span>
    </div>
    <div class="form-group">
        <label>Country</label>
        <input class="form-control" #country="ngModel" name="Country"
        [(ngModel)]="order.country" required />
        <span *ngIf="submitted && country.invalid" class="text-dnager">
            Please enter your country
        </span>
    </div>
    <div class="text-xs-center">
        <button class="btn btn-secondary" routerLink="/cart">Back</button>
        <button class="btn btn-primary" type="submit">Complete Order</button>
    </div>
</form>

checkout.component.css

input.ng-dirty.ng-invalid{ border: 2px solid #ff0000 }
input.ng-dirty.ng-valid{ border: 2px solid #6bc502}

这可以让有效的input为绿框，无效的为红框。

2.3 效果展示

点击"CheckOut"

输入表单(输入成功的绿色边框就是刚刚css文件带来的效果)

提交后我们可以在后台看到表单(交给后端的东西):

参考材料

RESTful Web Service 架构剖析 作者:JeffreyLi

Angular 依赖注入框架里 useExisting 和 useClass 的使用场景 作者:汪子熙