Angular2 & WebApi(SPA) 用于企业应用 - 第 3 部分 - 项目结构

• 从Github下载源代码

系列中的其他文章

1. 概述
2. 添加新权限
3. 项目结构
4. 多语言 (i18n)
5. DI & IoC - 为什么以及为什么不？
6. RESTful & WebApi
7. 管理应用生命周期
8. 构建和部署应用
9. TinyERP新版本（使用Angular 2 (typescript)）
10. CQRS：避免企业应用程序中的性能问题（基础）
11. 多个数据存储：扩展你的存储库（第1部分）
12. 多个数据存储：扩展你的存储库（第2部分）
13. 基本身份验证（用户名/密码）与OWIN
14. 基于 OWIN 的令牌授权

引言

在本提示中，我们将学习如何组织我们的应用程序项目。

我假设我们的应用程序具有如下所示的特征，如下图所示：

在此图中，我们看到

• 该应用程序有 3 个主要功能：安全、人力资源管理、客户关系管理。我们通常称之为模块。因此，在示例应用程序中，我们有 3 个模块：安全模块、人力资源管理模块和客户关系管理模块。
• 每个模块应与其他模块隔离。我的意思是，安全模块不会管理员工，等等。
• 一个模块不应该依赖于其他模块，因为它们是相互隔离的。
• 我们应该使用事件进行模块通信，我的意思是，安全模块想在人力资源管理模块中执行某个操作。安全模块应该触发一个事件，人力资源管理模块将使用适当的事件处理程序订阅该事件。这将有助于我们降低应用程序的复杂性，并且在将来更容易维护。
• 每个主要功能都有其子功能，例如在安全模块中，我们有权限、用户角色、用户等。
• 每个子功能（例如权限）可以在一个或多个页面中实现（例如权限列表、创建权限、更新权限等）。

项目结构

使用上述应用程序，我们将按如下方式组织结构：

从上图可以看出：

• 每个模块将拥有自己的路由、菜单项等。此信息在“<root>/app/modules/<module name>/_share/config/module.ts”中指定。
• 每个模块及其子功能将位于其自己的文件夹中，位于 <root>/app/modules/<module-name>。
• 模块的子功能有其自己的文件夹（例如，permission 用于权限子功能），并且包含其详细实现（权限列表、添加权限、更新权限）。这将使我们更容易定位和修改代码。
• 由相应子功能使用的服务类（例如 permissionService）应位于相应模块的“_share/services”文件夹中。permissionService 不仅在权限子功能内部使用，也在同一模块的其他子功能（例如 usergroup、user）中使用。
• 对于模块中任何子功能使用的指令，它们应该位于“_shared/directives”文件夹中。例如，“permissions”指令（显示权限列表）可以在 permission 子功能和 user 子功能中使用。

如果此指令位于“<root>/app/security/permission”内部。在 user 子功能中，我们需要复制或从 permission 子功能导入（这将创建 user 和 permission 子功能之间的依赖关系）。这不好。

如果此指令位于“<root>/app/common/directives”内部。该文件夹中的指令数量将非常庞大，而且大部分指令仅在一个模块中使用。

• 在一个模块内部，如果我们想通知其他模块，我们将触发一个事件。

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

• 多语言（i18n）资源位于“<root>/app/resources/locales/<module name>.<language>.json”（例如：security.en.json 或 security.vn.json）。

每个模块对于每种语言应该只有一个文件。

模块的所有子功能都应使用此 JSON 文件中的文本，遵循“<module name>.<sub-feature name>.<implementation name>.<text name>”的约定。例如，“security.permission.permissions.pageTitle”将返回用于安全模块的权限子功能中的权限页面的标题文本。

同样适用于 HRM 和 CRM 模块。