I am trying to set up a single page application with one top menu bar, one left vertical menu and one content div on the right of that menu.
I want that depending on the selection of the user on any of those menus that the content div displays different information.
I created a new project in the Angular IDE:
I have my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>testApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
this index.html calls the app-root controller:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
On this app.component.html I have the route:
<router-outlet></router-outlet>
and my dashboard controller:
<app-dashboard></app-dashboard>
On my dashboard.component.html I have my router outlet and the website layout:
<router-outlet></router-outlet>
<div class="container">
<div class="topbar">
<div class="topbar-leftmenu">
TEST SYSTEM
</div>
<div class="topbar-rightmenu">
<a href="#home">User </a>
<a href="#notification">Notifications</a>
<a href="#news">About</a>
<a href="#contact">Contact</a>
<a href="#login">Login</a>
<a href="#register">Register</a>
</div>
</div>
<aside class="vertmenu">
<div class="scroll-sidebar">
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li>
<a href="/index.html" >Dashboard</a>
</li>
<li>
<a href="/example0" >Example 0</a>
</li>
<li>
<a href="/example1" >Example1</a>
</li>
<li>
<a href="/Example2" >Example2</a>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<div class="content" data-ng-view>
</div>
</div>
I set the data-ng-view property on the div class content as I though that would mean that that would be the div that would change pages.
On my app-routing.module.ts I have the different menus pointing to the different controllers:
import { DashboardComponent } from '../dashboard/dashboard.component';
import { Example0Component } from '../example0/example0-list.component';
import { Example1Component } from '../example1/example1-list.component';
import { Example2Component } from '../example2/example2-list.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'app.component.html',
component: DashboardComponent,
},
{
path: 'example0',
component: Example0ListComponent,
},
{
path: 'example1',
component: Example1ListComponent,
},
{
path: 'example2',
component: Example2ListComponent,
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
What is happening is that every time I hit the menu the entire page reloads. Not only that but also the content for the newly called components will display in the html before the top menu and vertical menu layout.
It seems that the routing is not properly setup. How can I guarantee that when I go into my dashboard.html piece of the code the routing will know that the content div will be the one to render the new components html code?
EDIT:
After some feedback I added the new tag instead of the href:
<ul id="sidebarnav">
<li>
<a routerLink="/app.component.html" >Dashboard</a>
</li>
<li>
<a routerLink="/example0" >example 0</a>
</li>
<li>
<a routerLink="/example1" >example 1</a>
</li>
<li>
<a routerLink="/example2" >example 2</a>
</li>
</ul>
