Exercise Monday

Goal: Take advantage of this time to thoroughly familiarize yourself with the TypeScript and Angular basics.

Warm Up


  • Is TypeScript JavaScript? Is JavaScript TypeScript? Explain the relationship between these two languages.
  • What are the benefits of using TypeScript over JavaScript?
  • Consider the following code snippet from this weekend's homework. Use it to answer the questions below:
class Task {
  done: boolean = false;
   constructor(public description: string, public priority: string){}  
 }


var tasks: Task[] = [];
tasks.push(new Task('Do the dishes.', 'Medium'));
tasks.push(new Task('Buy chocolate.', 'Low'));
tasks.push(new Task('Do laundry.', 'High'));
console.log(tasks); 
  • Why is the done property of Task declared directly under the class declaration while the other properties (description, and priority) are only included in the constructor?
  • What does it mean when we declare the task array as the Task[] data type in the line var tasks: Task[] = [];? What type of information will this array contain?

Code


TypeScript To Do List

Follow along with this weekend's TypeScript homework to create a To Do List application using TypeScript. Take your time here, and do not move onto the Angular lessons until you've fully completed the TypeScript version of the To Do List, and feel fairly comfortable working with the new TypeScript syntax. A solid understanding of TypeScript will be incredibly important when we begin working in Angular 2.

Introduction to Angular 2

With your partner, carefully work through each of the lessons listed below. Follow along with each lesson to begin building the sample application depicted in the curriculum.

Above all else, take your time, and ensure you understand each lesson's concepts before advancing to the next lesson. Any lessons you do not get to in class today may be completed as homework tonight.

  1. Modern JavaScript MVCs
  2. Introduction to Angular 2
  3. Angular 2 Setup: Dependencies, Build Tools and TypeScript
  4. Angular 2 Setup: Root Component, Root Module, and More
  5. Views: Displaying Dynamic Data
  6. Creating a Model
  7. Views: Introduction to Directives

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.