Angular : Right project structure for an app with admin backend

3
votes

I am new to Angular and I'm just done reading the book "ng-book : The complete book on Angular 6".

I am currently having a simple question which I couldn't find a proper answer.

I would like to build an application like so :

MainLayout : Base layout for all main website pages. Beautiful header, footer, etc. AdminLayout : Base layout all admin pages. Another header with a left sidebar.

http://my-app.com : Application with multiple routes. All routes shares the same base layout (MainLayout)

http:///my-app.com/admin : Same application, same backend, however it uses a different layout than the main website (AdminLayout), but all child routes of /admin shares the same layout (AdminLayout).

What I though I could do :

  • app
    • admin
      • admin.module.ts (define admin routes)
      • admin.component.ts (and html has a router-outlet)
    • main
      • main.module.ts (defines main routes)
      • main.component.ts (and html has a router-outlet)
    • app.module.ts (with router/empty route)
    • app-routing.component.ts (with router-outlet)

Is it the right way of doing it ?

Thank you

1
angular

1 Answers

2
votes

Your current implementation is perfect. There are a few other things that I'd like to add though.

Make sure that all the routes, that you've said are there in the main layout, as well as the admin layout, are lazily loaded.

So ideally, for each route that you're creating, you'll have to create a module and a routing module. These routes and the components and the sub-components that will be rendered as a part of these main components(that you've specified in the route config) will reside in the module folders.

If there are a few components that you think will be reused throughout the whole application, consider adding a SharedModule and exporting them as a part of that.

Also, I feel since the header and footer are single-use components, you should consider moving them to a CoreModule and then importing the CoreModule in your AppModule.

All these recommendations are as per the Angular Style Guide that you might want to read through, thoroughly as well.