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:- 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
- 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).
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.