Menu
Started learning angular2 beta component routing. I have done this so far.
http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview
I have copied following required CDNs. please have a look here.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/router.dev.js"></script>
src/boot.ts
import {Component} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,LocationStrategy} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';
@Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<nav>
<a [routerLink]="['ComponentOne']">One</a><hr/>
<a [routerLink]="['ComponentTwo']">Two</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path:'/component-one', name: 'ComponentOne', component: ComponentOne},
{path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
])
export class AppComponent { }
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
src/cone
import {Component,View} from 'angular2/core';
@Component({
template: `
<h1>first Component</h1>
`
})
export class ComponentOne{
constructor(){
console.log("first component being called");
}
}
src/ctwo
import {Component,View} from 'angular2/core';
@Component({
template: `
<h1>Second Component</h1>
`
})
export class ComponentTwo{
constructor(){
console.log("Second component being called");
}
}
Please check your dev console. It gives an error
EXCEPTION: Error during instantiation of LocationStrategy! (RouterLink -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514 angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
and in addition it doesn't redirect me to destination. I have tried to add < base href="/" >but it allows gives an error.
I want links to be working properly.
434
Either add the <base href="/"> to the <head> element or add APP_BASE_HREF to bootstrap
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
// usually
provide(APP_BASE_HREF, {useValue: '/'})
// for Plunker
// bind(APP_BASE_HREF).toValue(location.pathname)
]);
Answer Edited By Nyks:
In my plunker I have updated following parts,
import {Component,bind} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
export class AppComponent { }
bootstrap(AppComponent, [
ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);
final Answer : http://plnkr.co/edit/4YWWGhuBWd2CoWpC3GeY?p=preview
See also http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm?p=info
and the ROUTING & NAVIGATION developer guide at at angular.io
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
