Learning Process

Course Structure

The course is divided into several chapters, each focusing on a specific application feature. The course is feature-driven rather than technology-driven.

Angular features will be introduced as needed.

Chapters

• Create a task list

• Add a task

• Update a task

• Delete a task

• Communicate with an API

Lessons

Each chapter is divided into several lessons. Each lesson is a small action to accomplish. Each lesson is introduced with a learning objective and a description of the expected outcome.

Chapter Key Objectives

The lesson’s key objectives are the main points to remember from this step. They are highlighted to help you focus on the main points, for example:

Chapter Objectives

• ✔️
  Trigger navigation with routing

  Learn how to trigger navigation via routing in an Angular application.

Instructions

After a brief explanation of the technical aspects, a lesson will provide you with a set of instructions to update the code, for example:

1. Create the Task model in the src/app/models folder.

   src/app/models/task.model.ts

   export class Task {
       id: number;
       title: string;
       description: string;
       completed: boolean;
   }

2. Create a new component named TaskFormComponent.

Terminal

Some lessons will ask you to run commands in the terminal.

In Visual Studio Code, you can open a terminal by clicking on the Terminal menu and selecting New Terminal.

Code Snippets

Most lessons contain code snippets as examples to help you accomplish the action. The course content uses a specific style to highlight code changes, for example:

task-form.component.html

<form>
  <label for="title" class="form-label">Title:</label>
  <input
    type="text"
    id="title"
    name="title"
    class="form-control"

    [(ngModel)]="task.title"
  />

  <label for="description" class="form-label">Description:</label>
  <textarea
    id="description"
    name="description"
    class="form-control"
    [(ngModel)]="task.description"
  ></textarea>

  <button type="submit" class="btn btn-primary" (click)="createTask()">
    Create Task
  </button>
</form>

Learn More: To Infinity and Beyond! 🚀

Some lessons contain a “Learn More” section to help you dive deeper into the topic. You don’t need to read the “Learn More” section to complete the course, but it can help you better understand the topic.