How to use the @angular/router.Routes function in @angular/router

import {MainPageComponent} from "./+main-page/main-page.component";
import {DashboardComponent} from "./+dashboard/dashboard.component";

declare var componentHandler:any;

@Component({
    selector: 'notifier',
    templateUrl: 'app/app.component.html',
    directives: [ConfirmComponent, ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        ConfirmService,
        AuthManager
    ]
})
@Routes([
    {path: '/main-page', component: MainPageComponent},
    {path: '/dashboard', component: DashboardComponent}
])
export class AppComponent implements OnInit {

    title = "Notifier!!!";

    constructor(private _confirmService:ConfirmService,
                private _authManager:AuthManager,
                private _router:Router) {
    }

    showConfirmDialog() {
        this._confirmService.activate("Are you sure?")
            .then(res => console.log(`Confirmed: ${res}`));
    }

import {LoginComponent} from './login/login.component'

@Component({
    selector: 'my-app',
    directives: [ROUTER_DIRECTIVES],
    template: `
            <h1>My First Angular 2 App</h1>
            <ul>
                <li><a>Home</a></li>
                <li><a>Login</a></li>
                <li><a>Dashboard</a></li>
            </ul>
            <div></div>
            `
})
@Routes([
    { path: '/home', component: HomeComponent },
    { path: '/login', component: LoginComponent },
    { path: '/dashboard',  component: DashboardComponent }
])
export class AppComponent { }

import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';

import {HomeComponent} from './components/home';
import {ProductDetailComponent} from './components/product_child_route';

@Component({
    selector: 'basic-routing',
    directives: [ROUTER_DIRECTIVES],
    template: `
        <a>Home</a>
        <a>Product Details</a>
        
    `,
})
@Routes([
    {path: '/',            component: HomeComponent},
    {path: '/product/:id', component: ProductDetailComponent}
])
class RootComponent{}

bootstrap(RootComponent, [
    ROUTER_PROVIDERS,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
]);

import {SellerInfoComponent} from './seller';
import {ProductDescriptionComponent} from './product_description';

@Component({
    selector: 'product',
    styles: ['.product {background: cyan}'],
    directives: [ROUTER_DIRECTIVES],
    template: `
      <div class="product">
        <h1>Product Detail for Product: {{productID}}</h1>
        
        <p><a>Seller Info</a></p>
      </div>
    `
})
@Routes([
    {path: '',            component: ProductDescriptionComponent},
    {path: 'seller/:id',  component: SellerInfoComponent}
])
export class ProductDetailComponent {
  productID: string;

  constructor(params: RouteSegment) {
    this.productID = params.getParam('id');
  }
}

import { MissionViewComponent } from "../mission/mission-view.component";
import { RoleIndexComponent } from '../role/role-index.component';
import { RoleCreateComponent } from '../role/role-create.component';
import { SettingIndexComponent } from '../setting/setting-index.component'
import { SkillIndexComponent } from '../skill/skill-index.component';
import { SkillCreateComponent } from '../skill/skill-create.component';
import { SkillViewComponent } from '../skill/skill-view.component';
import { UserRegisterComponent } from '../user/user-register.component';

@Component({
    selector: 'home',
    templateUrl: './dev/home/home.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [DataService, ObjectToArrayPipe]
})
@Routes([
    { path: '/', component: HomeIndexComponent },
    { path: '/Mission', component: MissionIndexComponent },
    { path: '/CreateMission', component: MissionCreateComponent },
    { path: '/ViewMission/:id', component: MissionViewComponent },
    { path: '/Collaborator', component: CollaboratorIndexComponent },
    { path: '/CreateCollaborator', component: UserRegisterComponent },
    { path: '/ViewCollaborator/:id', component: CollaboratorViewComponent },
    { path: '/Customer', component: CustomerIndexComponent },
    { path: '/CreateCustomer', component: CustomerCreateComponent },
    { path: '/ViewCustomer/:id', component: CustomerViewComponent },
    { path: '/Setting', component: SettingIndexComponent },
    { path: '/Skill', component: SkillIndexComponent },
    { path: '/CreateSkill', component: SkillCreateComponent },
    { path: '/ViewSkill/:id', component: SkillViewComponent },
    { path: '/Role', component: RoleIndexComponent },
    { path: '/CreateRole', component: RoleCreateComponent }

import {Component} from '@angular/core';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import { Poll } from './domain/poll.domain';
import { PollListComponent } from './poll.list.component';
import { DashboardComponent } from './dashboard.component';
import { Router,ROUTER_DIRECTIVES, Routes } from '@angular/router';

@Component({
    selector: 'my-app',
    templateUrl: 'templates/index.html',
    directives: [ROUTER_DIRECTIVES]
})
@Routes([
  {path: '/dashboard', component: DashboardComponent},
  {path: '/poll', component: PollListComponent},
  {path: '/',        component: PollListComponent}
])
export class AppComponent {
    constructor(public http: Http,private router: Router) {
        
    }
}

import {Component} from '@angular/core';
import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
import {AboutComponent} from './about/about.component';
import {ExperimentsComponent} from './experiments/experiments.component';
import {HomeComponent} from './home/home.component';
import {StateService} from './common/state.service';
import {ExperimentsService} from './common/experiments.service';

@Component({
  selector: 'app',
  template: require('./app.component.html'),
  styles: [require('./app.component.css')],
  directives: [ ROUTER_DIRECTIVES ],
  providers: [StateService, ExperimentsService],
})
@Routes([
  {path: '/',            component: HomeComponent },
  {path: '/home',        component: HomeComponent },
  {path: '/about',       component: AboutComponent },
  {path: '/experiments', component: ExperimentsComponent },
  {path: '/*',           component: HomeComponent }
])
export class AppComponent {}

import {HomeComponent} from './components/home';
import {ProductDetailComponentParam} from "./components/product_param";

import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component, provide} from '@angular/core';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';

@Component({
    selector: 'basic-routing',
    template: `<a>Home</a>
              <a>Product Details</a>
              `,
    directives: [ ROUTER_DIRECTIVES]
})
@Routes([
    {path: '/', component: HomeComponent},
    {path: '/product/:id', component: ProductDetailComponentParam }
])
class RootComponent{}

bootstrap(RootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

}
}

@Component({
  selector: 'product-list',
  directives: [ROUTER_DIRECTIVES],
  styles: ['.list {background-color: yellow}'],
  template: `
    <div class="list">
      <h1>Product List</h1>
      <pre>Category: {{category}}<br>Title:    {{title}}</pre>
      <a>Five star reviews</a>
      
    </div>`
})
@Routes([
  { path: 'reviews', component: ProductReviewsComponent }
])
class ProductListComponent implements OnActivate {
  category: string;
  title: string;

  routerOnActivate(currentSegment: RouteSegment) {
    this.category = currentSegment.getParam('category');
    this.title = currentSegment.getParam('title');
  }
}

@Component({
  selector: 'basic-routing',
  directives: [ROUTER_DIRECTIVES],
  template: `

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Routes} from '@angular/router'
import {HomeComponent,LoginComponent,AddPostComponent} from './component'
import {User} from './model/user'
import {LoginService} from './service/login'

@Component({
    selector: 'my-app',
    providers: [ROUTER_PROVIDERS],
    directives: [ROUTER_DIRECTIVES],
    templateUrl:'appComponent.html',
  
})
@Routes([
    { path: '/', component: HomeComponent },
    { path: '/Login',  component: LoginComponent },
    { path: '/Addpost', component: AddPostComponent }    
])
export class AppComponent {
    
    public title: string = "Blog";
    constructor(private _loginService:LoginService){
           
    }
    
}