Angular 2 navigation menu routing

Question

I need to develop single page application which should have the following "pages": 1. Login page with very simple form 2. Home page with navigation menu on the left and in the remaining part of the screen the specific content of the chosen section should be displayed.

I do know the routing basics so I have created the following router:

import { Routes } from "@angular/router";

import { LoginComponent } from "../login/login.component";
import { HomeComponent } from "../home/home.component";

export const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent },
    { path: '', redirectTo: 'login', pathMatch: 'full' }
]

It allows me to switch between the login page and the home page using button's routerLink attribute.

The first questions is how do I implement switching between the sections using the navigation menu on the home page? Imagine I have 'Clients' and 'Reports' sections (each section has its own functionality, buttons, labels, etc.) in the navigation menu. How can I implement routing to these modules? Here is the draft code I have:

<mat-sidenav-container fullscreen>
  <mat-sidenav #sidenav mode="side" opened="true">
    <div fxLayout="column"> 
        <button mat-button>Clients</button>
        <button mat-button>Reports</button>
    </div>
 </mat-sidenav>

  <div>
    Some content specific for section here
  </div>

</mat-sidenav-container>

My second question is what will be the correct hierarchy for my project? Should the login and the home pages be the separate modules? And how should I organise (in terms of modules/components) the main content of home page which will be changing depending on the selected section?

Answer 1

1) You can create links to the various routes by using the routerLink attribute. For instance, you could design a navbar which looks like:

<nav>
  <a routerLink="/home"> Home </a>
  <a routerLink="/login"> Login </a>
</nav>

more about this syntax is here.

2) For modules: the primary benefit of creating multiple modules is that you can lazy load them- that is, load the module only after a certain route is activated. Thus the standard is to create a separate module for each functional component of the website. For instance- if I were to design an Angular 2 App which emulated Google Drive, I would have separate modules for user login, directory view, the document editor, the spreadsheet editor, the Presentation editor, etc- as different code is loaded depending on the route.

For components: I think there are two reasons to create separate components: 1) to reuse code across different views / components / inside a for loop and 2) to separate your code into better logical parts for data modelling. Generally, I make a separate component for each view (/account), and then create additional components any time a component would be reused.