Angular Example: OrderUp!
Below is all the code from our Angular coffee ordering app. Each of the files below were created using ng g and then edited. If you want to recreate this example locally, I encourage using ng g to generate each component, service, or class, then copy/paste this code into the created code.
You can view a published working example online: Angular OrderUp
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Orderup</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
</body>
</html>
app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { OrderformComponent } from './orderform/orderform.component';
import { provideHttpClient } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
OrderformComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [provideHttpClient()],
bootstrap: [AppComponent]
})
export class AppModule { }
app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: false,
styleUrl: './app.component.css'
})
export class AppComponent {
title:string = 'OrderUp!';
author:string = "CS4640 Spring 25";
}
app/app.component.html
<!--navbar -->
<app-navbar></app-navbar>
<div class="container">
<div class="row">
<div cass="col-12">
<h1></h1>
<h2></h2>
</div>
</div>
<app-orderform></app-orderform>
</div>
app/drink.ts
export class Drink {
constructor (
public size:"Small"|"Medium"|"Large",
public name:string,
public price:number,
public temperature:"Hot"|"Iced",
public customer:string
) {}
}
app/order.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class OrderService {
constructor(
private http:HttpClient
) { }
sendRequest(data:any):Observable<any> {
return this.http.post("http://localhost:8080/backend.php", JSON.stringify(data));
}
}
app/orderform/orderform.component.ts
import { Component } from '@angular/core';
import { Drink } from '../drink';
import { OrderService } from '../order.service';
@Component({
selector: 'app-orderform',
standalone: false,
templateUrl: './orderform.component.html',
styleUrl: './orderform.component.css'
})
export class OrderformComponent {
drink:Drink;
sizes:Array<string> = ["Small", "Medium", "Large"];
temps:Array<string> = ["Hot", "Iced"];
order:Array<Drink> = [];
response:any;
constructor(
private orderService:OrderService
) {
this.drink = new Drink("Small", "", 0, "Hot","");
}
addToOrder() {
this.order.push(this.drink);
this.drink = new Drink("Small", "", 0, "Hot","");
}
placeOrder() {
this.orderService.sendRequest(this.order).subscribe(
(respData) => {
this.response = respData;
}
);
}
}
app/orderform/orderform.component.html
<div class="row">
<div class="col-md-8">
<p>Drink: </p>
<p>Form: </p>
<form #orderForm="ngForm">
<div class="mb-3">
<label for="name" class="form-label">Drink Name</label>
<input type="text" class="form-control"
id="name" name="name" [(ngModel)]="drink.name"
placeholder="Enter your drink, e.g. latte" required
#drinkname="ngModel" [class.is-invalid]="drinkname.invalid && drinkname.touched">
</div>
<div class="mb-3">
<label for="size" class="form-label">Size</label>
<select class="form-control"
id="size" name="size" placeholder="" [(ngModel)]="drink.size">
<option *ngFor="let size of sizes"></option>
</select>
</div>
<div class="mb-3">
<label for="temp" class="form-label">Temperature</label>
<select class="form-control"
id="temp" name="temp" placeholder="" [(ngModel)]="drink.temperature">
<option *ngFor="let temp of temps"></option>
</select>
</div>
<div class="mb-3">
<label for="price" class="form-label">Price</label>
<input type="number" class="form-control" [(ngModel)]="drink.price"
id="price" name="price" placeholder="">
</div>
<div class="mb-3">
<label for="customer" class="form-label">Customer</label>
<input type="text" class="form-control" [(ngModel)]="drink.customer"
id="custer" name="customer" placeholder="Who is this for?" required>
</div>
<p class="text-center">
<button class="btn btn-primary" (click)="addToOrder()"
[disabled]="orderForm.form.invalid"
>Add Drink</button>
</p>
</form>
</div>
<div class="col-md-4">
<div class="card">
<h4 class="card-header">Your Cart</h4>
<div class="card-body">
<p class="card-text">Add each drink to your cart,
then select "Place Order" to checkout.
</p>
<ul class="list-group list-group-flush">
<li class="list-group-item text-center" *ngIf="order.length == 0">
Your cart is empty.
</li>
<li class="list-group-item" *ngFor="let d of order">
()<br>
- <br>
<small></small>
</li>
</ul>
<p class="text-center">
<button class="btn btn-success"
[disabled]="order.length == 0"
(click)="placeOrder()">Place Order</button>
</p>
<pre>
</pre>
</div>
</div>
</div>
</div>
app/navbar/navbar.component.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Orderup Navbar">
<div class="container">
<a class="navbar-brand" href="#">OrderUp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Order</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
backend.php
The backend file that is served by Apache.
<?php
// Allow Cross-Origin Scripting so that we can develop
// on our local Docker environments
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
// Read input from the body of the request
// (i.e., from STDIN) as JSON
$json = file_get_contents("php://input");
$input = json_decode($json, true);
// Do processing of the data
$output = [
"time" => date("Y-m-d g:i a"),
"request" => $input
];
$cost = 0;
foreach ($input as $drink) {
$cost += $drink["price"];
}
$output["price"] = $cost;
// Output back to the client as JSON
header("Content-Type: application/json");
echo json_encode($output, JSON_PRETTY_PRINT);