Executive Summary

This project is essentially a remake of Project-D but with the frontend implemented in Angular and with a couple of views added. This project is intended to complete the exposure to the building blocks of typical shopping-cart web applications.

The Environment

For the frontend, issue the nglrGo command and supply a folder name. The official docs for the Angular framework is at angular.io. In particular, the topics under FUNDAMENTALS in the left sidebar and the cheat sheet under QUICK REFERENCE are helpful.

The Backend

You will be using the services you created in Projects A-D plus any needed service for the added views. You are free to re-use these services as-is or to re-implement them in a different platform (TCP Socket, Tomcat, or NodeJS) or with different specs. In all cases, make sure you include the CORS header in all services as in Project-D.

The Frontend

In addition to the four views of Project-D, your frontend must support the following two views:
  1. ShipTo:
    This view has a header at the top that says "Shipping Address". In it, a form is displayed to allow the user to enter the following fields:
    • Recipient Name
    • Street Address 1
    • Street Address 2
    • City
    • Province/State
    • Postal/Zip Code
    • Delivery Instructions
    A button with caption "Submit" must appear under the form. The button does nothing if the entries are not valid. Validation involves ensuring that all fields (aside from the second street address and the instructions) are not left empty. (You can optionally further validate that the Postl/Zip code field matches the expected regular expression for Canadian/US codes but this is not required for this project.) If the entries are valid then pressing the button displays the view that was displayed before "ShipTo". Note that this button controls validation and inter-view navigation but it does not invoke any backend service when clicked--the entered information remains in the frontend at the client end.
  2. Checkout:
    This view has a header at the top that says "Order Details". In it, all the following details must be displayed in a read-only fashion:
    • The shipping address.
    • The cart showing, per product, the product name, quantity, unit price, and extended price (= quantity * unit price).
    • The total price of the cart (= the sum of all extended prices).
    Two buttons must appear at the bottom with captions "Continue Shopping" and "Checkout". If the former is clicked then the "catalog" view is displayed; and if the latter then the application ends.

    Flow & Navigation

    • Your frontend must have a button captioned "Ship-To" appearing at the top of all views. It leads to the "ShipTo" view when clicked.
    • Your "cart" view must have a button captioned "Checkout". If the user has already filled the shipping address (you detect that by noting that the--locally-stored--recipient name is not empty) then clicking this button leads to the "Checkout" view. Otherwise, it leads to the "Ship-To" view.

    Persist Your Work

    Upload your files to the course cloud so you can use it during tests.