SOLVED CAS 412 MEAN PS6: Simple Angular App

Requirements

0. Create a new branch, PS6. Be sure that your .gitignore file has an entry to

exclude /node_modules from being pushed to github. Create a new PS6

directory to hold your work.

1. Build an Angular application. The application should iterate over and display

data that would be returned by the Node application you built in PS4.

a. You don’t need to create a new component, just modify

app.component.html/.ts

b. Instead of directly calling your PS4 Node endpoint, create a mock file of

the data it would return, and use this mock file as your source of data to

display on the page. One technique you could use is to hit the backend

API, capture the resulting JSON, and copy it into a mock file.

c. If your JSON data has just one thing, duplicate the thing with slight

changes to give you something to iterate over with *ngFor.

d. Use an *ngIf statement in a to display data only when it is available.

e. Create a button on the page that, when clicked, simulates fetching data

from the PS4 backend and displays it.

f. Your app will be similar to the one we looked at in class.

2. Push your homework files to your GitHub repo.

3. Submit the GitHub repo/branch on Gradescope to complete the assignment.

A note about building the app:

This assignment is mainly about getting your dev environment set up for Angular

and building a very simple app. We’ll extend this in the next assignment to be

more complex and use more of Angular’s features.