While delving into the world of Angular 2, I encountered a challenge with setting up a basic route. Every time I click on a link, the browser redirects to the new route but it seems like all the resources are being re-requested, which goes against the behavior of a single-page application.
In 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 sources for my app:
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 am I doing wrong? The Angular version in use is 2.0.0-beta.7.
Thank you for any insights.