使用 Angular 构建一个 Todo 应用程序

介绍

Angular 是一款常用的前端框架，它允许开发者使用 HTML、CSS 和 JavaScript 来构建动态的单页 Web 应用程序。在本篇文章中，我们将会介绍如何使用 Angular 构建一个简单的 Todo 应用程序。

准备工作

在开始之前，确保您已经安装了 Node.js 和 Angular CLI，如果没有请先进行安装。

安装 Node.js：

https://nodejs.org/en/download/

安装 Angular CLI：

npm install -g @angular/cli

创建一个新项目

运行以下命令创建一个新的 Angular 项目：

ng new todo-app

编写代码

打开 todo-app 项目并导航到 src/app 文件夹，删除 app.component.* 文件，并创建一个新的组件 todo-list:

ng generate component todo-list

接下来，我们需要创建一个 Todo 类型的模型，它包含一个 title 和 completed 属性。

export class Todo {
  title: string;
  completed: boolean;
}

在 todo-list.component.ts 文件中定义一个 todos 数组，并初始化一些默认的 Todo 预设值：

import { Component } from '@angular/core';
import { Todo } from './todo';

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

  constructor() {
    this.todos = [
      { title: 'Learn Angular', completed: false },
      { title: 'Build a todo app', completed: false },
      { title: 'Deploy to Firebase', completed: false }
    ];
  }
}

在 todo-list.component.html 文件中，我们将展示一个列表来显示 Todo 列表。

<h2>My Todo List</h2>
<ul>
  <li *ngFor="let todo of todos">
    <input type="checkbox" [(ngModel)]="todo.completed">
    <span [class.completed]="todo.completed">{{ todo.title }}</span>
  </li>
</ul>

在 todo-list.component.css 文件中，我们将定义一个 .completed 类来更加可视化地表示 Todo 是否已完成。

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

现在我们已经编写了一个简单的 Todo 应用程序，尝试运行它并看看效果：

ng serve

总结

在本篇文章中，我们已经学习了如何使用 Angular 构建一个简单的 Todo 应用程序。使用 Angular 构建单页应用程序是一项重要的前端技能，希望本文能够为您提供良好的学习和指导意义。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b729aaadd4f0e0fffc06c5