AngularJS Shopping Cart Single Page Application

Last reviewed/updated: 08 Jul 2018 | Published: 24 Jan 2017 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

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+. Not Angular 2+.

AngularJS 1.5.8- support not tested.

1.3. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge = EdgeHTML rendering engine (ED12+) and/or Edge browser (ED20+).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. AngularJS Shopping Cart Single Page Application

1.) SHOPPINGNext pointing shopping navbar triangle2.) SHOPPING CART3.) CHECKOUT:ShippingBillingReview OrderOrder Confirmation

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

{{itemRecord.itemName}}
{{itemRecord.itemName}}
  • Launch Date: {{itemRecord.itemLaunchDate}}
  • # of Cores: {{itemRecord.itemNumberOfCores}}
  • Max TDP: {{itemRecord.itemMaxTdp}}
  • Processor Graphics: {{itemRecord.itemProcessorGraphics}}
  • Model #: {{itemRecord.itemModelNumber}}
{{itemRecord.itemPriceEach | currency: '$'}}

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

1.) SHOPPING2.) SHOPPING CARTNext pointing shopping navbar triangle3.) CHECKOUT:ShippingBillingReview OrderOrder Confirmation

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.
Total: {{shoppingCartDb.allItemsAndDeliveryMethodPrice | currency: '$'}}

1.) SHOPPING2.) SHOPPING CART3.) CHECKOUT:ShippingNext pointing shopping navbar triangleBillingReview OrderOrder Confirmation

Shipping Information

1.) SHOPPING2.) SHOPPING CART3.) CHECKOUT:ShippingBillingNext pointing shopping navbar triangleReview OrderOrder Confirmation

Billing Information

Billing Address

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

1.) SHOPPING2.) SHOPPING CART3.) CHECKOUT:ShippingBillingReview OrderNext pointing shopping navbar triangleOrder Confirmation

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}}

1.) SHOPPING2.) SHOPPING CART3.) CHECKOUT:ShippingBillingReview OrderOrder Confirmation

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}}