Angular 入门
上一个
概述：了解客户端 JavaScript 框架
下一个
现在是时候看看 Google 的 Angular 框架了，它是另一个常见的热门选择。本文将介绍 Angular 的优势，安装先决条件，设置一个示例应用程序，并了解 Angular 的基本架构。
注意： 本教程针对 Angular 版本 17，最后一次修订于 2024 年 3 月 (Angular CLI: 17.3.0)。
先决条件
熟悉核心 HTML、CSS 和 JavaScript 语言，了解 终端/命令行。
目标
设置本地 Angular 开发环境，创建启动应用程序，并了解其工作原理。
什么是 Angular？Angular 是一个基于 TypeScript 的框架和开发平台，用于创建单页 Web 应用程序。作为平台，Angular 包括
用于构建可扩展 Web 应用程序的基于组件的框架
一组良好集成的库，涵盖各种功能，包括路由、表单管理、客户端服务器通信等等
一套开发工具，帮助您开发、构建、测试和更新代码
使用 Angular 构建应用程序时，您将利用一个平台，该平台可以从单一开发人员项目扩展到企业级应用程序。Angular 的设计旨在使更新尽可能轻松，因此您可以以最少的努力利用最新的开发成果。最重要的是，Angular 生态系统由超过 170 万名开发者、库作者和内容创作者组成。
在开始探索 Angular 平台之前，您应该了解 Angular CLI。Angular CLI 是开发 Angular 应用程序最快速、最简单且推荐的方法。Angular CLI 使许多任务变得轻松。以下是一些您将经常使用的示例命令
命令
描述
ng build
将 Angular 应用程序编译到输出目录。
ng serve
构建并提供应用程序，在文件更改时重建。
ng generate
根据示意图生成或修改文件。
ng test
对给定项目运行单元测试。
ng e2e
构建并提供 Angular 应用程序，然后运行端到端测试。
您会发现 Angular CLI 是构建应用程序的宝贵工具。
您将构建的内容本教程系列将指导您构建一个待办事项列表应用程序。通过此应用程序，您将学习如何使用 Angular 管理、编辑、添加、删除和过滤项目。
先决条件要在本地系统上安装 Angular，您需要以下内容
Node.js Angular 需要 Node.js 的活动 LTS 或维护 LTS 版本。有关特定版本要求的信息，请参阅 版本兼容性 页面。有关安装 Node.js 的更多信息，请参阅 nodejs.org。如果您不确定系统上运行的 Node.js 版本，请在终端窗口中运行 node -v。
npm 包管理器 Angular、Angular CLI 和 Angular 应用程序依赖于 npm 包 来实现许多功能。要下载和安装 npm 包，您需要 npm 包管理器。本指南使用 npm 客户端 命令行界面，该界面默认情况下与 Node.js 一起安装。要检查是否安装了 npm 客户端，请在终端窗口中运行 npm -v。
创建 Angular 应用程序您可以使用 Angular CLI 在终端中运行命令，以生成、构建、测试和部署 Angular 应用程序。要在全局安装 Angular CLI，请在终端中运行以下命令
bashnpm install -g @angular/cli
所有 Angular CLI 命令都以 ng 开头，后面跟着您希望 CLI 执行的操作。创建一个要构建应用程序的新目录，并在终端中切换到该目录。然后使用以下 ng new 命令创建一个名为 todo 的新应用程序
bashng 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
bashcd todo
ng serve
在浏览器中，导航到 https://:4200/ 以查看新的启动应用程序。如果您更改了任何源文件，应用程序会自动重新加载。
在 ng serve 运行期间，打开第二个终端选项卡或终端窗口以运行命令而不会停止服务器。如果您想停止提供应用程序，请按 Ctrl+c 键，该键位于运行 ng serve 命令的终端中。
熟悉您的 Angular 应用程序本教程重点介绍的应用程序源文件位于 src/app 中
src/app
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
└── app.config.ts
CLI 自动生成的重点文件如下
app.component.ts：也称为类，包含应用程序主页面的逻辑。
app.component.html：包含 AppComponent 的 HTML。此文件的内容也称为模板。模板决定了视图或您在浏览器中看到的内容。
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 应用程序的构建块。组件包含一个 TypeScript 类，该类具有 @Component() 装饰器。
装饰器使用 @Component() 装饰器指定有关类的元数据（HTML 模板和样式）。
类类是放置组件所需任何逻辑的地方。此代码可能包括函数、事件侦听器、属性和对服务的引用，仅举几例。该类位于一个名为 feature.component.ts 的文件中，其中 feature 是您组件的名称。因此，您可能拥有名为 header.component.ts、signup.component.ts 或 feed.component.ts 的文件。您使用具有元数据的 @Component() 装饰器创建一个组件，该元数据告诉 Angular 在哪里找到 HTML 和 CSS。典型的组件如下所示
jsimport { Component } from "@angular/core";
@Component({
selector: "app-item",
standalone: true,
// the following metadata specifies the location of the other parts of the component
templateUrl: "./item.component.html",
styleUrls: ["./item.component.css"],
})
export class ItemComponent {
// code goes here
}
此组件称为 ItemComponent，其选择器为 app-item。您可以像使用常规 HTML 标签一样使用选择器，将其放置在其他模板中，即
注意： 上面的组件名称是 ItemComponent，这也是类的名称。名称相同仅仅是因为组件只不过是一个由 TypeScript 装饰器补充的类。
Angular 的组件模型提供了强大的封装和直观的应用程序结构。组件还使您的应用程序更易于进行单元测试，并可以提高代码的整体可读性。
HTML 模板每个组件都有一个 HTML 模板，用于声明该组件的呈现方式。您可以在模板中或通过文件路径定义此模板。
要引用外部 HTML 文件，请使用 templateUrl 属性
js@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
// code goes here
}
要编写内联 HTML，请使用 template 属性并在反引号中编写您的 HTML
js@Component({
selector: "app-root",
template: `
To do application
`,})
export class AppComponent {
// code goes here
}
Angular 使用附加语法扩展 HTML，使您可以插入来自组件的动态值。当组件的状态发生变化时，Angular 会自动更新呈现的 DOM。此功能的一种用法是插入动态文本，如以下示例所示。
html
{{ title }}
双大括号指示 Angular 对其内部内容进行插值。title 的值来自组件类
jsimport { Component } from "@angular/core";
@Component({
selector: "app-root",
standalone: true,
template: "
{{ title }}
",styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = "To do application";
}
当应用程序加载组件及其模板时，浏览器将看到以下内容
html
To do application
样式组件可以从应用程序的 styles.css 文件继承全局样式，并使用自己的样式对其进行补充或覆盖。您可以直接在 @Component() 装饰器中编写组件特定的样式，也可以指定 CSS 文件的路径。
要将样式直接包含在组件装饰器中，请使用 styles 属性
js@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['h1 { color: red; }']
})
通常，组件使用单独文件中的样式，使用 styleUrls 属性
js@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
使用组件特定的样式，您可以组织 CSS，使其易于维护和移植。
独立组件建议您 使组件独立，除非项目已经使用 NgModules（Angular 模块）来组织代码。本教程使用 独立组件，它们更易于入门。
通常需要导入 CommonModule ，这样您的组件就可以使用常见的 指令 和 管道。本教程使用 ngFor 和 ngIf，因此我们可以确保它们可用，如下所示
jsimport { Component } from "@angular/core";
import { CommonModule } from '@angular/common';
@Component({
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
imports: [CommonModule],
})
总结这就是您对 Angular 的第一次介绍。此时，您应该已经设置好并准备好构建 Angular 应用程序，并对 Angular 的工作原理有了基本的了解。在下一篇文章中，我们将深入了解这些知识并开始构建待办事项列表应用程序的结构。
上一个
概述：了解客户端 JavaScript 框架
下一个