Angular 实战教程：用 ng-zorro 搭建待办事项应用

大家好，我是你们的技术博客创作专家。今天，我将带大家开始一个全新的系列教程——Angular 实战教程。在这个系列教程中，我将手把手教你如何使用 Angular 和 ng-zorro 构建一个待办事项应用。

Angular 是一个流行的 JavaScript 框架，用于构建现代 Web 应用程序。它以其高性能、模块化和可扩展性而著称。ng-zorro 是一个基于 Angular 的 UI 库，提供了丰富的组件和工具，可以帮助你轻松地构建出美观、易用的界面。

在今天的教程中，我们将首先创建一个新的 Angular 项目。然后，我们将安装 ng-zorro 库并将其集成到我们的项目中。接下来，我们将创建我们的第一个组件，并开始构建待办事项应用的基本功能。

在本系列教程中，我将带你一步一步地完成整个应用的构建过程。我们将从创建项目开始，然后逐步添加功能，最终完成一个完整的待办事项应用。在教程中，我将使用 ng-zorro 库来构建应用的界面，并使用 Angular 的最佳实践来编写代码。

我希望这个系列教程能够帮助你学习 Angular 和 ng-zorro，并能够帮助你构建出一个实用的待办事项应用。如果你有任何问题或建议，请随时在评论区留言。

让我们开始吧！

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

ng new today

这将创建一个名为 today 的新 Angular 项目。

接下来，我们需要安装 ng-zorro 库。你可以使用以下命令来安装 ng-zorro 库：

npm install ng-zorro-antd

安装完成后，我们需要将 ng-zorro 库集成到我们的项目中。你可以通过在 src/app/app.module.ts 文件中导入 ng-zorro 库来实现。

import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgZorroAntdModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，我们已经完成了 ng-zorro 库的集成。接下来，我们可以开始构建我们的待办事项应用了。

在本教程中，我们将首先创建我们的第一个组件，并开始构建待办事项应用的基本功能。我们将创建一个名为 TodoListComponent 的组件，它将负责显示待办事项列表。

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

然后，我们需要在 src/app/app.component.html 文件中添加一个 <app-todo-list> 标签，以便在应用中显示 TodoListComponent 组件。

<app-todo-list></app-todo-list>

现在，我们已经完成了 TodoListComponent 组件的创建，并将其添加到我们的应用中。接下来，我们可以开始构建待办事项应用的基本功能了。

在本教程中，我们将实现以下基本功能：

• 添加待办事项
• 删除待办事项
• 完成待办事项

我们将使用 Angular 的模板驱动表单来实现这些功能。模板驱动表单是一种简单易用的表单处理方式，它不需要编写大量的代码。

首先，我们需要在 TodoListComponent 组件中定义一个 todoList 属性，它将存储待办事项列表。

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

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

  todoList: string[] = [];

  constructor() { }

  ngOnInit(): void {
  }

}

然后，我们需要在 TodoListComponent 组件中添加一个方法，用于添加待办事项。

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

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

  todoList: string[] = [];

  constructor() { }

  ngOnInit(): void {
  }

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

}

最后，我们需要在 TodoListComponent 组件的模板中添加一个表单，用于添加待办事项。

<form (ngSubmit)="addTodo(todoInput.value)">
  <input type="text" #todoInput>
  <button type="submit">添加</button>
</form>

现在，我们已经实现了添加待办事项的功能。接下来，我们可以实现删除待办事项的功能。

首先，我们需要在 TodoListComponent 组件中添加一个方法，用于删除待办事项。

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

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

  todoList: string[] = [];

  constructor() { }

  ngOnInit(): void {
  }

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

  deleteTodo(todo: string) {
    const index = this.todoList.indexOf(todo);
    if (index > -1) {
      this.todoList.splice(index, 1);