从零开始构建任务管理应用：Angular 实战

2024-02-12 06:32:22

序言：

在当今快节奏的生活和工作中，有效管理任务对于提高生产力和效率至关重要。任务管理应用可以帮助我们有序地记录、跟踪和完成任务，从而让我们更轻松地掌控生活和工作。本文将以一个简单而实用的任务管理应用为案例，逐步讲解如何使用 Angular 框架来开发前端部分。通过这个实战案例，读者将学会如何在 Angular 中创建组件、处理数据绑定，从而创建出具备任务状态、任务表单和列表组件的任务管理应用。

项目搭建：

首先，我们需要创建一个新的 Angular 项目。可以使用以下命令：

ng new task-manager

然后，进入项目目录并安装必要的依赖项：

cd task-manager
npm install

组件创建：

接下来，我们需要创建三个组件：任务状态组件、任务表单组件和列表组件。可以使用以下命令创建：

ng generate component task-status
ng generate component task-form
ng generate component task-list

任务状态组件：

任务状态组件用于显示任务的状态，例如“未完成”、“正在进行”和“已完成”。可以使用以下 HTML 模板和 TypeScript 代码来实现：

HTML 模板：

<div class="task-status">
  <span>{{ task.status }}</span>
</div>

TypeScript 代码：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'task-status',
  templateUrl: './task-status.component.html',
  styleUrls: ['./task-status.component.css']
})
export class TaskStatusComponent {
  @Input() task: any;
}

任务表单组件：

任务表单组件用于创建和编辑任务。可以使用以下 HTML 模板和 TypeScript 代码来实现：

HTML 模板：

<form class="task-form">
  <input type="text" placeholder="Task Name">
  <button type="submit">Save</button>
</form>

TypeScript 代码：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'task-form',
  templateUrl: './task-form.component.html',
  styleUrls: ['./task-form.component.css']
})
export class TaskFormComponent {
  @Output() saveTask = new EventEmitter();

  onSubmit() {
    this.saveTask.emit();
  }
}

列表组件：

列表组件用于显示任务列表。可以使用以下 HTML 模板和 TypeScript 代码来实现：

HTML 模板：

<ul class="task-list">
  <li *ngFor="let task of tasks">
    <task-status [task]="task"></task-status>
    <task-form></task-form>
  </li>
</ul>

TypeScript 代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
  tasks: any[] = [];

  ngOnInit() {
    this.tasks = [
      { id: 1, name: 'Task 1', status: '未完成' },
      { id: 2, name: 'Task 2', status: '正在进行' },
      { id: 3, name: 'Task 3', status: '已完成' }
    ];
  }
}

应用程序的主组件：

最后，我们需要创建一个应用程序的主组件，并将任务状态组件、任务表单组件和列表组件组合起来。可以使用以下 HTML 模板和 TypeScript 代码来实现：

HTML 模板：

<div class="app-container">
  <task-status></task-status>
  <task-form></task-form>
  <task-list></task-list>
</div>

TypeScript 代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'task-manager';
}

运行应用程序：

现在，我们可以使用以下命令运行应用程序：