Angular 2 Router load header and footer every time

I am using Angular 2 beta and created a web page with 3 links/components.

I have separately created a header, mainnav and footer component which should only load once?

The problem is that when I navigate to the different links the whole page seems to reload. I don’t want the header, mainnav and footer to reload every time, it’s too slow.

Shouldn’t Angular just load the content and not have to reload everything else?

What am I doing wrong?

Here’s the code:

import {Component} from 'angular2/core';
import {RouteConfig} from 'angular2/router';
import {ROUTER_DIRECTIVES} from 'angular2/router';

import {mainnav} from './mainnav.component';
import {header} from './header.component';
import {footer} from './footer.component';

import {HomeComponent} from './home.component';
import {AboutComponent} from './about.component';
import {ContactComponent} from './contact.component';

@Component({
    selector: 'my-app',
    directives: [mainnav, header, footer, ROUTER_DIRECTIVES],
    template: `
        <my-mainnav></my-mainnav>
        <my-header></my-header>
        <router-outlet></router-outlet>
        <my-footer></my-footer>

    `,
})

@RouteConfig([

    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
    { path: '/about', name: 'About', component: AboutComponent },
    { path: '/contact', name: 'Contact', component: ContactComponent }

])

export class AppComponent {

}

The links:

 <ul class="nav navbar-nav">
    <li class="active"><a href="home">Home</a></li>
    <li><a href="about">About</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

I know I’m not using [routerLink], would that make a difference in the loading?

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

now, routerLink can be written:

template: `
  <h1>Component Router</h1>
  <nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
  <router-outlet></router-outlet>
`

from https://angular.io/docs/ts/latest/guide/router.html

Jason
Guest

You should use routerLink instead

<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['/Home']">Home</a></li>
    <li><a [routerLink]="['/About']">About</a></li>
    <li><a [routerLink]="['/Contact']">Contact</a></li>
</ul>