从零开始构建一个任务管理应用：Angular 实战【任务状态、任务表单、列表组件】

CodeJourney
770 阅读5分钟

本文将逐步构建一个简单但实用的任务管理应用。我们将使用 Angular 框架来开发前端部分，并结合一些常用的技术和最佳实践。通过这个实战案例，读者将学会如何在 Angular 中创建组件、处理数据绑定、实现路由导航、进行表单验证等关键技术。

image.png

简介

任务管理应用是一个常见的应用场景，它可以帮助用户组织和跟踪待办事项。在这个实战中，我们将构建一个具有以下功能的任务管理应用：

  • 显示任务列表
  • 添加新任务
  • 完成/取消任务
  • 删除任务

准备工作

在开始之前，请确保已经安装了以下软件和工具：

  • Node.js（版本 >= 12.0.0）
  • Angular CLI（版本 >= 12.0.0）

步骤 1：创建新的 Angular 项目

首先，打开终端并执行以下命令来创建一个新的 Angular 项目：

ng new task-manager

安装完成后，切换到项目目录：

cd task-manager

步骤 2：创建任务列表组件

我们将首先创建一个任务列表组件，用于显示所有任务。执行以下命令创建该组件：

ng generate component task-list

接下来，打开 src/app/task-list/task-list.component.ts 文件，并替换其中的代码为以下内容：

import { Component, OnInit } from '@angular/core';
​
@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
  tasks: string[] = [];
​
  constructor() { }
​
  ngOnInit() {
    // 在这里初始化任务列表数据
    this.tasks = ['任务1', '任务2', '任务3'];
  }
}

然后，打开 src/app/task-list/task-list.component.html 文件，并替换其中的代码为以下内容：

<div>
  <h2>任务列表</h2>
  <ul>
    <li *ngFor="let task of tasks">{{ task }}</li>
  </ul>
</div>

保存文件并运行应用：

ng serve

在浏览器中访问 http://localhost:4200，你将看到一个简单的任务列表。

步骤 3：创建添加任务表单

接下来，我们将创建一个表单组件，用于添加新的任务。执行以下命令创建该组件：

ng generate component add-task-form

打开 src/app/add-task-form/add-task-form.component.ts 文件，并替换其中的代码为以下内容：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
​
@Component({
  selector: 'app-add-task-form',
  templateUrl: './add-task-form.component.html',
  styleUrls: ['./add-task-form.component.css']
})
export class AddTaskFormComponent implements OnInit {
  taskForm: FormGroup;
​
  constructor(private formBuilder: FormBuilder) { }
​
  ngOnInit() {
    this.taskForm = this.formBuilder.group({
      taskName: ['', Validators.required]
    });
  }
​
  onSubmit() {
    if (this.taskForm.invalid) {
      return;
    }
​
    const taskName = this.taskForm.value.taskName;
    // 将任务添加到任务列表中
    // ...
    this.taskForm.reset();
  }
}

然后，打开 src/app/add-task-form/add-task-form.component.html 文件，并替换其中的代码为以下内容：

<form [formGroup]="taskForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="taskName">任务名称：</label>
    <input id="taskName" type="text" formControlName="taskName">
    <button type="submit" [disabled]="taskForm.invalid">添加</button>
  </div>
</form>

保存文件并修改 src/app/app.component.html 文件，将以下内容添加到其中：

<app-add-task-form></app-add-task-form>
<app-task-list></app-task-list>

重新启动应用，并在浏览器中访问 http://localhost:4200。现在，你可以看到一个包含任务列表和添加任务表单的页面。

步骤 4：实现任务操作

现在，我们将添加任务操作的功能。打开 src/app/task-list/task-list.component.html 文件，并修改 <li> 元素的代码如下：

<li *ngFor="let task of tasks">
  {{ task }}
  <button (click)="completeTask(task)">完成</button>
  <button (click)="cancelTask(task)">取消</button>
  <button (click)="deleteTask(task)">删除</button>
</li>

然后，打开 src/app/task-list/task-list.component.ts 文件，并添加以下方法：

completeTask(task: string) {
  // 将任务标记为已完成
  // ...
}
​
cancelTask(task: string) {
  // 取消任务的完成状态
  // ...
}
​
deleteTask(task: string) {
  // 从任务列表中删除任务
  // ...
}

保存文件并重新启动应用。现在，你可以在每个任务旁边看到完成、取消和删除按钮。

步骤 5：实现任务状态和样式

在这一步，我们将为任务添加状态，并根据任务的完成状态应用不同的样式。

首先，打开 src/app/task-list/task-list.component.ts 文件，并添加一个新的属性 Task，表示任务的模型：

interface Task {
  name: string;
  completed: boolean;
}
​
@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
  tasks: Task[] = [];
​
  // ...
}
​

然后，我们需要更新任务列表的初始化数据和任务操作方法。修改 ngOnInit() 方法和任务操作方法如下：

ngOnInit() {
  // 在这里初始化任务列表数据
  this.tasks = [
    { name: '任务1', completed: false },
    { name: '任务2', completed: true },
    { name: '任务3', completed: false }
  ];
}
​
completeTask(task: Task) {
  task.completed = true;
}
​
cancelTask(task: Task) {
  task.completed = false;
}
​
deleteTask(task: Task) {
  const index = this.tasks.indexOf(task);
  if (index > -1) {
    this.tasks.splice(index, 1);
  }
}

步骤 5：实现任务状态和样式

在这一步，我们将为任务添加状态，并根据任务的完成状态应用不同的样式。

首先，打开 src/app/task-list/task-list.component.ts 文件，并添加一个新的属性 Task，表示任务的模型：

interface Task {
  name: string;
  completed: boolean;
}
​
@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
  tasks: Task[] = [];
​
  // ...
}

然后，我们需要更新任务列表的初始化数据和任务操作方法。修改 ngOnInit() 方法和任务操作方法如下：

codengOnInit() {
  // 在这里初始化任务列表数据
  this.tasks = [
    { name: '任务1', completed: false },
    { name: '任务2', completed: true },
    { name: '任务3', completed: false }
  ];
}
​
completeTask(task: Task) {
  task.completed = true;
}
​
cancelTask(task: Task) {
  task.completed = false;
}
​
deleteTask(task: Task) {
  const index = this.tasks.indexOf(task);
  if (index > -1) {
    this.tasks.splice(index, 1);
  }
}

接下来，打开 src/app/task-list/task-list.component.html 文件，并修改 <li> 元素的代码如下：

<li *ngFor="let task of tasks" [ngClass]="{ 'completed': task.completed }">
  {{ task.name }}
  <button (click)="completeTask(task)">完成</button>
  <button (click)="cancelTask(task)">取消</button>
  <button (click)="deleteTask(task)">删除</button>
</li>

在上面的代码中，我们使用了 [ngClass] 指令来根据任务的完成状态动态添加或移除 CSS 类名 'completed'。接下来，我们需要为 'completed' 类名添加样式。打开 src/app/task-list/task-list.component.css 文件，并添加以下内容：

.completed {
  text-decoration: line-through;
  color: #aaa;
}

重新启动应用，并在浏览器中查看结果。现在，已完成的任务将以删除线显示，并带有灰色的颜色。

总结

通过这个 Angular 实战案例，我们学习了如何创建组件、处理数据绑定、实现表单验证和处理用户操作等关键技术。在实际应用开发中，你可以根据这个基础，进一步扩展和优化你的任务管理应用。希望这篇文章对你的学习和开发有所帮助！

avatar
文章
阅读
粉丝