外观
Angular 架构
整体架构概览
Angular 应用采用模块化、组件化的架构设计，各个部分通过清晰的职责分离协同工作。
示意图：
Angular 应用架构
┌─────────────────────────────────────────┐
│ 模块 (Modules) │
│ ┌─────────────────────────────────────┐ │
│ │ 组件树 (Components) │ │
│ │ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ 组件 │ │ 组件 │ │ │
│ │ │ ┌─────────┐ │ │ ┌─────────┐ │ │ │
│ │ │ │ 模板 │ │ │ │ 模板 │ │ │ │
│ │ │ │(HTML) │ │ │ │(HTML) │ │ │ │
│ │ │ └─────────┘ │ │ └─────────┘ │ │ │
│ │ └─────────────┘ └─────────────┘ │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ 服务 (Services) │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ 服务A │ │ 服务B │ │ 服务C │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘模块系统
NgModule 结构
模块是 Angular 应用的组织单元，每个模块声明一组相关的功能。
示意图：
NgModule 构成：
┌─────────────────────────┐
│ NgModule │
├─────────────────────────┤
│ declarations: [组件,...] │
│ imports: [其他模块,...] │
│ providers: [服务,...] │
│ bootstrap: [根组件] │
└─────────────────────────┘模块层次
应用通常包含多个模块，形成层次结构。
示意图：
模块层次：
根模块 (AppModule)
/ \
/ \
功能模块 共享模块
(Feature) (Shared)
| |
组件/服务 通用组件组件架构
组件树结构
Angular 应用通过组件树构建用户界面，每个组件负责特定的视图区域。
示意图：
组件树：
根组件 (AppComponent)
/ \
/ \
头部组件 主体组件
(Header) (Main)
/ \
/ \
侧边栏 内容区
(Sidebar) (Content)组件通信
组件之间通过输入输出属性进行数据传递。
示意图：
组件通信：
父组件 → [输入属性] → 子组件
父组件 ← (输出事件) ← 子组件
示例：
父组件: <app-child [data]="parentData" (notify)="onNotify($event)">
子组件: @Input() data; @Output() notify = new EventEmitter();数据流与绑定
单向数据流
Angular 采用从组件到模板的单向数据流。
示意图：
数据流向：
组件类 → 模板视图
↓
属性更新 → 视图更新
示例：
组件: title = "Hello"
模板: <h1>{{title}}</h1>双向绑定
将属性绑定和事件绑定结合，实现双向数据同步。
示意图：
双向绑定：
组件属性 ↔ 表单输入
示例：
<input [(ngModel)]="userName">
等同于：
<input [ngModel]="userName" (ngModelChange)="userName = $event">服务与依赖注入
服务定位
服务是可注入的类，用于封装业务逻辑和数据访问。
示意图：
服务作用：
┌─────────────┐ 调用 ┌─────────────┐
│ 组件A │ ────────> │ 服务X │
└─────────────┘ └─────────────┘
↑ ↑
│ │
┌─────────────┐ ┌─────────────┐
│ 组件B │ ────────> │ 服务X │
└─────────────┘ └─────────────┘
共享同一服务实例依赖注入层次
Angular 的依赖注入系统具有层次结构，支持不同级别的服务实例。
示意图：
注入层次：
根注入器 (Root)
/ \
/ \
模块级注入器 组件级注入器
(Module) (Component)路由架构
路由配置
通过路由模块定义应用内的导航结构。
示意图：
路由配置：
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'users', component: UserListComponent }
];
路由出口：
<router-outlet>
│
├── 路径 '' → HomeComponent
├── 路径 'about' → AboutComponent
└── 路径 'users' → UserListComponent
</router-outlet>懒加载模块
按需加载功能模块，优化应用性能。
示意图：
懒加载流程：
用户访问路径 → 路由匹配 → 加载对应模块 → 显示组件
配置示例：
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }变更检测
检测策略
Angular 自动检测数据变化并更新视图。
示意图：
变更检测：
数据变化 → 触发检测 → 更新视图
策略对比：
Default 策略: 检查所有组件
OnPush 策略: 仅当输入变化时检查检测机制
Zone.js 监控异步操作，自动触发变更检测。
示意图：
事件循环监控：
用户事件 → Zone.js 捕获 → 变更检测 → 视图更新
定时器 → Zone.js 捕获 → 变更检测 → 视图更新
HTTP请求 → Zone.js 捕获 → 变更检测 → 视图更新