Search code examples
angularwebroutesdirectory-structure

Angular 4 structure for multi-user webapp


I'm trying to build a webapp with Angular 4 for the front end, where I have 3 types of users. I'm searching on advise as to what the best practices are in achieving this as I'm quite new to this. I'm sharing what I have so far:

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

Now I haven't written everything down,such as each html, css and ts file, also the services, models and utils, I think they are pretty straight forward.

My questions are: 1) is app-routing module in the correct place, or should it be next to app.module.ts 2) 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.

What happens if I have repetitive components, such as change password component, also I have a search component that is the same for patient and dentist. Should I place those components in a separate folder and have:

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

and just declare them as children in each components routing? Also if I'm doing something totally wrong, please do tell, as I'm still learning but I want to follow the best conventions and practices.

Thank you in advance!


Solution

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

    The angular-cli places the app-routing.module.ts file next to the app.module.ts file.

    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.

    If you want to support lazy-loaded modules, you should create a moduleNome-routing.module.ts for each lazy loaded module. Lazy loading for an application with user role specific views makes sense because users don't need the views that don't fit their role. Also, if your application starts to get big (let's say more than 10 routes in a routing module) it might be good to consider breaking that up into smaller lazy loaded modules so your application does not take too long to load.

    If your app is small and you don't care about load times, then I'd think you should be okay with having all your routes in app-routing.module.ts.