Angular：具有管理后端的应用程序的正确项目结构

Question

我是 Angular 新手，刚刚读完《ng-book : The Complete book on Angular 6》一书。

我目前有一个简单的问题，但我找不到合适的答案。

我想像这样构建一个应用程序：

MainLayout ：所有主要网站页面的基本布局。漂亮的页眉、页脚等。 AdminLayout ：所有管理页面的基本布局。另一个带有左侧边栏的标题。

http://my-app.com : 具有多个路由的应用程序。所有路由共享相同的基本布局（MainLayout）

http:///my-app.com/admin : 相同的应用程序，相同的后端，但是它使用与主网站不同的布局（AdminLayout），但 /admin 的所有子路由共享相同的布局（AdminLayout）。

虽然我能做到：

• 应用程序
  • 管理员
    • admin.module.ts（定义管理路由）
    • admin.component.ts（和 html 有一个路由器出口）
  • 主要
    • main.module.ts（定义主路由）
    • main.component.ts（和 html 有一个路由器出口）
  • app.module.ts（带路由器/空路由）
  • app-routing.component.ts（带路由器出口）

这是正确的做法吗？

谢谢

Answer 1

您当前的实现是完美的。不过，我还想补充一些其他内容。

确保你所说的所有路由都在主布局中，以及管理布局中，都是延迟加载的。

因此，理想情况下，对于您正在创建的每条路由，您都必须创建一个模块和一个路由模块。这些路由以及将作为这些主要组件（您在路由配置中指定）的一部分呈现的组件和子组件将驻留在模块文件夹中。

如果您认为有几个组件会在整个应用程序中重复使用，请考虑添加SharedModule 和export作为其中的一部分。

另外，我觉得由于页眉和页脚是一次性组件，您应该考虑将它们移动到CoreModule，然后在您的AppModule 中导入CoreModule。

所有这些建议都来自您可能想要彻底阅读的Angular Style Guide。