Angular

• Learning Outcomes
• Resources
• Lab (optional)
  • IMPORTANT NOTES
  • Assignment Preparation (optional)
• Assignment (optional)
  • Hints

Learning Outcomes

• create simple Angular frontend applications

Resources

• Intro to Basic Concepts
• Intro to Modules
• Intro to Components
• Intro to Services and DI

Lab (optional)

Read about the fundamental Angular concepts above.

Complete the Angular Tour of Heroes app and tutorial. Read the IMPORTANT NOTES below first.

IMPORTANT NOTES

1. Read the Introduction section.

2. The tutorial says to run ng serve --open which works fine if you are developing on your local machine. If you are using the Google Cloud Shell, run ng serve --port 8080 and preview the application in the usual way.

3. If ng serve is running and you have to enter another ng command, you will have to stop ng serve first (CTRL-C); run the command; and then restart the development server with ng serve.

Assignment Preparation (optional)

Change back to your home directory (e.g. cd ~).

Fork; remove the fork relationship; and clone this project https://gitlab.com/langarabrian/angular-cars4

Change to the project directory (e.g. cd angular-cars4).

Install the dependencies for the backend and start it:

cd backend
yarn install
PORT=8080 yarn run dev

Preview the backend in the usual way. You will see the Feathers logo page. Make note of the hostname.

Edit frontend/src/app/services/feathers.service.ts so that it uses your backend hostname (e.g. https://8080-...-cloudshell.dev)

In another terminal change to the angular-cars4 project directory.

Install the dependencies for the frontend and start it:

cd frontend
npm install
ng serve --port 8081

Preview the frontend in the browser in the usual way (don’t forget to change the port to 8081). Add some new things to confirm that the application is working.

Continue with the assignment below. No changes are required to backend. It already implements the “things” and “cars” services.

Assignment (optional)

1. Create a new component “cars”.
2. Modify frontend/src/app/app-routing.module.ts with an additional route for the “cars” path that will display “CarsComponent”.
3. Modify frontend/src/app/app.component.html with a link “Cars” to the new component.
4. Modify the “cars” component so that it implents the following functionality:
   • displays a form that allows the user enter a new car with the following attributes: make, model, year, and mileage
   • displays a table with all the current cars in the system
   • in each row of the table, have a “Delete” button so that the user can delete a car
5. Bonus: The application is currently unstyled. If you have time, implement the Bootstrap framework for the application.

Hints

Spend some time to make sure that you understand how the “things” component works first. Here are some highlights:

frontend/src/app/services/feathers.service.ts initiates the connection to the Feathers backend. This file should require no further modification.

frontend/src/app/services/data.service.ts already has methods to return the active list of “things” and to add a new thing. You will have to modify this class so that it has methods to:

• return the active list of “cars”
• add a new car
• delete a car

frontend/src/app/things/things.component.ts defines the “ThingsComponent” class. This class has methods to access the “things” data on the backend as well as handling the form submission. Your “CarsComponent” will be similar. It will need an addition method to handle deleting a car.

frontend/src/app/things/things.component.html contains the HTML template for the component. It has a form element for adding new things and an unorderd list for displaying the current list of things. Your template for the cars component will be similar.