Angular 架构总览
本章节从整体视角介绍润典技术架构平台在 前端 Angular 端 的定位与设计思路，帮助你在阅读后续章节前，先在脑中建立一张「全景图」。
平台愿景：让前端也有“技术底座”
在后端，你已经熟悉了：
- 统一的 组件库与基础服务（缓存、消息、网关、监控等）
- 清晰的 分层架构 与统一的
ResultVO/Page协议
前端部分的目标是一致的：
为企业级 Web / 客户端应用提供一套 可复用、可迭代、可治理 的 Angular 架构与基础库，
让每一个新项目都站在同一套技术底座之上快速起步，而不是从零「再搭一遍脚手架」。
具体落地为两块：
- 一个通用的 Angular 基础库：
@rydeen/angular-framework - 一套基于该库的应用骨架示例：
cross-platform-app（跨平台应用 Demo）
本目录下的文档就是围绕这两者展开的。
核心设计原则
整个 Angular 端的设计遵循几条简单但很重要的原则：
-
统一入口，集中治理
- HTTP 请求统一走
AbstractService，方便加加密、防重复提交、埋点、限流等横切逻辑。 - 页面统一继承
AbstractAppPage，便于集中处理导航、消息提示、事件订阅等行为。
- HTTP 请求统一走
-
模块化 + 高内聚
- 代码严格区分
core / shared / features三个层次：core：应用级基础设施（数据库、国际化、事件、路由、Url 等）。shared：跨模块复用的组件、抽象基类和类型。features：真正的业务模块（home/menu/users…），内部自成一体。
- 代码严格区分
-
与后端保持同构思维
- 使用与 Java 端完全一致的
ResultVO<T>、Page<T>类型。 - Service 分层、事件总线、锁工具等均大量借鉴后端架构经验，方便前后端协作与迁移。
- 使用与 Java 端完全一致的
文档阅读路线建议
如果你是第一次接触这个前端架构，建议按以下顺序阅读：
-
快速开始：
快速开始与集成- 如何安装
@rydeen/angular-framework，在自己的 Angular 项目中接入。 - 一个完整的小示例：从传统 HttpClient 调用迁移到
AbstractService + AbstractAppPage的写法。
- 如何安装
-
整体结构与分层思想：
模块划分与分层结构- 结合
cross-platform-app实际工程，讲清core / shared / features各自的职责和边界。 - 对比常见 Vue3 项目目录，让你快速建立「老项目 → 新架构」的对应关系。
- 结合
-
核心能力：
抽象服务（AbstractService）、页面基类、事件总线与消息、存储与并发锁工具- 这几篇分别解释：
- HTTP 调用如何统一、如何对接 Java 的 ResultVO 协议；
- 页面为何要继承统一基类，事件/消息如何收敛；
- 如何用事件总线和锁工具处理复杂场景。
- 这几篇分别解释：
-
与传统前端开发的对比：
与传统 Angular 开发模式的对比- 从「目录结构、状态管理、Service 写法、页面写法」多个维度对照传统项目，帮你判断哪些老习惯可以保留，哪些地方值得逐步迁移。
-
最佳实践：
UI 与性能最佳实践（可在熟悉骨架后再看）- 针对大屏、复杂列表、动画等场景的具体建议。
适用场景与边界
这套 Angular 架构尤其适合：
- 中大规模的业务系统：后台、运营平台、门店收银/点餐等。
- 前后端团队都在使用润典技术栈，希望在 规范、错误处理、日志与监控 上统一口径的项目。
对于非常小的 Demo 或一次性页面，你仍然可以只用 Angular 自带的最简结构；
当项目进入「需要长期演进、多人协作」阶段时，再逐步引入这里的建议，会有更明显收益。
带着这张总览图，再去看后面的每一章，你会更容易把具体细节拼回到整体架构里。