Angular 4 多用户webapp的结构

Question

我正在尝试为前端构建一个带有 Angular 4 的 Web 应用程序，我有 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) 我应该为嵌套组件创建单独的应用程序路由模块，例如在患者视图 > 我的配置文件 > 编辑配置文件中，还是将它们列为应用程序中的子项是否可以 - routing.module.ts。

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

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

然后在每个组件路由中将它们声明为子组件？另外，如果我做错了什么，请告诉我，因为我还在学习，但我想遵循最好的惯例和做法。

提前致谢！

Answer 1

is app-routing module in the correct place, or should it be next to app.module.ts

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

should I make separate app-routing modules for nested components like in patient view > my profile > edit profile, or is it fine to have them listed as children in the app-routing.module.ts.

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

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

Answer 2

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

例如 shahred 和 assets 有一个单独的地方，并且对于 unitTesting 它使用 e2e 框架。而且cli有很好的页面生命周期。

祝你好运

Angular 4 多用户webapp的结构

Angular 4 structure for multi-user webapp

routing

directory-structure

web

angular