Angular 入门

什么是 Angular？

Angular 是一个基于 TypeScript 构建的框架和开发平台。它用于创建单页 Web 应用程序。作为一个平台，Angular 包括：

• 一个用于构建可扩展 Web 应用程序的基于组件的框架
• 一套集成良好的库，涵盖了各种功能，包括路由、表单管理、客户端-服务器通信等
• 一套开发者工具，可帮助您开发、构建、测试和更新代码

当您使用 Angular 构建应用程序时，您正在利用一个可以从单开发者项目扩展到企业级应用程序的平台。Angular 旨在使更新尽可能简单，因此您可以以最少的精力利用最新的开发成果。最重要的是，Angular 生态系统由超过 170 万开发者、库作者和内容创作者组成的多元化群体。

在您开始探索 Angular 平台之前，您应该了解 Angular CLI。Angular CLI 是开发 Angular 应用程序最快、最简单、最推荐的方式。Angular CLI 使许多任务变得容易。以下是一些您会经常使用的示例命令：

您会发现 Angular CLI 是构建应用程序的宝贵工具。

您将构建什么

本教程系列将指导您构建一个待办事项列表应用程序。通过这个应用程序，您将学习如何使用 Angular 管理、编辑、添加、删除和过滤项目。

预备知识

要在本地系统上安装 Angular，您需要以下内容：

• Node.js

  Angular 需要 处于活跃 LTS 或维护 LTS 版本的 Node.js。有关特定版本要求的信息，请参阅版本兼容性页面。

  有关安装 Node.js 的更多信息，请参阅 nodejs.org。如果您不确定系统上运行的是哪个版本的 Node.js，请在终端窗口中运行 node -v。

• npm 包管理器

  Angular、Angular CLI 和 Angular 应用程序依赖 npm 包来实现许多特性和功能。要下载和安装 npm 包，您需要一个 npm 包管理器。本指南使用默认随 Node.js 安装的 npm 客户端命令行界面。要检查是否安装了 npm 客户端，请在终端窗口中运行 npm -v。

创建 Angular 应用程序

您可以使用 Angular CLI 在终端中运行命令，以生成、构建、测试和部署 Angular 应用程序。要全局安装 Angular CLI，请在终端中运行以下命令：

npm install -g @angular/cli

所有 Angular CLI 命令都以 ng 开头，后跟您希望 CLI 执行的操作。创建一个您要构建应用程序的新目录，并在终端中切换到该目录。然后使用以下 ng new 命令创建一个名为 todo 的新应用程序：

ng new todo --routing=false --style=css --ssr=false

ng new 命令会创建一个最小的入门 Angular 应用程序。附加的标志 --routing、--style 和 --ssr 定义了如何在应用程序中处理导航和样式，并配置了服务器端渲染。本教程稍后会更详细地描述这些功能。

首次运行 ng 时，系统可能会询问您是否要启用终端自动补全和分析。自动补全很方便，因为在输入 ng 命令时按 TAB 键会显示可能的选项并自动补全参数。

您还可以决定是否允许将 CLI 使用情况的分析数据发送给 Google 的 Angular 维护人员。要了解有关分析的更多信息，请参阅Angular ng analytics CLI 文档。

要运行您的 todo 应用程序，请使用 cd 命令导航到您的新项目并运行 ng serve：

cd todo
ng serve

在浏览器中，导航到 https://:4200/ 即可查看您的新入门应用程序。如果您更改任何源文件，应用程序将自动重新加载。

在 ng serve 运行期间，打开第二个终端选项卡或终端窗口以运行命令，而无需停止服务器。如果您想随时停止提供应用程序，请在运行 ng serve 命令的终端中按 Ctrl+c。

熟悉您的 Angular 应用程序

本教程重点介绍的应用程序源文件位于 src/app 中。

src/app
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
└── app.config.ts

CLI 自动生成的关键文件如下：

1. app.component.ts：也称为类，包含应用程序主页的逻辑。
2. app.component.html：包含 AppComponent 的 HTML。此文件的内容也称为模板。模板决定了视图或您在浏览器中看到的内容。
3. app.component.css：包含 AppComponent 的样式。当您只想定义应用于特定组件而不是整个应用程序的样式时，可以使用此文件。

Angular 中的组件由三个主要部分组成：模板、样式和类。例如，app.component.ts、app.component.html 和 app.component.css 共同构成了 AppComponent。这种结构将逻辑、视图和样式分开，使应用程序更易于维护和扩展。通过这种方式，您从一开始就采用了最佳实践。

Angular CLI 还会生成一个用于组件测试的文件，名为 app.component.spec.ts，但本教程不涉及测试，因此您可以忽略该文件。每当您生成一个组件时，CLI 都会在您指定的名称的目录中创建这些文件，我们稍后会看到一个示例。

要了解有关测试的更多信息，请参阅 Angular 测试指南。

Angular 应用程序的结构

Angular 是用 TypeScript 构建的。TypeScript 是 JavaScript 的超集，这意味着任何有效的 JavaScript 都是有效的 TypeScript。TypeScript 提供类型和比纯 JavaScript 更简洁的语法，这为您提供了创建更易维护的代码和最大程度减少错误的工具。

组件是 Angular 应用程序的构建块。组件包含一个带有 @Component() 装饰器的 TypeScript 类。

装饰器

您使用 @Component() 装饰器来指定有关类别的元数据（HTML 模板和样式）。

类

类是您放置组件所需的任何逻辑的地方。此代码可以包括函数、事件监听器、属性以及对服务的引用等等。类位于一个名为 feature.component.ts 的文件中，其中 feature 是您的组件名称。因此，您可以拥有名为 header.component.ts、signup.component.ts 或 feed.component.ts 的文件。您使用具有元数据的 @Component() 装饰器创建组件，该元数据告诉 Angular 在哪里可以找到 HTML 和 CSS。一个典型的组件如下所示：

import { Component } from "@angular/core";

@Component({
  selector: "app-item",
  standalone: true,
  imports: [],
  // the following metadata specifies the location of the other parts of the component
  templateUrl: "./item.component.html",
  styleUrl: "./item.component.css",
})
export class ItemComponent {
  // code goes here
}

这个组件叫做 ItemComponent，它的选择器是 app-item。您可以像常规 HTML 标签一样使用选择器，将其放置在其他模板中，即 <app-item></app-item>。当选择器在模板中时，只要遇到选择器的实例，浏览器就会渲染该组件的模板。本教程将指导您创建两个组件并在另一个组件中使用一个。

Angular 的组件模型提供了强大的封装和直观的应用程序结构。组件还使您的应用程序更容易进行单元测试，并可以提高代码的整体可读性。

HTML 模板

每个组件都有一个 HTML 模板，声明该组件如何渲染。您可以内联定义此模板，也可以通过文件路径定义。

要引用外部 HTML 文件，请使用 templateUrl 属性：

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  // code goes here
}

要编写内联 HTML，请使用 template 属性并在反引号中编写您的 HTML：

@Component({
  selector: "app-root",
  template: `<h1>To do application</h1>`,
})
export class AppComponent {
  // code goes here
}

Angular 使用附加语法扩展了 HTML，使您可以从组件中插入动态值。当组件的状态更改时，Angular 会自动更新渲染的 DOM。此功能的一个用途是插入动态文本，如以下示例所示。

<h1>{{ title }}</h1>

双花括号指示 Angular 插入其中的内容。title 的值来自组件类：

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [],
  template: "<h1>{{ title }}</h1>",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  title = "To do application";
}

当应用程序加载组件及其模板时，浏览器会看到以下内容：

<h1>To do application</h1>

样式

组件可以从应用程序的 styles.css 文件继承全局样式，并通过自己的样式进行增强或覆盖。您可以直接在 @Component() 装饰器中编写组件特有的样式，或者指定 CSS 文件的路径。

要直接在组件装饰器中包含样式，请使用 styles 属性：

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: ["h1 { color: red; }"],
})
export class AppComponent {
  // …
}

通常，组件使用单独文件中的样式。如果需要包含多个 CSS 样式表，可以使用 styleUrl 属性，其值为 CSS 文件的路径字符串；或者使用 styleUrls 属性，其值为字符串数组：

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  // …
}

通过组件特有的样式，您可以组织 CSS，使其易于维护和移植。

独立组件

除非项目已经使用 NgModules（Angular 模块）来组织代码，否则建议使组件成为独立的。本教程使用更易于入门的独立组件。

通常会导入 CommonModule，以便您的组件可以使用常见的指令和管道。

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";

@Component({
  standalone: true,
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
  imports: [CommonModule],
})
export class AppComponent {
  // …
}

总结

这就是 Angular 的首次介绍。至此，您应该已经设置好并准备好构建一个 Angular 应用程序，并且对 Angular 的工作原理有了基本的了解。在下一篇文章中，我们将深化这些知识并开始构建我们的待办事项列表应用程序的结构。

• 概述：JavaScript 框架和库
• 下一页