This article need re-translated, hope that your can PR to translated it. Help us!

体系结构

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.jsonAngular 工作区及项目的配置文件,参考Angular文档
_mockMock 数据规则目录,若你通过 命令行工具 创建项目时可以指定 --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.tsshared-zorro.module.ts 两种次级共享模块的导入。
src/app/app.config.ts项目全局配置项
src/environments应用环境变量,包含以下值:SERVER_URL 所有HTTP请求的前缀;production 是否生产环境;useHash 路由是否useHash模式
Loading...