04_开发环境搭建与工程初始化

第二部分：Angular v20 基础语法与核心概念

Angular 的学习之旅始于环境搭建与工程结构认知。一个规范的开发环境和清晰的项目结构是高效开发的基础，尤其是在团队协作场景中。本章将详细介绍 Angular v20 的环境配置流程、项目创建方法以及核心工程结构解析，帮助你快速迈入 Angular 开发的大门。

开发环境搭建与工程初始化

在开始编写 Angular 代码之前，我们需要先配置好开发环境并创建第一个项目。Angular 对开发环境有明确的依赖要求，同时提供了强大的 CLI 工具简化项目管理流程。本节将从环境准备到项目启动，完整演示 Angular v20 的初始化过程。

1. 环境配置：Node.js、Angular CLI v20 安装

Angular 基于 TypeScript 开发，其构建和运行依赖 Node.js 环境，而 Angular CLI（命令行工具）则是项目创建、开发、构建的核心工具。以下是详细的安装步骤：

1.1 安装 Node.js

Angular v20 要求 Node.js 版本为 18.13.0 或更高（推荐 20.x LTS 版本）。Node.js 内置了 npm（包管理工具），用于安装 Angular CLI 及项目依赖。

下载与安装：
访问 Node.js 官网（https://nodejs.org/），选择 "LTS" 版本下载（推荐 20.x 版本），根据操作系统（Windows/macOS/Linux）选择对应的安装包。
- Windows：运行 .msi 安装文件，勾选 "Add to PATH" 选项（自动配置环境变量）。
- macOS：使用 .pkg 安装文件，或通过 Homebrew 安装：brew install node@20。
- Linux：通过包管理器安装，如 Ubuntu 可使用 sudo apt install nodejs npm（需确保版本符合要求）。
验证安装：
安装完成后，打开终端（命令提示符），输入以下命令检查版本：
```
node -v   # 输出 Node.js 版本，如 v20.10.0
npm -v    # 输出 npm 版本，如 10.2.3
```
若命令无法识别，需检查环境变量配置是否正确。
可选：使用 nvm 管理 Node 版本
对于需要同时开发多个项目的开发者，推荐使用 Node Version Manager（nvm）灵活切换 Node 版本：
- 安装 nvm（参考 https://github.com/nvm-sh/nvm）
- 安装指定版本：nvm install 20
- 切换版本：nvm use 20

1.2 安装 Angular CLI v20

Angular CLI 是 Angular 官方提供的命令行工具，支持项目创建、组件生成、开发服务器、构建打包等全流程操作。安装命令如下：

# 全局安装 Angular CLI（使用 -g 选项）
npm install -g @angular/cli@20

注意：若安装过程中出现权限错误（如 Linux/macOS 下的 EACCES），可使用 sudo npm install -g @angular/cli@20（不推荐），或配置 npm 全局目录权限（推荐）。

安装完成后，验证 CLI 版本：

ng version

成功安装后，终端将显示 Angular CLI 版本（如 20.0.0）及相关依赖信息（Node.js 版本、TypeScript 版本等）。若出现 "ng: command not found"，需检查 npm 全局目录是否已添加到系统 PATH。

2. 项目创建实战

Angular CLI 提供了 ng new 命令快速创建标准化项目，支持多种配置选项。根据是否需要 Zone.js，可创建两种类型的项目：

2.1 标准项目（带 Zone.js）

标准项目保留了传统的 Zone.js 依赖，适合需要兼容旧有代码或依赖 Zone.js 特定特性的场景。创建命令如下：

# 创建名为 my-app 的标准项目
ng new my-app

执行命令后，CLI 会提示进行几项配置：

Would you like to add Angular routing?（是否添加路由模块）
建议选择 Yes（输入 y），路由模块用于管理页面跳转，是单页应用的核心组件。
Which stylesheet format would you like to use?（选择样式表格式）
可选：CSS、SCSS、SASS、LESS、Stylus。推荐选择 SCSS（带分号和花括号的 SASS 语法），支持变量、嵌套等高级特性。

选择完成后，CLI 将自动执行以下操作：

创建项目目录结构
安装核心依赖（@angular/core、@angular/common 等）
初始化 Git 仓库（可选，默认创建）
生成基础配置文件

等待安装完成（根据网络速度，可能需要 1-5 分钟），进入项目目录并启动开发服务器：

cd my-app       # 进入项目目录
ng serve        # 启动开发服务器

ng serve 命令会启动一个本地开发服务器（默认端口 4200），并开启热重载（修改代码后自动刷新页面）。打开浏览器访问 http://localhost:4200，若看到 Angular 欢迎页面，说明项目创建成功。

2.2 无 Zone.js 项目（v20 新特性）

Angular v20 支持完全移除 Zone.js 依赖，通过 --zoneless 选项创建轻量项目：

# 创建无 Zone.js 的项目
ng new my-zoneless-app --zoneless

该命令的配置选项与标准项目相同（路由和样式表选择），但生成的项目会：

移除 zone.js 依赖
启用 provideZonelessChangeDetection() 变更检测策略
默认使用 Signals 作为响应式数据方案

启动项目的命令与标准项目一致：

cd my-zoneless-app
ng serve --open  # --open 选项会自动打开浏览器

无 Zone.js 项目的启动速度更快（约减少 50% 启动时间），内存占用更低，适合追求极致性能的新项目。

注意：部分第三方库可能依赖 Zone.js，若迁移旧项目到无 Zone.js 模式，需先检查依赖兼容性。

3. 工程结构解析

Angular 项目采用模块化、规范化的目录结构，便于团队协作和长期维护。以下是核心文件和目录的详细说明：

3.1 根目录核心文件

项目根目录下的关键文件：

package.json：定义项目依赖和脚本命令
- dependencies：运行时依赖（如 @angular/core、rxjs）
- devDependencies：开发时依赖（如 @angular/cli、typescript）
- scripts：可执行脚本（ng serve 对应 npm start）
angular.json：Angular 项目的核心配置文件，包含：
- 项目名称和根目录
- 构建、测试、部署的配置（如输出路径、环境变量）
- 依赖的第三方库（assets、styles）
- 开发服务器配置（端口、代理）
tsconfig.json：TypeScript 编译配置，定义：
- 目标 JS 版本（target）
- 模块系统（module）
- 类型检查严格程度（strict）
.gitignore：指定 Git 忽略的文件（如 node_modules、编译产物）

3.2 src 目录结构

src 目录是源代码的主要存放位置，也是开发者日常工作的核心目录：

src/
├── app/                  # 应用核心代码
│   ├── app.component.ts  # 根组件类
│   ├── app.component.html# 根组件模板
│   ├── app.component.scss# 根组件样式
│   ├── app.module.ts     # 根模块（标准项目）/ app.component.spec.ts 测试文件
│   └── app-routing.module.ts # 路由模块（若创建时选择了路由）
├── assets/               # 静态资源（图片、字体等），构建时会原样复制到输出目录
├── environments/         # 环境配置
│   ├── environment.ts    # 开发环境配置
│   └── environment.prod.ts # 生产环境配置（如 API 地址）
├── favicon.ico           # 网站图标
├── index.html            # 主 HTML 文件，应用入口
├── main.ts               # 应用入口脚本，启动 Angular 应用
└── styles.scss           # 全局样式，作用于整个应用

关键目录说明：

app 目录：包含应用的组件、模块、服务等核心代码。每个组件通常由三个文件组成：
- .ts：组件类，定义数据和行为
- .html：模板文件，定义组件的 UI 结构
- .scss：样式文件，定义组件的样式（默认只作用于当前组件）
environments 目录：用于区分不同环境的配置（如开发/生产环境的 API 地址）。通过 ng build --configuration production 可指定使用生产环境配置。
index.html：应用的主 HTML 模板，Angular 会将根组件渲染到 <app-root></app-root> 标签中。

main.ts：应用的启动入口，通过 bootstrapApplication 函数启动应用：

// 标准项目（带模块）
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

// 无 Zone.js 项目（独立组件）
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()]
}).catch(err => console.error(err));

3.3 angular.json 核心配置解析

angular.json 是 Angular 项目的"总配置文件"，控制项目的构建、测试、运行等行为。以下是需要重点关注的配置项：

{
  "projects": {
    "my-app": {  // 项目名称
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",  // 构建输出目录
            "index": "src/index.html",    // 主 HTML 文件路径
            "main": "src/main.ts",        // 入口脚本路径
            "styles": ["src/styles.scss"], // 全局样式文件
            "assets": ["src/favicon.ico", "src/assets"] // 静态资源
          },
          "configurations": {
            "production": {  // 生产环境构建配置
              "budgets": [{  // 资源大小限制
                "type": "initial",
                "maximumWarning": "500kb",
                "maximumError": "1mb"
              }]
            }
          }
        },
        "serve": {  // 开发服务器配置
          "options": {
            "port": 4200,   // 默认端口
            "open": false   // 是否自动打开浏览器
          }
        }
      }
    }
  }
}

常用配置修改场景：

更改开发服务器端口：修改 serve.options.port
添加全局样式/脚本：在 build.options.styles 或 scripts 中添加文件路径
配置 API 代理（解决跨域）：在 serve.options.proxyConfig 中指定代理配置文件（如 proxy.conf.json）

通过本章的学习，你已经掌握了 Angular v20 的环境搭建、项目创建和工程结构解析方法。这些基础工作是后续学习组件、服务、路由等核心概念的前提。下一章将深入讲解 Angular 的核心语法，包括模板系统和组件基础。

posted @ 2025-09-21 18:19 S&L·chuck 阅读(14) 评论(0) 收藏举报

刷新页面返回顶部

S&Lchuck

心之所系，吾之所爱