CODEWITHSUNDEEP
angulartypescriptangular2-routing
user5170375
user5170375

Reputation:

Angular 2 router refreshing page while routing

I'm trying to setup a simple route while learning Angular 2, whenever I click on a link, the browser is routed to the new route but the browser is re requesting all the resources (not behaving as single page app).

my index file,

<!--... . .  various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>
</head>
<body>
  <app></app>
</body>

the app sources,

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {RoutingApp} from './routing/routing.app'
import {ROUTER_PROVIDERS} from 'angular2/router'

bootstrap(RoutingApp, [ROUTER_PROVIDERS]);

RoutingApp

import {Component} from "angular2/core"
import {RouteComponent} from './route.component'
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';


@Component({
    selector : 'app',
    template :  `
        go to this <a href="/link">link</a>
        <br />
        <router-outlet></router-outlet>

    `,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {path: '/link', name: 'Link', component: RouteComponent}
])
export class RoutingApp{

}

and the RouteComponent

import {Component} from 'angular2/core'

@Component({
    template: `
        hello from RouteComponent
    `
})
export class RouteComponent{}

what I'm doing wrong? Angular version is 2.0.0-beta.7.

thank you for any insight.

Upvotes: 4

Views: 1656

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202176

You should use the routerLink directive to navigate to a route:

<a [routerLink]="['Link']">link</a>

This directive is directly usable since you specified ROUTER_DIRECTIVES into the directives attribute of your component

Upvotes: 6

Related Questions