小白如何用Angular开发一个简单的Web应用

最近开始学习 Angular，所以想分享下从个人小白的角度如何去开发一款简单的 Web 应用。

简单谈谈 Angular

Angular 就不再做具体细致的介绍了，简要的说的话，Angular 是一个应用设计框架与开发平台，主要基于 TypeScript 语言，通过增强 HTML 的方式提供一种便捷开发 Web 应用程序的方式。

Angular 有几个比较典型的特性，个人认为最为核心的5个分别是：模块化、自动化双向数据绑定、MVC（Model View Controller）、语义化标签和依赖注入。 如果还需要进一步的了解关于 Angular 的基础知识，推荐可以直接到他们的中文站进行系统的学习。

上手开发 To do list 应用

Todo list 作为我经常使用的工具，因为其逻辑和交互也非常简单，所以准备就以这个应用进行上手的实践学习，说干就干！

Step 1 需求逻辑梳理

根据平时使用todo list工具的逻辑，里面其实就主要是三个关键的节点需要进行设置：一是新建任务项，可以及时的添加需要关注的一些工作内容；二是对任务项的更新，例如我已经完成了一项任务工作那就需要对这项工作进行状态的更新；三是删除某项任务，我不需要执行某项任务了，那我就需要对这个任务进行删除。

这里面主要存在3步，一是利用 Angular CLI 创建一个新项目，二是我们需要定义应用的组建和模块，第三步则是比较关键的功能项的添加，我会在里面也增加添加项、更新项和删除项。

todo list

Step 2 使用Angular CLI创建项目

在终端中运行第一个代码，使用 Angular CLI 创建一个名为 todo-app 的新项目：

ng new todo-app

这条代码会自动完成初始化相关的设置工作，也创建好了整个项目的基础目录和结构。

Step 3 定义组件和模板

到了第二步就需要，在src目录下创建名为 app 的组件：

ng g component app

接下来，我们需要打开里面的 app.component.ts 文件，定义 todo 列表数据模型：

export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

@Component({
  // ..
})
  export class AppComponent {

    todos: Todo[] = [];

  }

在 app.component.html 里添加列表的显示逻辑：

<ul>
  <li *ngFor="let todo of todos">
    {{todo.title}}
  </li>
</ul>

其实到这一步我们就已经完成三分之二，再下面的一步就需要我们对创建、读取、更新和删除等交互项进行设置。也是在整个应用创建过程中最为关键的一步步骤。

Step 4 添加相关的功能项

首先我们做一个添加项，在AppComponent类中添加一个addTodo方法：

addTodo() {
  this.todos.push({
    id: this.todos.length + 1,
    title: 'New Todo', 
    completed: false
  });
}

在模板中添加一个添加按钮并调用该方法：

<button (click)="addTodo()">
  Add Todo
</button>

第二个是更新项：

<li 
  *ngFor="let todo of todos"
  (click)="todo.completed = !todo.completed">
  {{todo.title}}
</li>

最后一个是删除项，给每个todoaddItem添加删除按钮，调用删除方法：

<button 
  (click)="deleteTodo(todo)">
  Delete
</button>

deleteTodo(todo: Todo) {
  this.todos = this.todos.filter(t => t !== todo);
}

最后我们启动开发服务器就完成了整个开发工作，整个开发流程是最基础的组件、数据绑定和事件处理，这样就实现了一个简单的To-Do列表应用。

谈谈个人感受

最明显的感受是 Angular 有很齐全的指南以及大量资源和教程可以用来学习，至少学习的资源充足度还是完全可以支撑小白从零开始学习。另外 Angular 有比较清晰的语法规则和结构，也有可供选择的功能也是非常多，对于新手开发者开讲是一件比较友好的事情。

再说下 Angular 与 React 和 Vue JS 使用起来的整体感受，在从零开始的学习难度上 Angular 学起来的挑战性会稍微高一些，实质原因还是因为里面存在更多的内置关系。

但是我认为使用 Angular 构建的应用程序因为其中包含 JavaScript 包，又有Angular CLI，所以整体还是相对较大，这是需要进行持续优化的地方。

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表