Angular:适用于具有管理后台的应用程序的正确项目结构

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有一个路由器出口(
  • 主要
    • main.module.ts(定义主要路由(
    • main.component.ts(html有一个路由器出口(
  • app.module.ts(带路由器/空路由(
  • app-routing.component.ts(带路由器插座(

这样做正确吗？

谢谢

Answer 1

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

确保您所说的所有路由都在主布局中，以及管理布局中，都是惰性加载的。

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

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

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

所有这些建议都符合角度风格指南，您可能也需要彻底阅读。