创建一个Angular框架学习思维导图,涵盖模块、组件、服务、依赖注入和RxJS响应式编程。

本页展示的是根据相同需求生成的 Markdown 思维导图缓存,可直接进入应用继续编辑和导出 XMind。

缓存标识:a5fc93fb5244ac72f4437b5d2391a58f 更新时间:2025-12-18 21:58

Angular 框架学习思维导图

模块

定义与作用

根模块

特性模块

核心模块

共享模块

装饰器

@NgModule

declarations

imports

exports

providers

bootstrap

模块组织策略

按功能划分

按业务领域划分

懒加载模块

组件

组件基础

组件装饰器

@Component
selector
templateUrl/template
styleUrls/styles

组件生命周期钩子

ngOnInit
ngOnChanges
ngOnDestroy
其他钩子

数据绑定

插值表达式

属性绑定

事件绑定

双向绑定

模板语法

结构型指令

*ngIf
*ngFor
*ngSwitch

属性型指令

ngClass
ngStyle

管道

内置管道
自定义管道

组件通信

输入属性

输出属性

视图子组件

内容子组件

服务通信

服务

服务概念

单一职责原则

可注入性

创建与使用

@Injectable 装饰器

提供方式

根注入器
模块级
组件级

常用内置服务

HttpClient

Router

FormBuilder

依赖注入

DI 原理

注入器层次结构

提供者查找机制

提供者配置

类提供者

值提供者

工厂提供者

别名提供者

注入方式

构造函数注入

可选依赖

多级注入器

RxJS 响应式编程

核心概念

Observable

Observer

Subscription

Operators

Subject

创建操作

of

from

interval

fromEvent

转换操作

map

pluck

switchMap

mergeMap

concatMap

过滤操作

filter

take

debounceTime

distinctUntilChanged

组合操作

combineLatest

forkJoin

merge

concat

错误处理

catchError

retry

retryWhen

工具操作

tap

delay

finalize

如何在应用内使用?

点击上方按钮将跳转至主应用并自动载入这份 Markdown,你可以继续修改结构并导出为 XMind。也可以复制地址 index.html?hash=a5fc93fb5244ac72f4437b5d2391a58f 分享给团队成员快速进入编辑。

💡 提示:我们为这个案例创建了优化版页面,包含更详细的背景说明和 SEO 优化,点击查看