Question

我正在尝试使用Angular 4为前端构建一个webapp，我有3种类型的用户。我正在寻找关于实现这一目标的最佳实践的建议，因为我对此很陌生。我正在分享到目前为止我所拥有的：

v app
  v shared
    v main
      > app     //this is what u see before login/reg, after that you're redirected to the apropriate view
      > admin-view
         admin-component.html
         admin-component.css
         admin-component.ts 
      > patient-view
        > my-profile
          >edit-profile 
            //they all have html, css and ts
          >appointments-history
          >procedures-done
        > dentist-search
        > dentist-profile
        > change-password
    > models
    > services
    > util
    app-routing-module.ts
app.module.ts

现在我还没有写下所有内容，例如每个html，css和ts文件，还有服务，模型和工具，我认为它们非常简单。

我的问题是： 1）app-routing模块位于正确的位置，或者它应该在app.module.ts旁边 2）我应该为嵌套组件制作单独的app-routing模块，例如患者视图＆gt;我的个人资料＆gt;编辑个人资料，或者将它们作为子项列在app-routing.module.ts中。

如果我有重复的组件会发生什么，例如更改密码组件，我也会为患者和牙医提供相同的搜索组件。我应该将这些组件放在一个单独的文件夹中并具有：

>main
  >admin-view
  >app
  >dentist-view
  >patient-view
  >shared

并在每个组件路由中将它们声明为子节点？此外，如果我做了一些完全错误的事情，请告诉我，因为我还在学习，但我想遵循最好的惯例和做法。

提前谢谢！

Answer 1

是app-routing模块在正确的位置，还是应该在app.module.ts旁边

angular-cli将app-routing.module.ts文件放在app.module.ts文件旁边。

我应该为嵌套组件制作单独的app-routing模块，例如在患者视图中＆gt;我的个人资料＆gt;编辑个人资料，或者将它们列为app-routing.module.ts中的子项。

如果要支持lazy-loaded modules，则应为每个延迟加载的模块创建 moduleNome -routing.module.ts。具有用户角色特定视图的应用程序的延迟加载是有意义的，因为用户不需要不适合其角色的视图。此外，如果您的应用程序开始变大（假设在路由模块中超过10条路由），最好考虑将其分解为更小的延迟加载模块，这样您的应用程序不会花费太长时间来加载。

如果您的应用很小并且您不关心加载时间，那么我认为您应该可以将所有路由放在app-routing.module.ts中。

Answer 2

我建议您使用具有良好文件夹结构的Angular-Cli。所以可以命令创建新的应用程序，创建模块，创建组件。现在，许多SPA开发人员都使用ng-cli来创建企业spa应用程序。

例如，shahred＆amp;资产只有一个地方，而对于unitTesting它使用e2e框架。和cli有一个非常好的页面生命周期。

祝你好运

用于多用户webapp的Angular 4结构

2 个答案: