使用Angular2及WebApi开发SPA类型的企业应用 - Part 3 项目结构

使用Angular2及WebApi开发SPA类型的企业应用 - Part 3 项目结构
作者：techcoaching，翻译：飘落寒冰
原文 有道
注：第一次翻译文章，有错译之处还请多多包涵，欢迎指出以便改进。

本文将介绍如何组织项目文件
从Github上下载源码

该系列的全部文章

1. 概览
2. 添加新角色
3. 项目结构
4. 多语言
5. 依赖注入和控制反转-为什么和为什么不?
6. RESTful & WebApi
7. 应用生命周期管理
8. 应用构建与部署

简介

本文中，我们将学习如何组织管理我们应用的项目文件

假设我们的app有以下的功能：

本图当中：
- 本App有三大功能：权限管理，HRM，CRM。我们通常称他们为模块。所以本App中有三个模块：权限管理模块，HRM模块，CRM模块。
- 每个模块应当与其他模块隔离开。例如：权限管理模块不应当有职员管理
- 每个模块也应当不依赖于其他模块。
- 模块之间应当使用事件相互通信。例如：Security模块如果需要调用HRM模块的方法。Security模块应当广播一个事件，HRM模块订阅并处理该事件。这种方式能帮助我们减少app的复杂度，让功能易于维护。
- 每个大的功能都包含一些子功能，例如Security包含Permission，User Role, User, …
- 每个子功能（如Permission）可以通过单页或者多页来实现（如Permission列表,创建Permission，更新Permission，…）

项目结构

项目结构如下：

上图所示：
- 每个模块都有自己的路由，菜单项，…”/app/modules//_share/config/module.ts”中规定了这部分信息。
- 每个模块以及他们的子模块都被分配到单独的目录下： /app/modules/。
- 模块的子功能都有对应的文件夹（如permission子功能对应permission文件夹为，包含该功能详细的实现（如Permission列表,创建Permission，更新Permission），这样做有助于管理和维护代码。
- 子功能所调用的Service类（如permissionService ）应当放在相应模块的“_share/services”目录中，如permissionService不仅会被子功能内部调用，也会被同一模块下的其他子功能调用（如usergroup, user）。
- 任何子功能所能使用的指令，应当放到“_shared/directives”目录下。如：“permissions”指令可以被Permission下的User子功能使用。
- 如果该指令放到“/app/security/directives”下，在User子功能中，我们需要复制或者导入该指令到子功能中（这样会使User和Permission子功能相互依赖），不推荐这样做。
- 如果该指令存放于”/app/common/directives”，指令目录下的文件会非常多，并且大多数指令只会被一个模块用到。
- 当我们想在模块中通知其他模块时，我们可以触发一个事件。

let eventManager = window.ioc.resolve("IEventManager");eventManager.publish("<event-key>", <event argument>);

• 多语言支持（i18n）相关的资源文件存放于”/app/resources/locales/..json”（如： security.en.json 或 security.vn.json 文件中）。
  
  • 每个模块针对一种语言只能有一个资源文件
  • 模块下所有的子功能将必须使用文件中的词条并按如下格式定义“...”。举例来说：”security.permission.permissions.pageTitle”会返回权限模块Permission子功能对应的Permission组件的所使用的PageTitle

HRM, CRM 模块也使用了相同的规则。

授权

本文，以及所包含的源码，文件遵循CPOL协议