Lesson Monday

In the last lesson, we explored how to dynamically display data in our Angular templates. We also created our first Task using an object literal.

...
  firstTask = {
    description: "Finish weekend Angular homework for Epicodus course"
  }
...

However, because we'll eventually make many Task objects, it would make more sense to create a Task class with a reusable constructor. This class will function as our model.

As we learned in the Modern JavaScript MVCs lesson, the model represents the data being displayed in the application. Because our current To Do List application is dedicated to recording and displaying all the Tasks a user wants to complete, a Task class will act as our model.

Creating a Model

We'll simply add a Task class declaration to our existing root component file, removing our previous object literal. We'll also expand our Tasks to include two properties instead of one:

  • A boolean called done with a default value of false.
  • A string named description containing details about the Task.
app/app.component.ts
...

export class AppComponent {
  currentFocus: string = 'Angular Homework';
  currentTime = new Date();
  month: number = this.currentTime.getMonth() + 1;
  day: number = this.currentTime.getDate();
  year: number = this.currentTime.getFullYear();
 }

export class Task {
  public done: boolean = false;
  constructor(public description: string) { }
}

Notice our new model class resides outside of the AppComponent class. It also includes the export keyword so other areas of our application may access it.

Next, we'll use the new Task constructor to create our first Task object, instead of using literal notation:

app/app.component.ts
...

export class AppComponent {
  ...
  firstTask: Task = new Task("Finish weekend Angular homework for Epicodus course");
}
...

Notice that we now define our firstTask variable as the Task type. Because we've exported a Task class, Task is now a valid data type for variables!

Displaying Model Data in a View

After the last lesson, our root component's template should look like this:

app/app.component.ts
...
  template: `
    <div class="container">
     <h1>To Do List for {{month}}/{{day}}/{{year}}</h1>
     <h3>{{currentFocus}}</h3>
     <ul>
       <li>{{firstTask.description}}</li>
     </ul>
   </div>
  `
...

In MVC frameworks like Angular, the area of the application that defines what is visible to the user is known as a view. While our Task class is our model, the template here in our component acts as our view.

As we discussed in the last lesson, the view has access to any data in the corresponding component class (our AppComponent class, in this instance). We've updated our component to use a model and to create a Task with its constructor.

Since this sole Task is still named firstTask, our existing {{firstTask.description}} line in the template will still work just fine.

If we refresh the page, everything should appear the same!

first-task-with-dot-notation

We now know how to define data with a model, store instances of our model in a component, and dynamically display the data in a view. In the next lesson, we'll add more Tasks to our list and explore directives that will allow us to add loops and conditionals directly to our component templates.


Example GitHub Repo for Angular 2 To Do List