[Application Routing]

* Create 3 lazy module for plates/settings/dashboard
* Root app routing configuration
* Added navigation component

src/app/app-routing.module.ts

@@ -1,7 +1,36 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
-const routes: Routes = [];
+export enum Routing {
+  Dashboard = "dashboard",
+  Plates = "plates",
+  Settings = "settings"
+}
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: '/dashboard',
+    pathMatch: 'full'
+  },
+  {
+    path: Routing.Dashboard,
+    loadChildren: () => import("./modules/dashboard/dashboard.module").then(m => m.DashboardModule)
+  },
+  {
+    path: Routing.Plates,
+    loadChildren: () => import("./modules/plates/plates.module").then(m => m.PlatesModule)
+  },
+  {
+    path: Routing.Settings,
+    loadChildren: () => import("./modules/settings/settings.module").then(m => m.SettingsModule)
+  },
+  {
+    path: '**',
+    redirectTo: '/dashboard',
+    pathMatch: 'full'
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.ts

@@ -3,17 +3,22 @@ import {PrimeNGConfig} from "primeng/api";
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  template: `
+    <div class="app-container">
+      <router-outlet></router-outlet>
+    </div>
+    <navbar></navbar>
+  `,
+  styles: [`
+    .app-container {
+      height: 90vh;
+      max-height: 90vh;;
+    }
+  `]
 })
 export class AppComponent {
-  active: boolean = false;
 
   constructor(private _primengConfig: PrimeNGConfig) {
     this._primengConfig.ripple = true;
   }
-
-  toggleActive() {
-    this.active = !this.active;
-  }
 }

src/app/app.module.ts

@@ -8,11 +8,13 @@ import {FormsModule} from "@angular/forms";
 import {ButtonModule} from 'primeng/button';
 import {RippleModule} from "primeng/ripple";
 import {NavbarButtonComponent} from './components/navbar-button/navbar-button.component';
+import {NavbarComponent} from './components/navbar/navbar.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    NavbarButtonComponent
+    NavbarButtonComponent,
+    NavbarComponent
   ],
   imports: [
     BrowserModule,

src/app/components/navbar/navbar.component.html

@@ -0,0 +1,15 @@
+<footer>
+  <navbar-button (onClick)="onNavClick(routing.Dashboard)"
+                 [active]="selectedRoute === routing.Dashboard"
+                 icon="pi-home">
+  </navbar-button>
+  <navbar-button (onClick)="onNavClick(routing.Plates)"
+                 [active]="selectedRoute === routing.Plates"
+                 icon="pi-database">
+  </navbar-button>
+  <navbar-button (onClick)="onNavClick(routing.Settings)"
+                 [active]="selectedRoute === routing.Settings"
+                 icon="pi-cog">
+  </navbar-button>
+</footer>
+

src/app/app.component.scss → src/app/components/navbar/navbar.component.scss

@@ -1,11 +1,5 @@
 @import "~primeng/resources/themes/lara-light-indigo/theme.css";
 
-
-.app-container {
-  height: 90vh;
-  max-height: 90vh;
-}
-
 footer {
   height: 10vh;
   max-height: 10vh;

src/app/components/navbar/navbar.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {NavbarComponent} from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NavbarComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/navbar/navbar.component.ts

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {Router} from "@angular/router";
+import {Routing} from "../../app-routing.module";
+
+@Component({
+  selector: 'navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent {
+
+  public selectedRoute?: Routing = undefined;
+
+  constructor(private _router: Router) {
+  }
+
+  public get routing(): typeof Routing {
+    return Routing;
+  }
+
+  public onNavClick(dest: Routing): void {
+    this._router.navigate(['/' + dest])
+      .then(() => this.selectedRoute = dest);
+  }
+}

src/app/modules/dashboard/dashboard.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule, Routes} from "@angular/router";
+import {DashboardComponent} from './dashboard/dashboard.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardComponent
+  }
+];
+
+@NgModule({
+  declarations: [
+    DashboardComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ]
+})
+export class DashboardModule {
+}

src/app/modules/dashboard/dashboard/dashboard.component.html

@@ -0,0 +1 @@
+<span>dashboard works!</span>

src/app/modules/dashboard/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {DashboardComponent} from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DashboardComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/dashboard/dashboard/dashboard.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/plates/plates.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PlatesComponent} from './plates/plates.component';
+import {RouterModule, Routes} from "@angular/router";
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PlatesComponent
+  }
+];
+
+@NgModule({
+  declarations: [
+    PlatesComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ]
+})
+export class PlatesModule {
+}

src/app/modules/plates/plates/plates.component.html

@@ -0,0 +1 @@
+<span>plates works!</span>

src/app/modules/plates/plates/plates.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PlatesComponent} from './plates.component';
+
+describe('PlatesComponent', () => {
+  let component: PlatesComponent;
+  let fixture: ComponentFixture<PlatesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PlatesComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/plates/plates/plates.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'plates',
+  templateUrl: './plates.component.html',
+  styleUrls: ['./plates.component.scss']
+})
+export class PlatesComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/settings/settings.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {SettingsComponent} from './settings/settings.component';
+import {RouterModule, Routes} from "@angular/router";
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SettingsComponent
+  }
+];
+
+@NgModule({
+  declarations: [
+    SettingsComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ]
+})
+export class SettingsModule {
+}

src/app/modules/settings/settings/settings.component.html

@@ -0,0 +1 @@
+<span>settings works!</span>

src/app/modules/settings/settings/settings.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {SettingsComponent} from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SettingsComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/settings/settings/settings.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}