- 入门
介绍 体系结构 升级到 18.0 版本
- 开发
新增页面 新增业务组件 和服务端进行交互 使用第三方类库 构建和发布 升级脚手架 全局配置项 如何开始 服务端渲染(SSR)
- 进阶
主题系统 图表 国际化 用户认证 ACL Mock 缓存 优化 编码规范建议
- 其他
命令行工具 常见问题 模块注册指导原则 贡献指南 更新日志
NG-YUNZAI 目标是提供更多通用性业务模块,让开发者更加专注于业务。所以在你着手开始开发前,有必要了解整个 NG-YUNZAI 的体系结构,从整体上了解 NG-YUNZAI 包含了哪些东西及其含义,才能更好的利用这些业务组件库快速构建项目。
类库 | 文档 | 描述 |
---|---|---|
@yelon/theme | 文档 | 主题系统除了包含 NG-YUNZAI 基础框架及所需样式(包含CSS工具集,一套类似Bootstrap)以外,还包含一些通用的数据渲染(Pipe)、服务工具类(页面标题、滚动条等)的集合,这些是日常必不可少的一些组成 |
@yelon/abc | 文档 | 脚手架内提供了一套默认业务组件,这些组件抽象了控制台业务中的一些常见区块。我们将持续维护和迭代这些组件,为中后台业务提供比 Ant Design 基础组件更高级别的抽象 |
@yelon/chart | 文档 | 基于 G2 的基础上二次封装,提供了业务中常用的图表套件,可以单独使用,也可以组合起来实现复杂的展示效果 |
@yelon/form | 文档 | 基于 JSON Schema 标准的动态构建表单 |
@yelon/auth | 文档 | 用户认证模块,用于解决如何获取、存取、使用这三个步骤的用户认证环节 |
@yelon/acl | 文档 | 访问控制列表,是一种非常简单的基于角色权限控制,甚至达到控制某个按钮显隐的粒度 |
@yelon/cache | 文档 | 将字典、城市数据等缓存至内存或持久化当中,有效减少 Http 请求 |
@yelon/mock | 文档 | Mock 会拦截 Angular Http 请求并返回测试数据,当后端未完成接口时 Mock 技术是一项不会影响前端开发进度的工具 |
@yelon/util | 文档 | 包含数组、延迟、字符串、日期、校验等常见工具集 |
@yelon/testing | - | 常用测试套件 |
CLI Schematics | 文档 | 快速生成统一的模板、可插拔的插件等 |
当使用 ng add ng-yunzai
生成后的 NG-YUNZAI 脚手架,它的基本目录结构概略图如下:
├── _mock # Mock 数据规则目录
├── angular.json # Angular 项目配置文件
├── src
│ ├── app
│ │ ├── core # 核心
│ │ │ ├── i18n
│ │ │ ├── net
│ │ │ │ └── default.interceptor.ts # 默认HTTP拦截器
│ │ │ ├── services
│ │ │ │ └── startup.service.ts # 初始化项目配置
│ │ │ └── index.ts # 核心导出
│ │ ├── layout # 通用布局
│ │ ├── routes
│ │ │ ├── ** # 业务目录
│ │ │ └── routes.ts # 业务路由
│ │ ├── shared # 共享
│ │ │ ├── shared-imports.ts # 一些高频率共享组件的集合
│ │ │ └── index.ts # 共享导出
│ │ ├── app.component.ts # 根组件
│ │ └── app.config.ts # 全局配置项
│ ├── assets # 本地静态资源
│ ├── environments # 环境变量配置
│ ├── styles # 样式目录
└── └── style.less # 样式引导入口
以下是针对各个目录及文件说明及使用目的:
名称 | 描述 |
---|---|
angular.json | Angular 工作区及项目的配置文件,参考Angular文档 |
_mock | Mock 数据规则目录,若你通过 命令行工具 创建项目时可以指定 --mock 参数决定是否需要 Mock 功能 |
src/app/core/index.ts | 一些核心业务服务(例如:消息、数据访问等) |
src/app/core/i18n | 国际化数据加载及处理相关类,若你通过 命令行工具 创建项目时可以指定 -di 参数决定是否需要国际化支持 |
src/app/core/net | 默认拦截器,你可以在这里统一处理请求参数、请求异常、业务异常等动作 |
src/app/core/startup/startup.service.ts | 当你需要在 Angular 启动前执行一些远程数据(例如:应用信息、用户信息等)时非常有用 |
src/app/layout | 布局目录,包含基础布局、空白布局、用户登录布局 |
src/app/routes | 业务模块,你的所有业务代码都将在这里 |
src/app/shared/index.ts | 一些高频率共享组件的集合,指当你需要针对整个业务模块都需要使用的一些第三方模块、自定义组件、自定义指令,都应该存在这里。除此之外,针对 @yelon & NG-ZORRO 分别构建了 shared-yelon.module.ts 、shared-zorro.module.ts 两种次级共享模块的导入。 |
src/app/app.config.ts | 项目全局配置项 |
src/environments | 应用环境变量,包含以下值:SERVER_URL 所有HTTP请求的前缀;production 是否生产环境;useHash 路由是否useHash模式 |