28.8. Studio: Angular, Part 1

In this chapter, you learned about the Angular file structure, templates, and components. Over the next three classes, you will build a Mission Planning Dashboard using your Angular skills.

28.8.1. Mission Planning Dashboard

A useful and common front end application is a dashboard. It shows a summary of information about a topic, helping users of the web app make informed decisions.

You will create a Space Mission Planning Dashboard.

28.8.2. Setup

  1. Fork the Angular Lesson 1 Studio repository.
  2. Clone your fork to your computer.
  3. Use git status to verify that you are on branch studio-1.
    • Note that studio-1 is a mostly empty branch.

28.8.2.1. Create Angular Project

  1. Open a terminal at the root of the angular-lc101-mission-planner repository you just cloned.
  2. Create a new Angular project by running ng new mission-planning-dashboard.
    1. When prompted about using routing, enter "N" for No.
    2. When prompted to select the stylesheet format, select CSS.
$ ng new mission-planning-dashboard
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
  1. Navigate into the new folder by running cd mission-planning-dashboard
  2. Install dependencies by running npm install
  3. Verify that the application will run by running ng serve
  4. View the site in your browser at http://localhost:4200
    1. You should see a header that says "Welcome to mission-planning-dashboard!"
  5. Stage and commit the files before starting on the features.

Tip

You will likely still have ng serve running in your terminal. You can stop ng serve by pressing the keys "control+c", or you can open an additional terminal window to run the git commands.

28.8.3. Requirements

The mission dashboard you are creating will eventually look like this.

Screen shot showing the mission dashboard with mission name, rocket name, crew members, equipment, and experiments.

28.8.3.1. Update Starter Page Content

The default stater page created by Angular contains default text, images, and links. Your job is to remove the default content.

  1. Clear out the contents of file app.component.html.
  2. Type in the text Add components here... into app.component.html.
  3. Run ng serve if it's not already running.
  4. View the app in your browser to verify the words "Add components here..." is the only thing that appears on the page.

28.8.3.2. Header Component

You need to create a component that shows the title, mission name, and carrier rocket.

  1. In terminal navigate to the folder src/app folder.
  2. Create a header component using ng g component header.
  3. In the file header.component.html add HTML:
1
2
3
<h1>Mission Planning Dashboard</h1>
<h3>Mission Name: {{ missionName }}</h3>
<h3>Carrier Rocket: {{ rocketName }}</h3>
  1. Add the variables missionName and rocketName to the header component in header.component.ts
export class HeaderComponent implements OnInit {

    missionName: string = "Mars 2030";
    rocketName: string = "Plasma Max";
  1. Add a reference to the header component in app.component.html.
<app-header></app-header>
  1. View the app in your browser to verify that the title, mission name, and rocket name are visible.
Screen shot of browser showing address localhost:4200, which has a title of Mission Planning Dashboard, a Mission Name, and a Carrier Rocket.

28.8.3.3. Crew Component

Next you need to make a component to show a list of crew members.

  1. Create the component by running ng g component crew.

  2. Set the contents of crew.component.html to be:

    1
    2
    3
    4
    5
    6
    <h3>Crew</h3>
    <ul>
       <li>Jessica Watkins</li>
       <li>Raja Chari</li>
       <li>Jasmin Moghbeli</li>
    </ul>
    
  1. Add a reference to the header component in app.component.html.

    <app-header></app-header>
    <app-crew></app-crew>
    
Screen shot of browser showing address localhost:4200, which has a title of Mission Planning Dashboard, a Mission Name,a Carrier Rocket, a Crew header, and a list of crew members in an unordered list.

28.8.3.4. Equipment Component

Now you need to create a component to show a list of equipment.

  1. Create an equipment component named equipment.

  2. The component should display the following:

    1. An <h3> that contains "Equipment"
    2. A <ul> that contains <li> for: Habitat dome, Drones, Food containers, Oxygen tanks
  3. Add the equipment component to app.component.html using the HTML below. Notice the <div> surrounding the crew and equipment components.

    1
    2
    3
    4
    5
    <app-header></app-header>
    <div class="box">
       <app-crew></app-crew>
       <app-equipment></app-equipment>
    </div>
    
  1. Add CSS to file app.component.css to horizontally align the crew and equipment lists. Without this CSS, the equipment list will appear below the crew list.

    1
    2
    3
    4
    .box {
       display: flex;
       padding: 10px;
    }
    
Screen shot of browser showing address localhost:4200, which has a title of Mission Planning Dashboard, a Mission Name, a Carrier Rocket, a Crew header, a list of crew members, and a list of equipment.

Note

A full explanation of display: flex; is beyond the scope of this book. For more information see MDN flex box docs and CSS Tricks flex box guide.

28.8.3.5. Experiments Component

  1. Finally, add an experiments component that contains the HTML below:

    1
    2
    3
    4
    5
    6
    <h3>Experiments</h3>
    <ul>
       <li>Mars soil sample</li>
       <li>Plant growth in habitat</li>
       <li>Human bone density</li>
    </ul>
    
  2. Make the list of experiments show up to the right of equipment list.

When done your dashboard should look like this:

Screen shot showing the mission dashboard with mission name, rocket name, crew members, equipment, and experiments.

28.8.4. Commit Your Work

This repository will be used for the next two studios. Be sure to stage, commit, and push your changes. The next studio will start with a different branch.

  1. Verify the branch and status of the files.
  2. Commit your changes.
  3. Push your commits to origin.

28.8.5. Bonus Mission

  1. Display crew members by adding an array of crew names.
    1. In crew.component.ts add crew: string[] = ["Jessica Watkins", "Raja Chari", "Jasmin Moghbeli"];
    2. In crew.component.html use references like <li>{{crew[0]}}</li> to display the crew names.
  2. Use CSS to add different colors, fonts, borders, etc. to your dashboard.
  3. Move the components around to see how that affects the display of the data.