Angular : Right project structure for an app with admin backend

Question

我是 Angular 的新手，我刚刚读完了“ng-book:Angular 6 的完整书籍”一书。

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

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

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

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

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

我认为我能做的:

• 应用程序
  • 管理员
    • admin.module.ts(定义管理路由)
    • admin.component.ts(和 html 有一个 router-outlet)
  • 主要
    • main.module.ts(定义主要路线)
    • main.component.ts(并且 html 有一个 router-outlet)
  • app.module.ts(带路由器/空路由)
  • app-routing.component.ts(带路由器 socket )

这是正确的做法吗？

谢谢

Answer 1

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

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

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

如果您认为有几个组件将在整个应用程序中重复使用，请考虑添加一个 SharedModule 并将它们作为其中的一部分导出。

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

所有这些建议均符合 Angular Style Guide您可能还想通读一遍。