AngularJS Shopping Cart Single Page Application

Last reviewed/updated: 08 Mar 2019 | Published: 24 Jan 2017 | Status: Active

1. Introduction

Some notes on this example:

Once this web page is loaded, this example runs entirely on the client (i.e., in the web browser) and no additional data (including web page content and form data) is received from or sent over the Internet.
The non-minified AngularJS and JavaScript code (learnwebcoding.com) is thoroughly commented.
The whole page views and associated models are:
- Shopping view: provides fake search results items to shop from with Add To Cart buttons.
  - JavaScript $scope.itemsDb array: provides Shopping view fake search results items to shop from data reference.
- Shopping Cart view: provides Line Items Report Form and Delivery Method Form.
  - JavaScript $scope.shoppingCartDb object: stores and provides Shopping Cart view data reference.
  - JavaScript $scope.deliveryMethodsDb array: provides delivery method data reference.
- Shipping view: provides Shipping Form.
  - JavaScript $scope.shippingDb object: stores and provides Shipping view data reference.
- Billing view: provides Billing Form.
  - JavaScript $scope.billingDb object: stores and provides Billing view data reference.
- Review Order view: provides review of shopping cart, shipping, and billing information.
  - JavaScript $scope.shoppingCartDb object: stores and provides Shopping Cart view data reference.
  - JavaScript $scope.shippingDb object: stores and provides Shipping view data reference.
  - JavaScript $scope.billingDb object: stores and provides Billing view data reference.
- Order Confirmation view: displays order object JSON string.
  - JavaScript $scope.orderObjectDb object: stores and provides order data reference as a JavaScript object.
At the conclusion of this example; 1.) a JavaScript object representing the fake order data is assembled, 2.) the order object is serialized into a JSON string using the AngularJS json filter, and 3.) the order object JSON string is displayed.
The W3C Markup Validation Service (validator.w3.org) correctly reports AngularJS directives as invalid HTML attributes. Hence, there is no W3C Valid HTML5 button at the bottom of this web page.

1.1. Web Browser Support

Web browser support: IE9+, ED12+, FF6+, CH16+, OP11.60+.

1.2. AngularJS Support

AngularJS support: AngularJS 1.5.9+. No Angular 2+. AngularJS 1.5.8- not tested.

1.3. Abbreviations

IE = Internet Explorer.
ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
FF = Firefox.
SF = Safari.
CH = Chrome.
OP = Opera.

2. AngularJS Shopping Cart Single Page Application

Fake search result for: 4th Generation Intel Core i3 Processors (Desktop) Boxed
Showing 1 - 9 of 9 products.

Launch Date: {{itemRecord.itemLaunchDate}}
# of Cores: {{itemRecord.itemNumberOfCores}}
Max TDP: {{itemRecord.itemMaxTdp}}
Processor Graphics: {{itemRecord.itemProcessorGraphics}}
Model #: {{itemRecord.itemModelNumber}}

Processor images from Newegg (newegg.com).
Processor prices per 4th Generation Intel Core i3 Processors (Desktop) (ark.intel.com) 11 Jun 2015.

Your shopping cart is empty. Please continue shopping and select an item to purchase.

Remove	Product	Quantity	Price Each	Item Total
✓	{{itemName}} Please enter a valid quantity or make the field empty.		{{shoppingCartDb.itemPriceEachArray[$index] \| currency: '$'}}	{{shoppingCartDb.itemPriceLineArray[$index] \| currency: '$'}}
Subtotal:				{{shoppingCartDb.allItemsPrice \| currency: '$'}}

Shipping:	{{shoppingCartDb.deliveryMethodPriceEach \| currency: '$'}}
Delivery Method Please select a delivery method. ● {{deliveryMethodRecord.deliveryMethodPriceEach \| currency: '$'}} - {{deliveryMethodRecord.deliveryMethodName}}
Total:	{{shoppingCartDb.allItemsAndDeliveryMethodPrice \| currency: '$'}}

Shipping Information

First Name
Required.Please enter a valid first name.

Last Name
Required.Please enter a valid last name.

Address
Required.Please enter a valid address.

Address2 (optional) apartment, suite, floor, etc.
Please enter a valid address2 or make the field empty.

City
Required.Please enter a valid city.

State
Required.Please select a state.

Zip Code (format: 12345)
Required.Please enter a valid zip code.

Phone Number (format: 1234567890 or 123-456-7890)
Required.Please enter a valid phone number.

Email Address
Required.Please enter a valid email address.

Confirm Email Address
Required.Please confirm email address.

Billing Information

Billing Address

✓ Same as the shipping address:

{{shippingDb.address}}
{{shippingDb.address2}}
{{shippingDb.city}}, {{shippingDb.state}} {{shippingDb.zipCode}}
{{shippingDb.phoneNumber}}

Shopping Cart

Products:
Your shopping cart is empty. Please continue shopping and select an item to purchase. {{itemName}}. {{shoppingCartDb.itemPriceEachArray[$index] | currency: '$'}}/each. Quantity: {{shoppingCartDb.itemQuantityArray[$index]}}. Item Total: {{shoppingCartDb.itemPriceLineArray[$index] | currency: '$'}} ({{shoppingCartDb.itemQuantityArray[$index]}} items).
Subtotal: {{shoppingCartDb.allItemsPrice | currency: '$'}} ({{shoppingCartDb.allItemsQuantity}} items).

Delivery Method:
There is no delivery method. Please return to the shopping cart and select a delivery method. {{shoppingCartDb.deliveryMethod}}.
Shipping: {{shoppingCartDb.deliveryMethodPriceEach | currency: '$'}}.

Total:
{{shoppingCartDb.allItemsAndDeliveryMethodPrice | currency: '$'}}.

Shipping Information

{{shippingDb.fullName}}
{{shippingDb.address}}
{{shippingDb.address2}}
{{shippingDb.city}}, {{shippingDb.state}} {{shippingDb.zipCode}}
{{shippingDb.phoneNumber}}
{{shippingDb.emailAddress}}

Billing Information

{{billingDb.creditCardholderName}}
{{billingDb.address}}
{{billingDb.address2}}
{{billingDb.city}}, {{billingDb.state}} {{billingDb.zipCode}}
{{billingDb.phoneNumber}}
Credit Card Number: {{billingDb.creditCardNumberHidden}}
Exp: {{billingDb.creditCardExpirationMonth}}/{{billingDb.creditCardExpirationYear}}

This is the end of the AngularJS Shopping Cart Single Page Application. The fake order data has been assembled into a JavaScript object that has been serialized into the following JSON string using the AngularJS json filter. If this was a real order, the JSON string could be transmitted over the Internet for server-side processing:

{{orderObjectAsJsonString}}