1.2 开发环境搭建与第一个组件

1.2 开发环境搭建与第一个组件

开发环境搭建是 Angular 实战的第一步：安装 Node 与 Angular CLI，创建项目，启动开发服务器，再手写第一个会响应数据变化的组件。本节的定位是给全册准备好实验场——后面每一章的代码都在这个环境里运行。

承接上一节对变更检测的初识：我们已经知道屏幕更新是框架在异步事件后检查绑定的结果，这一节把实验台搭起来，亲手触发几次变更检测并观察它的节流特征。

承接与目标

上一节只是隔着玻璃看了一眼变更检测，这一节把它请到你的电脑上；动手完成下面几件事，本节就算过关：

1. 完成 Node.js 与 Angular CLI 的安装，并验证版本。
2. 用 CLI 创建项目，解释交互式提示中样式与 SSR 选项的影响。
3. 启动开发服务器，理解热更新与完整重载的差别。
4. 手写一个订单状态组件，在浏览器里观察插值与事件绑定如何驱动界面更新。

一、装备清单与安装

Angular 的工具链核心只有一个命令行工具。需要的装备：

• Node.js：建议 LTS 版本，Angular 每个主版本对 Node 版本有明确要求，版本过低时 CLI 会直接拒绝创建项目；
• 包管理器：npm 随 Node 附带，国内网络环境可换用镜像源；
• 编辑器：任意，但推荐带 Angular 语言服务的插件，后面第 4 章会专门讲它。

安装与验证过程：

# 第一步：确认 Node 版本（Angular 当代版本要求 18 以上）
node -v
# 输出示例：v20.11.0

# 第二步：全局安装 Angular CLI
npm install -g @angular/cli

# 第三步：验证安装
ng version
# 输出会列出 Angular CLI 版本、Node 版本等，能正常打印即成功
​

⚠️ 常见坑：Windows 下如果 ng version 报"无法识别"，通常是 npm 全局目录不在 PATH 里。另注意别把项目建在含特殊字符或中文空格混合的深层目录，某些旧版工具链处理不佳。

二、创建项目

# 创建项目，--skip-git 可跳过 git 初始化
ng new order-dashboard --style=scss --ssr=false
# --style 决定默认样式预处理语言：scss / css / less
# --ssr=false 表示暂不启用服务端渲染，第 3 章会专门开启对比

# 进入目录并启动开发服务器
cd order-dashboard
ng serve --open
# --open 会自动打开浏览器，默认地址为本机 4200 端口
​

CLI 生成的不只是几行代码，而是一整套工程：构建配置、代码规范检查、单元测试跑批、路由、样式方案全部就位。这就是上一节说的"强约定"落到实处的样子——团队里每个人 ng new 出来的骨架完全一致。

开发服务器有两种更新方式值得区分：改了组件的 TypeScript 代码，CLI 会做热替换或整页刷新；只改样式，则尽量做局部热更新不刷新页面。观察一个细节：整页刷新后 Zone.js 重新打补丁，而热替换只重建受影响的组件，控制台里的启动日志条数不同。

三、手写第一个组件：订单状态卡

项目里 ng generate component orders/status-card 可以生成骨架，但我们手写一遍，把每个部分看清楚。业务场景：仓库管理页有一张订单状态卡，显示订单号与状态，点击按钮模拟状态流转。

// 订单状态卡组件：现代 standalone 写法，无需在模块里 declarations
import { Component } from '@angular/core';

@Component({
  selector: 'app-status-card',
  template: `
    <div class="card">
      <!-- 属性绑定：中括号语法，把组件数据传给 DOM 属性或子组件输入 -->
      <h3 [class.done]="status === '已完成'">订单 {{ orderNo }}</h3>

      <!-- 插值：变更检测时重算的表达式 -->
      <p>当前状态：{{ status }}</p>

      <!-- 事件绑定：小括号语法，点击进入回调，回调里的赋值将触发下一轮变更检测 -->
      <button (click)="advance()">{{ status === '已完成' ? '重置' : '推进状态' }}</button>
    </div>
  `,
  styles: [`
    .card { border: 1px solid #ccc; padding: 12px; border-radius: 8px; width: 260px; }
    .done h3 { color: #2c8a5b; }
  `]
})
export class StatusCardComponent {
  orderNo = 'A-1024';
  status: '待支付' | '已付款' | '已发货' | '已完成' = '待支付';

  advance() {
    // 状态机式流转：每点一次前进一步，到头则重置
    const flow = ['待支付', '已付款', '已发货', '已完成'] as const;
    const idx = flow.indexOf(this.status);
    this.status = idx === flow.length - 1 ? flow[0] : flow[idx + 1];
  }
}
​

在应用根组件的模板里放一行 <app-status-card></app-status-card>，浏览器里就能看到效果。连点几次按钮，状态从"待支付"一路走到"已完成"再回卷。

背景：这是一个真实场景的缩影——电商后台几乎每个页面都有状态流转展示。
操作：把上面的组件代码落进项目，替换根组件模板中的占位标签。
结果：每次点击，status 变化，插值与按钮文案、标题的颜色类同步更新。
解读：一次点击等于一轮"回调改数据 → Zone.js 通知 → 框架检查绑定 → DOM 差异更新"的完整循环。你在回调里赋值了三次也没关系，检查只发生在回调结束之后。
变式：把 advance 改成用 setInterval 每 1000 毫秒自动推进，观察定时器同样能触发界面更新——因为 Zone.js 也拦截了计时器。这就解释了为什么第三方脚本里随手一个 setTimeout 都可能引发一轮检查，性能话题由此埋下伏笔。

四、常见安装与环境问题速查

💡 一个建议：初学阶段尽量别动 CLI 生成的构建配置。Angular 的构建链（含差分加载与预编译）配置项很多，等第 4 章讲工具时再逐个认识。

本节要点回顾

• 工具链：Node LTS + Angular CLI 是全部前置装备，ng version 验证安装。
• 脚手架即规范：ng new 生成的工程骨架统一了构建、测试、规范检查，是团队协作的地基。
• 两种绑定语法：中括号传数据、小括号接事件，插值是绑定的简写形式，它们都是变更检测的采样点。
• 实验结论：事件回调与定时器结束后框架都会执行检查，赋值次数不影响检查次数。
• 伏笔：第三方脚本的定时器也会唤醒变更检测，这既是便利也是隐患，第 3 章细说。

环境就绪，下一节解剖这个项目的目录与启动链路。