适合初学者的小项目：从零搭建一个Angular Todo App

2023-09-11 14:54:58

1. 前言

Angular是谷歌推出的一个开源前端框架，它基于TypeScript，可以帮助你构建快速、可扩展的Web应用程序。作为一名初学者，你需要从一个小项目开始，来熟悉Angular的基础知识和开发流程。

2. 项目介绍

本项目是一个简单的Angular Todo App，它允许你创建、更新和删除待办事项。我们将使用Angular CLI来创建项目，并使用Angular Material来构建用户界面。

3. 项目搭建

ng new my-todo-app
cd my-todo-app
ng add @angular/material

4. 代码编写

在src/app/todo文件夹中，创建todo.component.ts和todo.component.html两个文件。在todo.component.ts中，编写以下代码：

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

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {

  todos: string[] = [];

  addTodo(todo: string) {
    this.todos.push(todo);
  }

  removeTodo(todo: string) {
    this.todos = this.todos.filter(t => t !== todo);
  }

  ngOnInit(): void {
  }

}

在todo.component.html中，编写以下代码：

<form (ngSubmit)="addTodo(todoInput.value)">
  <input type="text" #todoInput placeholder="What needs to be done?">
  <button type="submit">Add</button>
</form>

<ul>
  <li *ngFor="let todo of todos">{{ todo }}
    <button (click)="removeTodo(todo)">X</button>
  </li>
</ul>