第1章 Angular基础

第 1 章 · Angular 基础

章节摘要：在动手写第一行 Angular 代码之前，本章回答三个问题——Angular 在前端框架谱系里处于什么位置、它为什么要用一整套"重"的工程化设施来换长期可维护性、以及一个 Angular 应用从命令行敲下到浏览器画出界面之间发生了什么。全册以变更检测为主线，本章则先造好"承载这台发动机的车"：环境、结构与类型系统。

学习目标

读完本章你应当能够：

1. 说出 Angular 与 React、Vue 在框架哲学上的三点本质差异，并解释这些差异如何影响团队选型。
2. 独立完成 Angular CLI 的安装，创建项目并解释生成目录中每个部分的职责。
3. 描述从 main 引导文件到根组件渲染之间的启动链路，指出 Zone.js 在链路里挂载的位置。
4. 用 TypeScript 的接口、泛型与联合类型约束一个数据模型，并说明模板类型检查为何依赖这套类型。
5. 解释"变更检测"这个词在本册语境下的初步含义：框架如何知道数据变了、又如何决定更新屏幕。

核心概念速览

一句话概括本章：Angular 的"重"不是负担，是为十年期大型应用预付的工程保险。

子章节导航

1.1 Angular 框架概述与变更检测初遇：Angular 的前世今生、它与其他框架的哲学差异，以及第一次目睹变更检测工作的小实验。本节建立全册的心智坐标系。

1.2 开发环境搭建与第一个组件：Node、CLI、项目创建、开发服务器，以及第一个会"响应数据变化"的组件。所有后续代码的前提。

1.3 项目结构与启动流程：逐个目录与文件讲职责，追踪从引导文件到浏览器渲染的完整链路。看懂这节，报错时你才知道去哪找。

1.4 TypeScript 基础与类型驱动开发：接口、泛型、联合类型、可空类型，以及它们如何被 Angular 模板类型检查消费。写 Angular 不写类型，等于放弃了它一半的价值。

子章节之间的逻辑关系

四节的推进逻辑是"认识 → 装备 → 解剖 → 武装"：先在 1.1 建立观点，1.2 把环境跑起来获得实验场，1.3 解剖项目看清骨架，1.4 用类型系统把骨架上的数据流约束住。

1.1 心智模型 ──→ 1.2 环境与首组件 ──→ 1.3 结构与启动链路 ──→ 1.4 类型驱动
   为什么是它        在哪里做实验          车架长什么样          给车架加护栏
        └────────────── 共同指向第 2 章: 组件 = 变更检测的执行单元 ──────────────┘
​

可考核知识点清单

本章结业以"能不能独立复现"为准，五个考核点全部可以在本机验证：

前置知识与后续延伸

前置：HTML、CSS、JavaScript 基本语法，了解命令行操作。不要求写过其他框架——写过反而要小心"映射思维"，Angular 的组件通信与服务体系和 React Hooks、Vue 组合式 API 都不构成一一对应。

延伸：本章结束时你会得到一个能跑的项目与一套类型化的数据模型，它们是第 2 章全部内容的实验材料。第 2 章将把组件正式定义为"变更检测的执行单元"，并逐层展开模块、服务、绑定、指令、管道、路由、表单、HTTP 与状态管理。