本章目标：完成完整的Angular开发环境搭建，创建并运行第一个Angular应用。
环境要求
在开始安装Angular之前，请确保您的系统满足以下最低要求：
| 组件 | 要求 | 说明 |
|---|---|---|
| Node.js | v16.x 或 v18.x | Angular CLI运行环境 |
| npm | 8.x 或更高 | Node.js包管理器 |
| 操作系统 | Windows 10+, macOS 10.15+, Linux | 支持主流操作系统 |
| 内存 | 4GB+ RAM（推荐8GB） | 确保流畅的开发体验 |
| 磁盘空间 | 至少2GB可用空间 | 用于安装依赖和开发工具 |
1安装Node.js和npm
Node.js是Angular CLI的运行环境，npm是Node.js的包管理器。
Windows安装
- 访问 nodejs.org
- 下载LTS版本（长期支持版）
- 运行安装程序，使用默认配置
- 确保勾选"Add to PATH"选项
- 安装完成后重启命令行工具
macOS安装
方法一：使用安装包
- 从官网下载macOS安装包
- 运行.pkg安装文件
- 按照向导完成安装
方法二：使用Homebrew
$
brew install node
验证安装
安装完成后，打开终端/命令提示符，运行以下命令验证安装：
$
node --version
# 应显示 v16.x.x 或 v18.x.x
$
npm --version
# 应显示 8.x.x 或更高版本
注意：如果您之前安装过旧版本，建议先卸载旧版本再安装新版本。
2安装Angular CLI
Angular CLI是官方的命令行工具，用于创建、开发、构建和维护Angular应用。
$
npm install -g @angular/cli
# -g 表示全局安装，使cli命令在所有目录可用
验证Angular CLI安装
$
ng version
成功安装后，您应该看到类似如下的输出：
Angular CLI: 16.2.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: darwin x64
常见安装问题解决
解决方案：
- Windows：以管理员身份运行命令提示符
- macOS/Linux：使用sudo或修复npm权限
$ sudo npm install -g @angular/cli
解决方案：检查系统PATH环境变量是否包含npm全局安装路径
$
npm config get prefix
# 将输出路径添加到系统PATH中
3创建第一个Angular应用
使用Angular CLI创建一个新的Angular项目。
$
ng new my-first-app
CLI会询问一些配置选项：
?
Would you like to add Angular routing? (y/N)
# 输入 y 启用路由功能
?
Which stylesheet format would you like to use? (Use arrow keys)
# 选择 CSS（默认）或 SCSS/Less 等预处理器
项目创建过程说明
CLI会自动完成以下工作：
- 创建项目文件夹结构
- 安装所有必需的npm依赖包
- 配置TypeScript编译器
- 设置开发服务器
- 生成初始应用代码
提示：首次创建项目可能会花费几分钟时间，因为需要下载大量依赖包。
4运行开发服务器
进入项目目录并启动开发服务器：
$
cd my-first-app
$
ng serve --open
ng serve命令会：
- 启动开发服务器
- 编译TypeScript代码
- 启用热重载（代码修改后自动刷新）
--open参数会自动在浏览器中打开应用
在浏览器中访问 http://localhost:4200，您应该看到：
Angular应用的默认欢迎页面
项目结构解析
了解Angular项目的标准目录结构：
my-first-app/
├── src/ # 源代码目录
│ ├── app/ # 应用主模块和组件
│ │ ├── app.component.ts # 根组件
│ │ ├── app.component.html # 根组件模板
│ │ └── app.module.ts # 根模块
│ ├── assets/ # 静态资源（图片、字体等）
│ ├── environments/ # 环境配置
│ ├── index.html # 主HTML文件
│ ├── main.ts # 应用入口点
│ └── styles.css # 全局样式
├── angular.json # Angular CLI配置
├── package.json # npm依赖配置
├── tsconfig.json # TypeScript配置
└── README.md # 项目说明文档
常用CLI命令速查
项目相关
$
ng new project-name
# 创建新项目
$
ng serve
# 启动开发服务器
$
ng build
# 构建生产版本
代码生成
$
ng generate component my-component
# 生成组件
$
ng generate service my-service
# 生成服务
$
ng generate module my-module
# 生成模块
推荐的开发工具
Visual Studio Code
微软开发的轻量级编辑器，有优秀的Angular插件支持
- Angular Language Service
- TypeScript支持
- 集成终端
Chrome开发者工具
Angular DevTools扩展提供组件树检查、性能分析
- 组件树查看器
- 变更检测分析
- 性能分析工具
Git版本控制
代码版本管理，Angular CLI自动初始化Git仓库
- 代码版本管理
- 团队协作
- 部署自动化
环境验证检查清单
环境搭建完成！
恭喜！您已经成功搭建了Angular开发环境。现在可以开始学习Angular的核心概念和开发技巧了。