Routing By Example #1: Angular 2 Component Router

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://routingbyexample.com/css/main.css">
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.46/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.46/router.dev.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body class="rbe-plunk">
    <app>
      Loading, please wait...
    </app>
  </body>

</html>

/* Styles go here */

### Angular 2 Simple Routing (single route)

In Angular 2, we always bootstrap a root component which is our application
at the same time. Other components can be used inside that root component
to compose a component tree structure, which represents our application.

To get started with routing in Angular 2, we need to do a couple of
things:

1. Import `ROUTER_PROVIDERS` from `angular/router` (main.ts:4)
2. Add the providers to our `bootstrap()` function to configure our root
   injector (main.ts:10)
3. [OPTIONAL]: Configure the router to use `HashLocationStrategy`, this
   is to support deep links if we're not able to configure the server
   (main.ts:12)
4. Import the `RouteConfig` decorator so we can use it on our application
   component (app.ts:2)
5. Decorate our component with a route (app.ts:5)
6. Use `RouterOutlet` directive to specify where components should be
   loaded (app.ts:10)

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

// Import Angular dependencies
import {bootstrap, provide} from 'angular2/angular2';

// Import Component Router dependencies
import {
  ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';

// Import application component
import {App} from './app/app.component';

// Bootstrap the application
bootstrap(App, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]).catch(err => console.error(err));

import {Component} from 'angular2/angular2';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomepageComponent} from '../homepage/homepage.component';
import {AboutComponent} from '../about/about.component';

@RouteConfig([
  {path: '/', component: HomepageComponent, as: 'Homepage'},
  {path: '/about', component: AboutComponent, as: 'About'}
])
@Component({
  selector: 'app',
  templateUrl: 'src/app/app.html',
  directives: [ROUTER_DIRECTIVES]
})
export class App {

}

import {Component} from 'angular2/angular2';

@Component({
  selector: 'homepage',
  templateUrl: 'http://routingbyexample.com/export/sample-content/homepage/homepage.html'
})
export class HomepageComponent {
  
}

<nav class="rbe-plunk-nav">
  <ul>
    <li>
      <a [router-link]="['/Homepage']">Homepage</a>
    </li>
    <li>
      <a [router-link]="['/About']">About</a>
    </li>
  </ul>
</nav>

<main>
  <router-outlet></router-outlet>
  <!-- The router will put the content here, right after the outlet -->
</main>

import {Component} from 'angular2/angular2';

@Component({
  selector: 'about',
  templateUrl: 'http://routingbyexample.com/export/sample-content/about/about.html'
})
export class AboutComponent {
  
}