Angular folders/files 简单应用的结构（风格指南）

Question

我正在研究 angular 的风格指南，我在开发一个简单的应用程序时遇到了一些疑问！该应用程序用于控制用户的证券交易所股票。所以需要：

用于验证用户（登录、注册和重置密码）的模块
一个模块，一个模块显示所有用户的股票，另一个模块添加新股票
编辑用户个人资料的模块

身份验证模块将具有与应用程序其余部分不同的布局（身份验证将仅采用集中形式，而应用程序其余部分将具有导航栏作为菜单）。

问题 1：我将在 Auth 模块中创建一个名为 Layout 的组件，并将其仅用于身份验证视图；我在哪里创建 Layout 组件或模块（我不知道是哪个）以与应用程序的其余部分一起使用？我应该创建一个核心模块并在该模块内创建一个布局模块吗？我应该创建一个核心模块和一个布局模块（在核心之外）吗？

问题2：我应该在哪里创建守卫来进行身份验证？此守卫将用于 Stocks 和 Profile 模块，以避免未登录的用户

问题 3：您将如何构建这个关于文件夹和文件的简单项目？

Answer 1

目前，我正在使用这个 article 来组织我的 Angular 文件夹结构。基本上，我们有三个主要文件夹 - core、shared、views.

核心：它有CoreModule提供所有应用程序公共服务。它在 AppModule 中仅导入一次。在此文件夹中，我有 services 和 guards 子文件夹，因为它们是可注射的（问题 2 答案）。我不在 CoreModule 提供守卫，我在 routing 模块提供它们，即 AppRoutingModule.
shared：它有 SharedModule 声明和导出所有应用程序通用组件、管道、枚举、类和指令（所有类期待服务和警卫）。 SharedModule 由 views 模块导入。
views: 获取所有视图模块（一般是懒加载模块）。

结构是（问题3答案）：

/app
|---/core
|   |---/guards
|   |---/services
|   |---core.module.ts
|
|---/shared
|   |---/components
|   |---/directives
|   ...
|   |---shared.module.ts
|
|---/views
|   |---/view-X
|       |---/components
|       |---/directives
|       |---view-X.component.html
|       |---view-X.component.css
|       |---view-X.component.spec.ts
|       |---view-X.component.ts
|       |---view-X.module.ts
|       |---view-X-routing.module.ts

在您的情况下，可以有三个视图 folders/modules：验证、用户库存和用户编辑。每个人的结构都类似于 view-X 文件夹示例（问题 1 答案）。

Angular folders/files 简单应用的结构（风格指南）

Angular folders/files structure for a simple app (style guide)

coding-style

angular2-styleguide

angular