AngularJS Shopping Cart Single Page Application
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.
- JavaScript
- 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.
- JavaScript
- Shipping view: provides Shipping Form.
- JavaScript
$scope.shippingDb
object: stores and provides Shipping view data reference.
- JavaScript
- Billing view: provides Billing Form.
- JavaScript
$scope.billingDb
object: stores and provides Billing view data reference.
- JavaScript
- 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.
- JavaScript
- Order Confirmation view: displays order object JSON string.
- JavaScript
$scope.orderObjectDb
object: stores and provides order data reference as a JavaScript object.
- JavaScript
- Shopping view: provides fake search results items to shop from with Add To Cart buttons.
- 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.
Shipping: | {{shoppingCartDb.deliveryMethodPriceEach | currency: '$'}} |
Delivery Method |
|
Total: | {{shoppingCartDb.allItemsAndDeliveryMethodPrice | currency: '$'}} |
Shipping Information
Billing Information
Billing 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}}