介绍
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 预设值：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ---------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- -
------ -------
------------- -
---------- - -
- ------ ------ --------- ---------- ----- --
- ------ ------ - ---- ----- ---------- ----- --
- ------ ------- -- ---------- ---------- ----- -
--
-
-在 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