Overview The final part of the project involves using an Angular Command Line Interface (CLI) to build components and a data service for the client-facing front-end Single Page Application (SPA). In...

Overview

The final part of the project involves using an Angular Command Line

Interface (CLI) to build components and a data service for the

client-facing front-end Single Page Application (SPA). In this

assignment, you will design and build an SPA that will render a

client-based web page using Bootstrap CSS, with admin features built in

Angular with reusable UI components and logic. Angular offers a host of

fully integrated tools to facilitate the build. Once the application is

complete, you will test the functionality for displaying and editing

trips.

Review the
Project Guidelines and Rubricfor this course as a refresher for the SPA requirements for Travlr Getaways’ web application.

Prompt

You now have a working full stack application that serves the

customer! Now it’s time to develop an SPA for your client that will

produce rich functionality for administering the client database. You

will create an add form for trips. In testing, if you add a new trip you

should see it in the database, in the trip cards, and on the Express

Public website.

Follow the instructions in the
SPA
section of the
CS 465 Full Stack Guide
and address the following:

• Develop the Angular application structure using TypeScript, HTML, and CSS. Specifically, you will need to:
  
  
  
  
  • Develop the Trip list component.
  
  
  • Refactor the Trip logic into a Trip card component.
  
  
  • Develop the Trip data service to interact with the API on the Express backend.
  
  
  
  
  
  

• Retrieve and display a list of trips. Select one trip and edit it by updating its values and saving. Code the behaviors for:
  
  
  
  
  • POST
  
  
  • GET
  
  
  • DELETE
  
  
  • PUT
  
  
  
  
  
  

• Add appropriate CRUD methods to the API backend.

• Test Angular in the browser and verify the RESTful API endpoints using Postman.

Guidelines for Submission

Submit the updated travlr.zip zipped file folder. In addition to the

zipped file folder, you must submit the following screenshots as images

to Brightspace: (1) the Card Listing showing an additional trip which

you added, (2) the Edit screen, and (3) the Update screen.