Untitled

<!DOCTYPE html>
<html>
  <head>
    <!-- Set the base href -->
    <script>document.write('<base href="' + document.location + '" />');</script>
    
    <title>Router Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2@2.0.0-beta.11/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js"></script>
    
    <!-- Add the router library -->
    <script src="https://code.angularjs.org/2.0.0-beta.11/router.dev.js"></script>
    
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/app')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <app>loading...</app>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS, Router} from "angular2/router";
import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';

@Component({
	selector: "app",
	template: `<a [routerLink]="['Page1']">Page1</a> | <a [routerLink]="['Page2']">Page2</a>
	<router-outlet></router-outlet>
	`,
	directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
	{path: "/page1", name: "Page1", component: Page1Cmp, useAsDefault: true}
])
class MyApp{
  
  public data = "data from app component";
  
  constructor(private _router:Router){
    this._router.config([
        {path: "/page2/...", name: "Page2", component: Page2Cmp, data: {data: this.data}}
      ])
  }
}

bootstrap(MyApp, [
	ROUTER_PROVIDERS
]);

import {Component} from 'angular2/core';

@Component({
	selector: "page1",
	template: `page 1 goes here.`
})
export class Page1Cmp{}

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES,RouteConfig, Router, RouteData} from 'angular2/router';
import {ChildCmp} from './child';
import {Child2Cmp} from './child2';

@Component({
	selector: "page2",
	template: `page2 goes here <br> <a [routerLink]="['Child2']">Go to Child2</a>
	<router-outlet></router-outlet>
	`,
	directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/", component: ChildCmp, name: "Child", useAsDefault: true}
  ])
export class Page2Cmp{
  public data:string;
  
  constructor(private _router:Router, private _data:RouteData){
    
    this.data = _data.get("data");
    this._router.config([
        {path: "/child2", component: Child2Cmp, name: "Child2", data: {data: this.data} }
      ])
  }
}

import {Component} from 'angular2/core';

@Component({
	selector: "child",
	template: `child content goes here.`
})
export class ChildCmp{}

import {Component} from 'angular2/core';
import {RouteData} from 'angular2/router';

@Component({
	selector: "child2",
	template: `child2 says - Data from app component is {{ data }}.`
})
export class Child2Cmp{
  
  public data;
  
  constructor(private _data:RouteData){
    this.data = _data.get("data");
  }
}