54 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			54 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
// #docplaster
 | 
						|
// #docregion
 | 
						|
import { Component } from '@angular/core';
 | 
						|
 | 
						|
// Can't test with ROUTER_DIRECTIVES yet
 | 
						|
// import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 | 
						|
 | 
						|
import { RouteConfig, RouterLink,
 | 
						|
         RouterOutlet, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 | 
						|
 | 
						|
import { DashboardComponent }  from './dashboard.component';
 | 
						|
import { HeroesComponent }     from './heroes.component';
 | 
						|
import { HeroDetailComponent } from './hero-detail.component';
 | 
						|
import { HeroService }         from './hero.service';
 | 
						|
 | 
						|
import { BAG_DIRECTIVES, BAG_PROVIDERS } from './bag';
 | 
						|
 | 
						|
@Component({
 | 
						|
  selector: 'my-app',
 | 
						|
  template: `
 | 
						|
    <h1>{{title}}</h1>
 | 
						|
    <nav>
 | 
						|
      <a [routerLink]="['Dashboard']">Dashboard</a>
 | 
						|
      <a [routerLink]="['Heroes']">Heroes</a>
 | 
						|
    </nav>
 | 
						|
    <router-outlet></router-outlet>
 | 
						|
    <hr>
 | 
						|
    <h1>Bag-a-specs</h1>
 | 
						|
    <my-if-parent-comp></my-if-parent-comp>
 | 
						|
    <h3>External Template Comp</h3>
 | 
						|
    <external-template-comp></external-template-comp>
 | 
						|
    <h3>Comp With External Template Comp</h3>
 | 
						|
    <comp-w-ext-comp></comp-w-ext-comp>
 | 
						|
  `,
 | 
						|
  /*
 | 
						|
 | 
						|
  */
 | 
						|
  styleUrls: ['app/app.component.css'],
 | 
						|
  directives: [RouterLink, RouterOutlet, BAG_DIRECTIVES],
 | 
						|
  providers: [
 | 
						|
    ROUTER_PROVIDERS,
 | 
						|
    HeroService,
 | 
						|
    BAG_PROVIDERS
 | 
						|
  ]
 | 
						|
})
 | 
						|
@RouteConfig([
 | 
						|
  { path: '/dashboard',  name: 'Dashboard',  component: DashboardComponent, useAsDefault: true },
 | 
						|
  { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent },
 | 
						|
  { path: '/heroes',    name: 'Heroes',      component: HeroesComponent }
 | 
						|
])
 | 
						|
export class AppComponent {
 | 
						|
  title = 'Tour of Heroes';
 | 
						|
}
 |