从空文件夹到运行中的应用：搭建现代 Angular 22 项目
安装 Node.js 和 Angular CLI，使用 ng new 创建一个 Angular 22 应用，了解独立文件结构，并通过实时重建在本地运行它。
在学习 Angular 的组件、模板、服务或路由之前，你首先需要一个能在自己机器上运行的项目。实现这一目标需要一些工具、一条脚手架命令，以及一种与许多旧教程所示截然不同的文件夹结构。本指南将带你从一台空机器一步步构建出一个可运行的 Angular 22 应用程序，解释每个工具的功能，并展示生成的各个部分是如何相互连接的，从而使整个框架有地方安放。
开始之前所需准备
本地的 Angular 环境依赖于四样东西：Node.js、Angular CLI、代码编辑器（Visual Studio Code 是常见选择）以及终端。无需单独安装 TypeScript；创建项目时，Angular、TypeScript 以及其他所有必需的包都会自动被引入。
版本兼容性非常重要。在撰写本文时，Angular的版本兼容性参考列表规定，Angular 22的最小要求是Node.js v22.22.3或更高版本，同时也会列出其他受支持的更新版本。这些要求会随着Angular版本的更迭而变化，因此在安装任何内容之前，请先查看angular.dev上的最新兼容性表格。
第一步：安装Node.js和npm
Angular用于构建浏览器应用程序，那么为何需要服务器端运行时呢？答案在于工具需求。Node.js能让JavaScript在浏览器之外运行，而Angular CLI、编译器、开发服务器以及测试工具都是依赖Node.js运行的JavaScript程序。此外，Node.js还自带npm——Angular用来安装项目依赖的包管理器。
从官方 Node.js 网站下载安装程序。下载完成后，打开终端（Windows 系统则为命令提示符），并确认运行时环境已在系统路径中：
node --version
输出结果应类似以下版本字符串：
v22.22.3
接着确认 npm 也可正常使用：
npm --version
如果这两个命令都能输出版本号，那就说明基础环境已准备就绪。切勿因为旧教程中使用的是某个旧版本的 Node.js，就继续保留该版本。每个 Angular 主版本都有其支持的 Node.js 版本范围，版本不匹配通常会表现为令人困惑的安装或构建错误，而非明确的提示信息。如果需要为不同项目使用不同版本的 Node.js，nvm 或 fnm 等工具可以简化版本切换流程。
步骤 2：了解 Angular CLI 的功能
下一个工具是Angular CLI（命令行界面）。它是创建和管理 Angular 应用程序的主要方式：它可以生成新项目框架、创建组件和服务、运行开发服务器、生成生产版本、执行测试以及处理许多其他常规任务。无需手动编写数十个文件或自行配置构建环境，只需让 CLI 生成一个可用的标准起点，再在此基础上进行开发即可。
步骤 3：全局安装 Angular CLI
使用 npm 安装 CLI：
npm install -g @angular/cli@22
命令的每个部分都有其功能。npm install用于安装软件包。加上-g标志可将其全局安装，这样就可以在任何文件夹中使用该命令，而不仅限于某个项目内部。@22后缀则确保安装的是Angular 22版本的CLI，从而让你使用与所选框架版本匹配的命令行工具。
安装完成后，请进行验证：
ng version
此命令会输出已安装的CLI及相关软件包的详细信息。注意，这里使用的命令不是angular，而是ng——即CLI软件包添加到系统路径中的可执行文件。你以后会频繁使用这个命令：
ng
实用提示：一旦项目创建完成，其 package.json 文件中也会包含 CLI 的本地副本，在项目文件夹内运行 ng 时就会使用这个本地版本。全局安装的主要作用是在还没有项目存在时能够运行 ng new 命令。
第4步：搭建你的第一个应用
进入存放项目的文件夹，例如：
cd Desktop
然后让 CLI 创建一个新的应用：
ng new my-first-angular-app
最后一个参数 my-first-angular-app 将成为项目及文件夹的名称，任何有效的名称均可。ng new 是交互式的，因此可能会询问一些关于项目配置的问题，比如要使用哪种样式表格式。随着 Angular 的发展，提示内容也会发生变化，如果与截图或旧指南中的内容不同，请不必惊讶。
对于第一个项目，选择推荐的默认设置是个明智的决定。当前的默认设置会基于独立 API生成应用程序，并采用稍后将会看到的更简短、现代化的文件命名规则。命令执行完成后，会生成一个新文件夹：
my-first-angular-app/
进入该文件夹：
cd my-first-angular-app
第5步：熟悉生成的文件结构
在编辑器中打开该文件夹。新生成的项目大致如下所示：
my-first-angular-app/
│
├── .vscode/
│
├── node_modules/
│
├── public/
│
├── src/
│ ├── app/
│ │ ├── app.ts
│ │ ├── app.html
│ │ ├── app.css
│ │ └── app.spec.ts
│ │
│ ├── index.html
│ ├── main.ts
│ └── styles.css
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md
以下是其中最重要的文件简介：
src/main.ts是启动应用程序的入口点。src/index.html是浏览器加载的唯一 HTML 页面，Angular 会在此页面中进行渲染。src/styles.css包含了适用于整个应用程序的全局样式。
src/app/ 中包含根组件，该组件被拆分为 app.ts（TypeScript 类）、app.html（其模板）、app.css（该组件专用的样式）以及 app.spec.ts（其单元测试文件）。public/ 目录用于存放直接提供的静态资源。angular.json 用于配置 CLI 如何构建、托管和测试项目。package.json 列出了项目的依赖项及 npm 脚本；node_modules/ 是 npm 安装这些依赖项的位置。tsconfig.json 用于配置 TypeScript 编译器。目前无需理解每个文件的内容，只需知道入口点、根组件及配置文件的所在位置即可开始使用。
第 6 步：启动开发服务器
在项目文件夹内，启动应用程序：
ng serve
命令行工具会编译应用程序并启动本地开发服务器。它还会监控源文件，一旦有文件被修改就会重新构建。构建完成后，你会看到类似如下的输出：
Application bundle generation complete.
Local: http://localhost:4200/
在浏览器中打开该地址：
http://localhost:4200
默认的启动页面应该会显示出来。如果你不想每次都手动输入URL，可以添加--open参数，命令行工具会自动为你打开默认的浏览器：
ng serve --open
如果端口4200已被其他进程占用，你可以使用--port选项选择另一个端口。
第7步：进行修改并观察重新构建过程
为验证整个循环能够正常工作，请编辑根组件的模板：
src/app/app.html
将该文件中的所有内容替换为一小段标记代码：
<h1>Hello Angular 22!</h1>
<p>
My first Angular application is running successfully.
</p>
保存后返回浏览器，页面会自动更新。由于开发服务器会监控文件并在内容变化时重新构建，因此普通的代码编辑无需停止并重启 ng serve。不过，像 angular.json 这样的配置文件发生更改时则需要重启。
显示组件类中的值
静态标记只是其中的一部分。接下来需要扩展模板，使其也能显示来自组件的值。那些双大括号是占位符，Angular会从组件类中填充相应内容：
<div class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<h1>Hello Angular 22!</h1>
<p>
My first Angular application is running successfully.
</p>
</div>
为使这些占位符能够被解析，app.ts中的组件类需要具备相应的属性。@Component装饰器会告知Angular该类是一个组件，同时指定其应渲染到的标签（即app-root，也就是已存在于index.html中的元素），以及其模板和样式的存放位置：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
title = 'My First Angular 22 App';
message = 'Angular project is running successfully!';
}
当两个文件都保存后，页面会在静态内容上方显示来自该类的标题和消息。根据具体的 CLI 版本，生成的 app.ts 可能会略有不同（较新的模板有时会使用信号来传递标题），但出于学习目的，这种普通的类属性依然能实现相同的功能。如果您想在安装任何软件之前进行实验，可以访问 此示例的 StackBlitz 版本，它完全在浏览器中运行。
启动时各组件是如何连接的
对于正在运行的应用，了解从浏览器到模板的路径会很有帮助：
Browser
│
▼
index.html
│
▼
main.ts
│
▼
App Component
│
┌────────┴────────┐
▼ ▼
app.html app.css
(HTML) (CSS)
浏览器加载 index.html。打包后的脚本会运行应用程序的入口点 main.ts，该文件负责初始化根组件。该组件将自身的类与HTML模板及样式结合，将其渲染到 app-root 元素中，此后每当组件的数据发生变化时，Angular就会保持用户界面的同步。这个描述有意简化了实际流程，但能为后续学习内容提供框架。
数据绑定的最小示例
以下是这一概念最简实用的形式。组件类中定义了一个属性：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
title = 'My First Angular App';
}
而模板则引用该属性：
<h1>{{ title }}</h1>
<p>
Welcome to my Angular 22 journey!
</p>
仅两行代码就体现了整个概念。在TypeScript类中有一处属性赋值操作：
title = 'My First Angular App';
在模板中则有一处插值表达式：
{{ title }}
Angular 会从类中读取值并将其插入到渲染的 HTML 中。这就是插值，也是 Angular 数据绑定最简单的形式。如果后续你根据用户输入或服务器返回的数据修改了 title，Angular 会自动为你更新页面。属性绑定、事件绑定和双向绑定都是基于同一原理实现的，值得单独深入探讨。
为何旧教程看起来不同
搜索 Angular 教程，你会很快发现布局不同的项目。较旧的指南通常会展示如下这样的文件结构：
app.component.ts
app.component.html
app.component.css
app.module.ts
而使用当前 CLI 生成的项目则包含：
app.ts
app.html
app.css
而且往往根本不存在 app.module.ts 文件。这些框架多年来发生了巨大变化。现代 Angular 默认使用独立 API：组件会直接声明自身的依赖项，因此新应用很少需要 NgModule 来对它们进行分组。当前的 CLI 会自动生成独立应用，并且直接采用更新、更简短的命名规范。
这并不意味着旧代码就是错误的。许多实际应用仍在使用模块以及较长的 .component.ts 文件名，这两种方式都得到支持。但在学习阶段，混用这两种方法很容易造成混淆。如果教程要求你编辑 app.module.ts，而你的项目中没有该文件，那就说明你使用的是旧风格，此时应寻找对应的独立文件而非手动创建。
总结
Angular CLI 将项目搭建流程简化为简短且可重复的操作。一旦完成一次设置，整个流程如下：
- 安装 Angular 所支持的 Node.js 版本，并验证
node和npm的功能。 - 通过
npm install -g @angular/cli@22安装 CLI，再用ng version确认安装成功。
ng new 创建项目，为首个应用选择独立模块的默认设置。main.ts、index.html、app.* 文件、angular.json 以及 package.json。ng serve（可选地加上 --open 参数），在编辑代码时依靠自动重建功能。NgModule、采用 .component.ts 风格的教程视为旧式方法，并将其转换为独立模块架构。无需在第一天就理解所有生成的文件。重要的是拥有一个可运行的 Angular 22 项目，并知道其主要组件的位置，这是深入学习组件、模板和数据绑定的基础。