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';
 | |
| }
 |