Exercise Tuesday

Goal: Take advantage of this time to thoroughly familiarize yourself with the TypeScript and Angular basics. Follow along with the homework to ensure you have solid footing on these concepts.

Warm Up


  • What is the root component?
  • How is the selector used with a template?
  • How does Angular use the MVC pattern?

Code


To Do List in Angular

Before beginning any of the projects listed below, ensure each partner has a To Do List application from yesterday (completed up through the concepts demonstrated in the Views: Introduction to Directives lesson. If either pair does not, spend the first part of today following along with the lessons from the Introduction to Angular 2 exercise in yesterday's classwork.

Recipe Box

Next, try building a basic Recipe Box application in Angular from scratch. For now, you'll hard-code your Recipe objects into the application, just like we hard-coded our Tasks into our To Do List. At the very least, each Recipe object should contain properties for a title, a list of ingredients, and the directions necessary to prepare the recipe.

Data Binding and More Directives

If you're able to complete all projects above, and feel comfortable with the concepts covered thus far, begin following along with tonight's homework.

Follow along to add the features outlined in these lessons to your To Do List. Then, add similar functionality to your recipe box, using the following user stories as a guide:

  • As a user, I want to see only the title of each recipe when I first visit the page
  • As a user, I want to click a recipe's title to see its other details; like the ingredients and instructions.
  • As a user, I want to be able to hide a recipe's details when I'm done viewing them.
  • As a user, I want to edit my recipes if I need to. I'd like to see changes reflected live on the page as I make them.

Peer Code Review


  • Application works as expected.
  • Components are used to create views and add behavior for your templates.
  • TypeScript is used throughout application, including defined data types.
  • Dependencies are managed with npm and Bower.
  • Application includes a gulp-based asset pipeline with a development server and all necessary build tasks.