Lesson 18 (Angular Lesson 1)

Lesson 18: Angular Part 1

In the prep work for this lesson, the students learned:

1. The concept of templates and components and why we want to use them to build websites.
2. How to use the Angular CLI to create a new project.
3. The Angular folder structure generated by ng new project-name.
4. How to generate Angular components via the command line.
5. How to display data in the view by adding placeholders to the HTML file.
6. How to use ng serve to preview an Angular project locally in a browser.

Large Group Time (Instructor Notes)

Announcements

1. Check with your class Candidate Engagement Manager for any other announcements.

For Part-Time Students:

1. Graded Assignment #6 is open! Remind students that the key to getting the assignment done is to read through everything carefully and start on what you can do as soon as possible. In class, read through the instructions with your students and highlight what they are capable of doing after this class.

For Full-Time Students:

• Welcome to Days 27 & 28!
• Assignment 5 due by end of Day 29
• Day 27:
  • Lesson 18
• Day 28:
  • Work day for Assignment 5

Topics That Require More Attention

1. Angular is a big leap forward in terms of new skills. There is a LOT of content packed into the last three lessons. Be prepared to offer reassurance.
2. Q & A as needed for the prep-work exercises.
3. Reinforce the benefits for using templates and components.
   1. Pull up the LaunchCode website (launchcode.org) and use the dev tools to examine how many different parts make up the page.
   2. What features do the different pages of the website have in common?
   3. How do templates help us? (Class discussion).
4. Review the Angular CLI commands for creating a new project and generating new components.
5. Can the HTML tag defined for a nested component be used directly in the app.component.html file? Explore with the students to see.
6. Studio intro.

Studio (TF Notes)

1. If you do not know Angular well, you need to do the prep work! The Angular lessons are a big lift, and students really need your support and technical prowess to succeed.
2. Students will create their own repository for this studio. They should push it up to GitHub at the end of the studio.
3. One common mistake students make is to be in the wrong directory when they run ng generate in the terminal. Remind your students that opening a file from the VSCode file tree does NOT automatically update the working directory in the terminal.
4. In this first Angular lesson, the students have not learned the structural directives *ngFor or *ngIf yet. If someone notices how the li elements made during the studio seem a little tedious, praise the observation and let them know that lesson 2 will address that issue.
5. You may need to explain how the box class in app.component.css affects the display.
6. Encourage your students to complete the bonus missions or to modify the .html, .css, and .ts files beyond what the instructions say. ANY results they see after changing the different files provide learning opportunities.