Angular 教程：创建 To-Do 应用

这个教程将引导你使用 Angular 创建一个简单的 To-Do 应用。我们将从设置环境开始，逐步构建功能。

环境准备

在开始之前，请确保你已经安装了 Node.js 和 npm。你可以通过以下命令检查 Node.js 的版本：

node -v
npm -v

创建项目

使用 Angular CLI 创建一个新的项目：

ng new todo-app
cd todo-app

设计组件

我们将创建两个组件：todo-list 和 todo-item。

1. 创建 todo-list 组件：

ng generate component todo-list

2. 创建 todo-item 组件：

ng generate component todo-item

添加功能

todo-list 组件

在 todo-list 组件中，我们将添加一个输入框和按钮来添加新的 To-Do 项。

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

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent {
  todos: string[] = [];
  newTodo: string = '';

  addTodo() {
    if (this.newTodo.trim() !== '') {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    }
  }
}

todo-item 组件

在 todo-item 组件中，我们将添加一个复选框来标记 To-Do 项是否完成。

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

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: ['./todo-item.component.css']
})
export class TodoItemComponent {
  @Input() todo: string;
  @Input() completed: boolean;

  toggleComplete() {
    this.completed = !this.completed;
  }
}

样式

你可以为组件添加样式，使其看起来更加美观。

/* todo-list.component.css */
.todo-list {
  margin: 20px;
}

.todo-item {
  margin-bottom: 10px;
}

.todo-item.completed {
  text-decoration: line-through;
}

运行应用

在终端中运行以下命令来启动应用：

ng serve

打开浏览器，访问 http://localhost:4200/，你应该能看到一个简单的 To-Do 应用。

扩展阅读

想要了解更多关于 Angular 的内容，可以访问我们的 Angular 教程 页面。

[center]https://cloud-image.ullrai.com/q/Angular/

[center][https://cloud-image.ullrai.com/q/To-Do_App/](To-Do App)