honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
angular-cn/aio/content/examples/style-guide/ts/plnkr.no-link.html

4350 lines
129 KiB
HTML
Raw Blame History

<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[01-01/app/app.component.ts]" value="import { Component } from '@angular/core';
import { HeroService } from './heroes';
@Component({
moduleId: module.id,
selector: 'toh-app',
template: `
<toh-heroes></toh-heroes>
`,
styleUrls: ['./app.component.css'],
providers: [ HeroService ]
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[01-01/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '01-01', component: AppComponent }])
],
declarations: [
AppComponent,
HeroesComponent
],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
/*
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
*/"><input type="hidden" name="files[01-01/app/heroes/hero.component.avoid.ts]" value="/* avoid */
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component, OnInit } from '@angular/core';
class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<pre>{{heroes | json}}</pre>
`,
styleUrls: ['app/app.component.css']
})
class AppComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[] = [];
ngOnInit() {
getHeroes().then(heroes => this.heroes = heroes);
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
const HEROES: Hero[] = [
{id: 1, name: 'Bombasto'},
{id: 2, name: 'Tornado'},
{id: 3, name: 'Magneta'},
];
function getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES); // TODO: get hero data from the server;
}
/*
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
*/"><input type="hidden" name="files[01-01/app/heroes/heroes.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { Hero, HeroService } from './shared';
@Component({
selector: 'toh-heroes',
template: `
<pre>{{heroes | json}}</pre>
`
})
export class HeroesComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService: HeroService) {}
ngOnInit() {
this.heroService.getHeroes()
.then(heroes => this.heroes = heroes);
}
}
/*
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
*/"><input type="hidden" name="files[01-01/app/heroes/index.ts]" value="export * from './shared';
export * from './heroes.component';
/*
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
*/"><input type="hidden" name="files[01-01/app/heroes/shared/hero.model.ts]" value="export class Hero {
id: number;
name: string;
}
/*
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
*/"><input type="hidden" name="files[01-01/app/heroes/shared/hero.service.ts]" value="import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
getHeroes() {
return Promise.resolve(HEROES);
}
}
/*
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
*/"><input type="hidden" name="files[01-01/app/heroes/shared/index.ts]" value="export * from './hero.model';
export * from './hero.service';
export * from './mock-heroes';
/*
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
*/"><input type="hidden" name="files[01-01/app/heroes/shared/mock-heroes.ts]" value="import { Hero } from './hero.model';
export const HEROES: Hero[] = [
{id: 1, name: 'Bombasto'},
{id: 2, name: 'Tornado'},
{id: 3, name: 'Magneta'},
];
/*
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
*/"><input type="hidden" name="files[01-01/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[01-01/main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/*
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
*/"><input type="hidden" name="files[02-05/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'toh-app',
template: `
Tour of Heroes
`
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[02-05/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '02-05', component: AppComponent }])
],
declarations: [
AppComponent
],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
/*
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
*/"><input type="hidden" name="files[02-05/main.ts]" value="import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.then(success => console.log(`Bootstrap success`))
.catch(err => console.error(err));
/*
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
*/"><input type="hidden" name="files[02-07/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: `
<toh-hero></toh-hero>
<admin-users></admin-users>
`
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[02-07/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroComponent } from './heroes';
import { UsersComponent } from './users';
@NgModule({
imports: [
RouterModule.forChild([{ path: '02-07', component: AppComponent }])
],
declarations: [
AppComponent,
HeroComponent,
UsersComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[02-07/app/heroes/hero.component.avoid.ts]" value="import { Component } from '@angular/core';
/* avoid */
// HeroComponent is in the Tour of Heroes feature
@Component({
selector: 'hero'
})
export class HeroComponent {}
/*
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
*/"><input type="hidden" name="files[02-07/app/heroes/hero.component.ts]" value="import { Component } from '@angular/core';
@Component({
template: '<div>hero component</div>',
selector: 'toh-hero'
})
export class HeroComponent {}
/*
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
*/"><input type="hidden" name="files[02-07/app/heroes/index.ts]" value="export * from './hero.component';
/*
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
*/"><input type="hidden" name="files[02-07/app/index.ts]" value="export * from './heroes';
export * from './users';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[02-07/app/users/index.ts]" value="export * from './users.component';
/*
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
*/"><input type="hidden" name="files[02-07/app/users/users.component.avoid.ts]" value="import { Component } from '@angular/core';
/* avoid */
// UsersComponent is in an Admin feature
@Component({
selector: 'users'
})
export class UsersComponent {}
/*
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
*/"><input type="hidden" name="files[02-07/app/users/users.component.ts]" value="import { Component } from '@angular/core';
@Component({
template: '<div>users component</div>',
selector: 'admin-users'
})
export class UsersComponent {}
/*
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
*/"><input type="hidden" name="files[02-08/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: '<input type=&quot;text&quot; tohValidate>'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[02-08/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { InputHighlightDirective,
ValidateDirective } from './shared';
@NgModule({
imports: [
RouterModule.forChild([{ path: '02-08', component: AppComponent }])
],
declarations: [
AppComponent,
InputHighlightDirective,
ValidateDirective
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[02-08/app/index.ts]" value="export * from './shared';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[02-08/app/shared/index.ts]" value="export * from './input-highlight.directive';
export * from './validate.directive';
/*
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
*/"><input type="hidden" name="files[02-08/app/shared/input-highlight.directive.ts]" value="import { Directive, ElementRef } from '@angular/core';
@Directive({ selector: 'input'})
/** Highlight the attached input text element in blue */
export class InputHighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'powderblue';
}
}
/*
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
*/"><input type="hidden" name="files[02-08/app/shared/validate.directive.avoid.ts]" value="import { Directive } from '@angular/core';
/* avoid */
@Directive({
selector: '[validate]'
})
export class ValidateDirective {}
/*
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
*/"><input type="hidden" name="files[02-08/app/shared/validate.directive.ts]" value="import { Directive } from '@angular/core';
@Directive({
selector: '[tohValidate]'
})
export class ValidateDirective {}
/*
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
*/"><input type="hidden" name="files[03-01/app/app.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { ExceptionService } from './core';
@Component({
selector: 'sg-app',
template: '<div>The expected error is {{errorCode}}</div>',
providers: [ExceptionService]
})
export class AppComponent implements OnInit {
errorCode: number;
constructor(private exceptionService: ExceptionService) { }
ngOnInit() {
this.errorCode = this.exceptionService.getException();
}
}
/*
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
*/"><input type="hidden" name="files[03-01/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
RouterModule.forChild([{ path: '03-01', component: AppComponent }])
],
declarations: [
AppComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[03-01/app/core/exception.service.avoid.ts]" value="import { Injectable } from '@angular/core';
@Injectable()
/* avoid */
export class exceptionService {
constructor() { }
}
/*
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
*/"><input type="hidden" name="files[03-01/app/core/exception.service.ts]" value="import { Injectable } from '@angular/core';
@Injectable()
export class ExceptionService {
constructor() { }
// testing harness
getException() { return 42; }
}
/*
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
*/"><input type="hidden" name="files[03-01/app/core/index.ts]" value="export * from './exception.service';
/*
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
*/"><input type="hidden" name="files[03-01/app/index.ts]" value="export * from './core';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[03-02/app/app.component.ts]" value="import { Component } from '@angular/core';
import { heroesUrl, mockHeroes, VILLAINS_URL } from './core';
@Component({
selector: 'sg-app',
template: `
<div>Heroes url: {{heroesUrl}}</div>
<div>Villains url: {{villainsUrl}}</div>
<h4>Mock Heroes</h4>
<div *ngFor=&quot;let hero of heroes&quot;>{{hero}}</div>
`
})
export class AppComponent {
heroes = mockHeroes; // prefer
heroesUrl = heroesUrl; // prefer
villainsUrl = VILLAINS_URL; // tolerate
}
/*
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
*/"><input type="hidden" name="files[03-02/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '03-02', component: AppComponent }])
],
declarations: [
AppComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[03-02/app/core/data.service.ts]" value="export const mockHeroes = ['Sam', 'Jill']; // prefer
export const heroesUrl = 'api/heroes'; // prefer
export const VILLAINS_URL = 'api/villains'; // tolerate
/*
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
*/"><input type="hidden" name="files[03-02/app/core/index.ts]" value="export * from './data.service';
/*
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
*/"><input type="hidden" name="files[03-02/app/index.ts]" value="export * from './core';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[03-03/app/app.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { Hero, HeroCollectorService } from './core';
@Component({
selector: 'sg-app',
template: '<div>Our hero is {{hero.name}} and {{hero.power}}</div>',
providers: [HeroCollectorService]
})
export class AppComponent implements OnInit {
hero: Hero;
constructor(private heroCollectorService: HeroCollectorService) { }
ngOnInit() {
this.hero = this.heroCollectorService.getHero();
}
}
/*
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
*/"><input type="hidden" name="files[03-03/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
RouterModule.forChild([{ path: '03-03', component: AppComponent }])
],
declarations: [
AppComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[03-03/app/core/hero-collector.service.avoid.ts]" value="/* avoid */
import { Injectable } from '@angular/core';
import { IHero } from './hero.model.avoid';
@Injectable()
export class HeroCollectorService {
hero: IHero;
constructor() { }
}
/*
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
*/"><input type="hidden" name="files[03-03/app/core/hero-collector.service.ts]" value="import { Injectable } from '@angular/core';
import { Hero } from './hero.model';
@Injectable()
export class HeroCollectorService {
hero: Hero;
constructor() { }
// testing harness
getHero() {
this.hero = {
name: 'RubberMan',
power: 'He is so elastic'
};
return this.hero;
}
}
/*
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
*/"><input type="hidden" name="files[03-03/app/core/hero.model.avoid.ts]" value="/* avoid */
export interface IHero {
name: string;
power: string;
}
export class Hero implements IHero {
name: string;
power: string;
}
/*
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
*/"><input type="hidden" name="files[03-03/app/core/hero.model.ts]" value="export class Hero {
name: string;
power: string;
}
/*
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
*/"><input type="hidden" name="files[03-03/app/core/index.ts]" value="export * from './hero-collector.service';
export * from './hero.model';
/*
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
*/"><input type="hidden" name="files[03-03/app/index.ts]" value="export * from './core';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[03-04/app/app.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { ToastService } from './core';
@Component({
selector: 'sg-app',
template: `
<button (click)=&quot;show()&quot;>Show toast</button>
<button (click)=&quot;hide()&quot;>Hide toast</button>
`,
providers: [ToastService]
})
export class AppComponent implements OnInit {
constructor(private toastService: ToastService) { }
hide() {
this.toastService.hide();
}
show() {
this.toastService.show();
}
ngOnInit() {
this.toastService.activate('Hello style-guide!');
}
}
/*
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
*/"><input type="hidden" name="files[03-04/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '03-04', component: AppComponent }])
],
declarations: [
AppComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[03-04/app/core/index.ts]" value="export * from './toast.service';
/*
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
*/"><input type="hidden" name="files[03-04/app/core/toast.service.avoid.ts]" value="/* avoid */
import { Injectable } from '@angular/core';
@Injectable()
export class ToastService {
message: string;
private _toastCount: number;
hide() {
this._toastCount--;
this._log();
}
show() {
this._toastCount++;
this._log();
}
private _log() {
console.log(this.message);
}
}
/*
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
*/"><input type="hidden" name="files[03-04/app/core/toast.service.ts]" value="import { Injectable } from '@angular/core';
@Injectable()
export class ToastService {
message: string;
private toastCount: number;
hide() {
this.toastCount--;
this.log();
}
show() {
this.toastCount++;
this.log();
}
private log() {
console.log(this.message);
}
// testing harness
activate(message: string) {
this.message = message;
}
}
/*
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
*/"><input type="hidden" name="files[03-04/app/index.ts]" value="export * from './core';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[03-06/app/app.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { Hero, HeroService } from './heroes';
import { ExceptionService, SpinnerService, ToastService } from './core';
@Component({
moduleId: module.id,
selector: 'sg-app',
templateUrl: './app.component.html',
providers: [HeroService, ExceptionService, SpinnerService, ToastService]
})
export class AppComponent implements OnInit {
favorite: Hero;
heroes: Hero[];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.heroService.getHero(1).subscribe(hero => this.favorite = hero);
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
}
}
/*
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
*/"><input type="hidden" name="files[03-06/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '03-06', component: AppComponent }])
],
declarations: [
AppComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[03-06/app/core/exception.service.ts]" value="import { Injectable } from '@angular/core';
@Injectable()
export class ExceptionService { }
/*
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
*/"><input type="hidden" name="files[03-06/app/core/index.ts]" value="export * from './exception.service';
export * from './spinner';
export * from './toast';
/*
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
*/"><input type="hidden" name="files[03-06/app/core/spinner/index.ts]" value="export * from './spinner.component';
export * from './spinner.service';
/*
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
*/"><input type="hidden" name="files[03-06/app/core/spinner/spinner.component.ts]" value="import { Component, OnDestroy, OnInit } from '@angular/core';
import { SpinnerService } from './spinner.service';
@Component({
selector: 'toh-spinner',
template: '<div>spinner</div>'
})
export class SpinnerComponent implements OnDestroy, OnInit {
constructor(private spinnerService: SpinnerService) { }
ngOnInit() { }
ngOnDestroy() { }
}
/*
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
*/"><input type="hidden" name="files[03-06/app/core/spinner/spinner.service.ts]" value="import { Injectable } from '@angular/core';
export interface ISpinnerState { }
@Injectable()
export class SpinnerService {
spinnerState: any;
show() { }
hide() { }
}
/*
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
*/"><input type="hidden" name="files[03-06/app/core/toast/index.ts]" value="export * from './toast.component';
export * from './toast.service';
/*
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
*/"><input type="hidden" name="files[03-06/app/core/toast/toast.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { ToastService } from './toast.service';
@Component({
selector: 'toh-toast',
template: '<div>toast</div>'
})
export class ToastComponent implements OnInit {
constructor(toastService: ToastService) { }
ngOnInit() { }
}
/*
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
*/"><input type="hidden" name="files[03-06/app/core/toast/toast.service.ts]" value="import { Injectable } from '@angular/core';
@Injectable()
export class ToastService {
activate: (message?: string, title?: string) => void;
}
/*
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
*/"><input type="hidden" name="files[03-06/app/heroes/index.ts]" value="export * from './shared';
/*
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
*/"><input type="hidden" name="files[03-06/app/heroes/shared/hero.model.ts]" value="export class Hero {
name: string;
power: string;
}
/*
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
*/"><input type="hidden" name="files[03-06/app/heroes/shared/hero.service.avoid.ts]" value="/* avoid */
import { ExceptionService, SpinnerService, ToastService } from '../../core';
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import { Hero } from './hero.model';
@Injectable()
export class HeroService {
constructor(
private exceptionService: ExceptionService,
private spinnerService: SpinnerService,
private toastService: ToastService,
private http: Http
) { }
getHero(id: number) {
return this.http.get(`api/heroes/${id}`)
.map(response => response.json().data as Hero);
}
getHeroes() {
return this.http.get(`api/heroes`)
.map(response => response.json().data as Hero[]);
}
}
/*
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
*/"><input type="hidden" name="files[03-06/app/heroes/shared/hero.service.ts]" value="import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Hero } from './hero.model';
import { ExceptionService, SpinnerService, ToastService } from '../../core';
@Injectable()
export class HeroService {
cachedHeroes: Hero[];
constructor(
private exceptionService: ExceptionService,
private spinnerService: SpinnerService,
private toastService: ToastService,
private http: Http
) { }
getHero(id: number) {
return this.http.get(`api/heroes/${id}`)
.map(response => response.json().data as Hero);
}
getHeroes() {
return this.http.get(`api/heroes`)
.map(response => response.json().data as Hero[]);
}
}
/*
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
*/"><input type="hidden" name="files[03-06/app/heroes/shared/index.ts]" value="export * from './hero.model';
export * from './hero.service';
/*
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
*/"><input type="hidden" name="files[03-06/app/index.ts]" value="export * from './heroes';
export * from './core';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[03-06/app/shared/toast/toast.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { ToastService } from '../../core';
@Component({
selector: 'toh-toast',
template: '<div>toast</div>'
})
export class ToastComponent implements OnInit {
constructor(toastService: ToastService) { }
ngOnInit() { }
}
/*
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
*/"><input type="hidden" name="files[04-08/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: '<toh-heroes></toh-heroes>'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[04-08/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '04-08', component: AppComponent }])
],
declarations: [
AppComponent,
HeroesComponent
],
exports: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[04-08/app/heroes/heroes.component.ts]" value="import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'toh-heroes',
templateUrl: './heroes.component.html'
})
export class HeroesComponent implements OnInit {
constructor() { /* ... */ }
ngOnInit() { /* ... */ }
}
/*
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
*/"><input type="hidden" name="files[04-10/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: '<toh-heroes></toh-heroes>'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[04-10/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { SharedModule } from './shared/shared.module';
@NgModule({
imports: [
BrowserModule,
SharedModule,
RouterModule.forChild([{ path: '04-10', component: AppComponent }])
],
declarations: [
AppComponent,
HeroesComponent
],
exports: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[04-10/app/heroes/heroes.component.ts]" value="import { Component } from '@angular/core';
import { FilterTextService } from '../shared/filter-text/filter-text.service';
@Component({
moduleId: module.id,
selector: 'toh-heroes',
templateUrl: './heroes.component.html'
})
export class HeroesComponent {
heroes = [
{ id: 1, name: 'Windstorm' },
{ id: 2, name: 'Bombasto' },
{ id: 3, name: 'Magneta' },
{ id: 4, name: 'Tornado' }
];
filteredHeroes = this.heroes;
constructor(private filterService: FilterTextService) { }
filterChanged(searchText: string) {
this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes);
}
}
/*
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
*/"><input type="hidden" name="files[04-10/app/shared/filter-text/filter-text.component.ts]" value="import { Component, EventEmitter, Output } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'toh-filter-text',
template: '<input type=&quot;text&quot; id=&quot;filterText&quot; [(ngModel)]=&quot;filter&quot; (keyup)=&quot;filterChanged($event)&quot; />'
})
export class FilterTextComponent {
@Output() changed: EventEmitter<string>;
filter: string;
constructor() {
this.changed = new EventEmitter<string>();
}
clear() {
this.filter = '';
}
filterChanged(event: any) {
event.preventDefault();
console.log(`Filter Changed: ${this.filter}`);
this.changed.emit(this.filter);
}
}
/*
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
*/"><input type="hidden" name="files[04-10/app/shared/filter-text/filter-text.service.ts]" value="import { Injectable } from '@angular/core';
@Injectable()
export class FilterTextService {
constructor() {
console.log('Created an instance of FilterTextService');
}
filter(data: string, props: Array<string>, originalList: Array<any>) {
let filteredList: any[];
if (data &amp;&amp; props &amp;&amp; originalList) {
data = data.toLowerCase();
let filtered = originalList.filter(item => {
let match = false;
for (let prop of props) {
if (item[prop].toString().toLowerCase().indexOf(data) > -1) {
match = true;
break;
}
};
return match;
});
filteredList = filtered;
} else {
filteredList = originalList;
}
return filteredList;
}
}
/*
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
*/"><input type="hidden" name="files[04-10/app/shared/init-caps.pipe.ts]" value="import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'initCaps' })
export class InitCapsPipe implements PipeTransform {
transform = (value: string) => value;
}
/*
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
*/"><input type="hidden" name="files[04-10/app/shared/shared.module.ts]" value="import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FilterTextComponent } from './filter-text/filter-text.component';
import { FilterTextService } from './filter-text/filter-text.service';
import { InitCapsPipe } from './init-caps.pipe';
@NgModule({
imports: [CommonModule, FormsModule],
declarations: [
FilterTextComponent,
InitCapsPipe
],
providers: [FilterTextService],
exports: [
CommonModule,
FormsModule,
FilterTextComponent,
InitCapsPipe
]
})
export class SharedModule { }
/*
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
*/"><input type="hidden" name="files[04-11/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'toh-app',
template: `
<toh-nav></toh-nav>
<toh-heroes></toh-heroes>
<toh-spinner></toh-spinner>
`
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[04-11/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { CoreModule } from './core/core.module';
@NgModule({
imports: [
BrowserModule,
CoreModule,
RouterModule.forChild([{ path: '04-11', component: AppComponent }])
],
declarations: [
AppComponent,
HeroesComponent
],
exports: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[04-11/app/core/core.module.ts]" value="import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoggerService } from './logger.service';
import { NavComponent } from './nav/nav.component';
import { SpinnerComponent } from './spinner/spinner.component';
import { SpinnerService } from './spinner/spinner.service';
@NgModule({
imports: [
CommonModule // we use ngFor
],
&nbsp;exports: [NavComponent, SpinnerComponent],
&nbsp;declarations: [NavComponent, SpinnerComponent],
providers: [LoggerService, SpinnerService]
})
export class CoreModule { }
/*
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
*/"><input type="hidden" name="files[04-11/app/core/index.ts]" value="export * from './logger.service';
export * from './spinner/spinner.service';
export * from './nav/nav.component';
/*
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
*/"><input type="hidden" name="files[04-11/app/core/logger.service.ts]" value="import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
log(msg: string) {
console.log(msg);
}
error(msg: string) {
console.error(msg);
}
}
/*
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
*/"><input type="hidden" name="files[04-11/app/core/nav/nav.component.ts]" value="import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'toh-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css'],
})
export class NavComponent implements OnInit {
menuItems = [
'Heroes',
'Villains',
'Other'
];
ngOnInit() { }
constructor() { }
}
/*
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
*/"><input type="hidden" name="files[04-11/app/core/spinner/spinner.component.ts]" value="import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { LoggerService } from '../logger.service';
import { SpinnerState, SpinnerService } from './spinner.service';
@Component({
moduleId: module.id,
selector: 'toh-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnDestroy, OnInit {
visible = false;
private spinnerStateChanged: Subscription;
constructor(
private loggerService: LoggerService,
private spinnerService: SpinnerService
) { }
ngOnInit() {
console.log(this.visible);
this.spinnerStateChanged = this.spinnerService.spinnerState
.subscribe((state: SpinnerState) => {
this.visible = state.show;
this.loggerService.log(`visible=${this.visible}`);
});
}
ngOnDestroy() {
this.spinnerStateChanged.unsubscribe();
}
}
/*
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
*/"><input type="hidden" name="files[04-11/app/core/spinner/spinner.service.ts]" value="import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
export interface SpinnerState {
show: boolean;
}
@Injectable()
export class SpinnerService {
private spinnerSubject = new Subject<SpinnerState>();
spinnerState = this.spinnerSubject.asObservable();
constructor() { }
show() {
this.spinnerSubject.next(<SpinnerState>{ show: true });
}
hide() {
this.spinnerSubject.next(<SpinnerState>{ show: false });
}
}
/*
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
*/"><input type="hidden" name="files[04-11/app/heroes/heroes.component.ts]" value="import { Component } from '@angular/core';
import { LoggerService } from '../core/logger.service';
import { SpinnerService } from '../core/spinner/spinner.service';
@Component({
moduleId: module.id,
selector: 'toh-heroes',
templateUrl: './heroes.component.html'
})
export class HeroesComponent {
heroes: any[];
constructor(
private loggerService: LoggerService,
private spinnerService: SpinnerService
) { }
getHeroes() {
this.loggerService.log(`Getting heroes`);
this.spinnerService.show();
setTimeout(() => {
this.heroes = [
{ id: 1, name: 'Windstorm' },
{ id: 2, name: 'Bombasto' },
{ id: 3, name: 'Magneta' },
{ id: 4, name: 'Tornado' }
];
this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
this.spinnerService.hide();
}, 2000);
}
}
/*
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
*/"><input type="hidden" name="files[04-12/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'toh-app',
template: `
<toh-nav></toh-nav>
<toh-heroes></toh-heroes>
`
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[04-12/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { CoreModule } from './core/core.module';
@NgModule({
imports: [
BrowserModule,
CoreModule,
RouterModule.forChild([{ path: '04-12', component: AppComponent }])
],
declarations: [
AppComponent,
HeroesComponent
],
exports: [ AppComponent ],
entryComponents: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[04-12/app/core/core.module.ts]" value="import { NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoggerService } from './logger.service';
import { NavComponent } from './nav/nav.component';
import { throwIfAlreadyLoaded } from './module-import-guard';
@NgModule({
imports: [
CommonModule // we use ngFor
],
&nbsp;exports: [NavComponent],
&nbsp;declarations: [NavComponent],
providers: [LoggerService]
})
export class CoreModule {
constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
}
/*
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
*/"><input type="hidden" name="files[04-12/app/core/index.ts]" value="export * from './logger.service';
export * from './nav/nav.component';
/*
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
*/"><input type="hidden" name="files[04-12/app/core/logger.service.ts]" value="import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
log(msg: string) {
console.log(msg);
}
error(msg: string) {
console.error(msg);
}
}
/*
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
*/"><input type="hidden" name="files[04-12/app/core/module-import-guard.ts]" value="export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
if (parentModule) {
throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
}
}
/*
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
*/"><input type="hidden" name="files[04-12/app/core/nav/nav.component.ts]" value="import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'toh-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css'],
})
export class NavComponent implements OnInit {
menuItems = [
'Heroes',
'Villains',
'Other'
];
ngOnInit() { }
constructor() { }
}
/*
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
*/"><input type="hidden" name="files[04-12/app/heroes/heroes.component.ts]" value="import { Component } from '@angular/core';
import { LoggerService } from '../core/logger.service';
@Component({
moduleId: module.id,
selector: 'toh-heroes',
templateUrl: './heroes.component.html'
})
export class HeroesComponent {
heroes: any[];
constructor(private loggerService: LoggerService) { }
getHeroes() {
this.loggerService.log(`Getting heroes`);
this.heroes = [
{ id: 1, name: 'Windstorm' },
{ id: 2, name: 'Bombasto' },
{ id: 3, name: 'Magneta' },
{ id: 4, name: 'Tornado' }
];
this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
}
}
/*
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
*/"><input type="hidden" name="files[05-02/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'sg-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-02/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroButtonComponent } from './heroes';
@NgModule({
imports: [
RouterModule.forChild([{ path: '05-02', component: AppComponent }])
],
declarations: [
AppComponent,
HeroButtonComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-02/app/heroes/index.ts]" value="export * from './shared';
/*
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
*/"><input type="hidden" name="files[05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts]" value="import { Component } from '@angular/core';
/* avoid */
@Component({
moduleId: module.id,
selector: 'tohHeroButton',
templateUrl: './hero-button.component.html'
})
export class HeroButtonComponent {}
/*
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
*/"><input type="hidden" name="files[05-02/app/heroes/shared/hero-button/hero-button.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'toh-hero-button',
templateUrl: './hero-button.component.html'
})
export class HeroButtonComponent {}
/*
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
*/"><input type="hidden" name="files[05-02/app/heroes/shared/hero-button/index.ts]" value="export * from './hero-button.component';
/*
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
*/"><input type="hidden" name="files[05-02/app/heroes/shared/index.ts]" value="export * from './hero-button';
/*
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
*/"><input type="hidden" name="files[05-02/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[05-03/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'sg-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-03/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroButtonComponent } from './heroes';
@NgModule({
imports: [
RouterModule.forChild([{ path: '05-03', component: AppComponent }])
],
declarations: [
AppComponent,
HeroButtonComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-03/app/heroes/index.ts]" value="export * from './shared';
/*
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
*/"><input type="hidden" name="files[05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts]" value="import { Component } from '@angular/core';
/* avoid */
@Component({
moduleId: module.id,
selector: '[tohHeroButton]',
templateUrl: './hero-button.component.html'
})
export class HeroButtonComponent {}
/*
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
*/"><input type="hidden" name="files[05-03/app/heroes/shared/hero-button/hero-button.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'toh-hero-button',
templateUrl: './hero-button.component.html'
})
export class HeroButtonComponent {}
/*
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
*/"><input type="hidden" name="files[05-03/app/heroes/shared/hero-button/index.ts]" value="export * from './hero-button.component';
/*
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
*/"><input type="hidden" name="files[05-03/app/heroes/shared/index.ts]" value="export * from './hero-button';
/*
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
*/"><input type="hidden" name="files[05-03/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[05-04/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: '<toh-heroes></toh-heroes>'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-04/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes';
import { HeroService } from './heroes/shared';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '05-04', component: AppComponent }])
],
declarations: [
AppComponent,
HeroesComponent
],
exports: [ AppComponent ],
providers: [ HeroService ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-04/app/heroes/heroes.component.avoid.ts]" value="import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Hero, HeroService } from './shared';
/* avoid */
@Component({
selector: 'toh-heroes',
template: `
<div>
<h2>My Heroes</h2>
<ul class=&quot;heroes&quot;>
<li *ngFor=&quot;let hero of heroes | async&quot; (click)=&quot;selectedHero=hero&quot;>
<span class=&quot;badge&quot;>{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf=&quot;selectedHero&quot;>
<h2>{{selectedHero.name | uppercase}} is my hero</h2>
</div>
</div>
`,
styles: [`
.heroes {
margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
`]
})
export class HeroesComponent implements OnInit {
heroes: Observable<Hero[]>;
selectedHero: Hero;
constructor(private heroService: HeroService) { }
ngOnInit() {
this.heroes = this.heroService.getHeroes();
}
}
/*
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
*/"><input type="hidden" name="files[05-04/app/heroes/heroes.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Hero, HeroService } from './shared';
@Component({
moduleId: module.id,
selector: 'toh-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes: Observable<Hero[]>;
selectedHero: Hero;
constructor(private heroService: HeroService) { }
ngOnInit() {
this.heroes = this.heroService.getHeroes();
}
}
/*
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
*/"><input type="hidden" name="files[05-04/app/heroes/index.ts]" value="export * from './shared';
export * from './heroes.component';
/*
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
*/"><input type="hidden" name="files[05-04/app/heroes/shared/hero.model.ts]" value="export class Hero {
id: number;
name: string;
}
/*
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
*/"><input type="hidden" name="files[05-04/app/heroes/shared/hero.service.ts]" value="import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Hero } from './hero.model';
@Injectable()
export class HeroService {
constructor(private http: Http) {}
getHeroes(): Observable<Hero[]> {
return this.http.get('api/heroes')
.map(resp => resp.json().data as Hero[]);
}
}
/*
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
*/"><input type="hidden" name="files[05-04/app/heroes/shared/index.ts]" value="export * from './hero.model';
export * from './hero.service';
/*
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
*/"><input type="hidden" name="files[05-04/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[05-12/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: '<toh-hero-button label=&quot;OK&quot;></toh-hero-button>'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-12/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroButtonComponent } from './heroes';
@NgModule({
imports: [
RouterModule.forChild([{ path: '05-12', component: AppComponent }])
],
declarations: [
AppComponent,
HeroButtonComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-12/app/heroes/index.ts]" value="export * from './shared';
/*
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
*/"><input type="hidden" name="files[05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts]" value="import { Component, EventEmitter } from '@angular/core';
/* avoid */
@Component({
selector: 'toh-hero-button',
template: `<button></button>`,
inputs: [
'label'
],
outputs: [
'change'
]
})
export class HeroButtonComponent {
change = new EventEmitter<any>();
label: string;
}
/*
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
*/"><input type="hidden" name="files[05-12/app/heroes/shared/hero-button/hero-button.component.ts]" value="import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'toh-hero-button',
template: `<button>{{label}}</button>`
})
export class HeroButtonComponent {
@Output() change = new EventEmitter<any>();
@Input() label: string;
}
/*
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
*/"><input type="hidden" name="files[05-12/app/heroes/shared/hero-button/index.ts]" value="export * from './hero-button.component';
/*
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
*/"><input type="hidden" name="files[05-12/app/heroes/shared/index.ts]" value="export * from './hero-button';
/*
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
*/"><input type="hidden" name="files[05-12/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[05-13/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'sg-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-13/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroButtonComponent, HeroHighlightDirective } from './heroes';
@NgModule({
imports: [
RouterModule.forChild([{ path: '05-13', component: AppComponent }])
],
declarations: [
AppComponent,
HeroButtonComponent, HeroHighlightDirective
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-13/app/heroes/index.ts]" value="export * from './shared';
/*
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
*/"><input type="hidden" name="files[05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts]" value="import { Component, EventEmitter, Input, Output } from '@angular/core';
/* avoid pointless aliasing */
@Component({
selector: 'toh-hero-button',
template: `<button>{{label}}</button>`
})
export class HeroButtonComponent {
// Pointless aliases
@Output('changeEvent') change = new EventEmitter<any>();
@Input('labelAttribute') label: string;
}
/*
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
*/"><input type="hidden" name="files[05-13/app/heroes/shared/hero-button/hero-button.component.ts]" value="import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'toh-hero-button',
template: `<button>{{label}}</button>`
})
export class HeroButtonComponent {
// No aliases
@Output() change = new EventEmitter<any>();
@Input() label: string;
}
/*
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
*/"><input type="hidden" name="files[05-13/app/heroes/shared/hero-button/index.ts]" value="export * from './hero-button.component';
/*
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
*/"><input type="hidden" name="files[05-13/app/heroes/shared/hero-highlight.directive.ts]" value="import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
@Directive({ selector: '[heroHighlight]' })
export class HeroHighlightDirective implements OnChanges {
// Aliased because `color` is a better property name than `heroHighlight`
@Input('heroHighlight') color: string;
constructor(private el: ElementRef) {}
ngOnChanges() {
this.el.nativeElement.style.backgroundColor = this.color || 'yellow';
}
}
/*
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
*/"><input type="hidden" name="files[05-13/app/heroes/shared/index.ts]" value="export * from './hero-button';
export * from './hero-highlight.directive';
/*
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
*/"><input type="hidden" name="files[05-13/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[05-14/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: `<toh-toast></toh-toast>`
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-14/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ToastComponent } from './shared';
@NgModule({
imports: [
RouterModule.forChild([{ path: '05-14', component: AppComponent }])
],
declarations: [
AppComponent,
ToastComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-14/app/index.ts]" value="export * from './shared';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[05-14/app/shared/index.ts]" value="export * from './toast';
/*
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
*/"><input type="hidden" name="files[05-14/app/shared/toast/index.ts]" value="export * from './toast.component';
/*
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
*/"><input type="hidden" name="files[05-14/app/shared/toast/toast.component.avoid.ts]" value="import { OnInit } from '@angular/core';
/* avoid */
export class ToastComponent implements OnInit {
private defaults = {
title: '',
message: 'May the Force be with you'
};
message: string;
title: string;
private toastElement: any;
ngOnInit() {
this.toastElement = document.getElementById('toh-toast');
}
// private methods
private hide() {
this.toastElement.style.opacity = 0;
window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
}
activate(message = this.defaults.message, title = this.defaults.title) {
this.title = title;
this.message = message;
this.show();
}
private show() {
console.log(this.message);
this.toastElement.style.opacity = 1;
this.toastElement.style.zIndex = 9999;
window.setTimeout(() => this.hide(), 2500);
}
}
/*
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
*/"><input type="hidden" name="files[05-14/app/shared/toast/toast.component.ts]" value="import { Component, OnInit } from '@angular/core';
@Component({
selector: 'toh-toast',
template: `...`
})
export class ToastComponent implements OnInit {
// public properties
message: string;
title: string;
// private fields
private defaults = {
title: '',
message: 'May the Force be with you'
};
private toastElement: any;
// public methods
activate(message = this.defaults.message, title = this.defaults.title) {
this.title = title;
this.message = message;
this.show();
}
ngOnInit() {
this.toastElement = document.getElementById('toh-toast');
}
// private methods
private hide() {
this.toastElement.style.opacity = 0;
window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
}
private show() {
console.log(this.message);
this.toastElement.style.opacity = 1;
this.toastElement.style.zIndex = 9999;
window.setTimeout(() => this.hide(), 2500);
}
}
/*
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
*/"><input type="hidden" name="files[05-15/app/app.component.ts]" value="import { Component } from '@angular/core';
import { HeroService } from './heroes';
@Component({
selector: 'sg-app',
template: '<toh-hero-list></toh-hero-list>',
providers: [HeroService]
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-15/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroListComponent } from './heroes';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '05-15', component: AppComponent }])
],
declarations: [
AppComponent,
HeroListComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-15/app/heroes/hero-list/hero-list.component.avoid.ts]" value="/* avoid */
import { OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/finally';
import 'rxjs/add/operator/map';
import { Hero } from '../shared/hero.model';
const heroesUrl = 'http://angular.io';
export class HeroListComponent implements OnInit {
heroes: Hero[];
constructor(private http: Http) {}
getHeroes() {
this.heroes = [];
this.http.get(heroesUrl)
.map((response: Response) => <Hero[]>response.json().data)
.catch(this.catchBadResponse)
.finally(() => this.hideSpinner())
.subscribe((heroes: Hero[]) => this.heroes = heroes);
}
ngOnInit() {
this.getHeroes();
}
private catchBadResponse(err: any, source: Observable<any>) {
// log and handle the exception
return new Observable();
}
private hideSpinner() {
// hide the spinner
}
}
/*
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
*/"><input type="hidden" name="files[05-15/app/heroes/hero-list/hero-list.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { Hero, HeroService } from '../shared';
@Component({
selector: 'toh-hero-list',
template: `...`
})
export class HeroListComponent implements OnInit {
heroes: Hero[];
constructor(private heroService: HeroService) {}
getHeroes() {
this.heroes = [];
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
ngOnInit() {
this.getHeroes();
}
}
/*
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
*/"><input type="hidden" name="files[05-15/app/heroes/hero-list/index.ts]" value="export * from './hero-list.component';
/*
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
*/"><input type="hidden" name="files[05-15/app/heroes/index.ts]" value="export * from './hero-list';
export * from './shared';
/*
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
*/"><input type="hidden" name="files[05-15/app/heroes/shared/hero.model.ts]" value="export class Hero {
id: number;
name: string;
}
/*
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
*/"><input type="hidden" name="files[05-15/app/heroes/shared/hero.service.ts]" value="import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { Hero } from './hero.model';
@Injectable()
export class HeroService {
getHeroes() {
let heroes: Hero[] = [];
return Observable.of(heroes);
}
}
/*
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
*/"><input type="hidden" name="files[05-15/app/heroes/shared/index.ts]" value="export * from './hero.model';
export * from './hero.service';
/*
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
*/"><input type="hidden" name="files[05-15/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[05-16/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'sg-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-16/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroComponent } from './heroes';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '05-16', component: AppComponent }])
],
declarations: [
AppComponent,
HeroComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-16/app/heroes/hero.component.avoid.ts]" value="import { Component, EventEmitter, Output } from '@angular/core';
/* avoid */
@Component({
selector: 'toh-hero',
template: `...`
})
export class HeroComponent {
@Output() onSavedTheDay = new EventEmitter<boolean>();
}
/*
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
*/"><input type="hidden" name="files[05-16/app/heroes/hero.component.ts]" value="import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'toh-hero',
template: `...`
})
export class HeroComponent {
@Output() savedTheDay = new EventEmitter<boolean>();
}
/*
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
*/"><input type="hidden" name="files[05-16/app/heroes/index.ts]" value="export * from './hero.component';
/*
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
*/"><input type="hidden" name="files[05-16/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[05-17/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: '<toh-hero-list></toh-hero-list>'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[05-17/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroComponent, HeroListComponent } from './heroes';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '05-17', component: AppComponent }])
],
declarations: [
AppComponent,
HeroComponent,
HeroListComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[05-17/app/heroes/hero-list/hero-list.component.avoid.ts]" value="import { Component } from '@angular/core';
import { Hero } from '../shared/hero.model';
/* avoid */
@Component({
selector: 'toh-hero-list',
template: `
<section>
Our list of heroes:
<hero-profile *ngFor=&quot;let hero of heroes&quot; [hero]=&quot;hero&quot;>
</hero-profile>
Total powers: {{totalPowers}}<br>
Average power: {{totalPowers / heroes.length}}
</section>
`
})
export class HeroListComponent {
heroes: Hero[];
totalPowers: number;
}
/*
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
*/"><input type="hidden" name="files[05-17/app/heroes/hero-list/hero-list.component.ts]" value="import { Component } from '@angular/core';
import { Hero } from '../shared/hero.model';
@Component({
selector: 'toh-hero-list',
template: `
<section>
Our list of heroes:
<toh-hero *ngFor=&quot;let hero of heroes&quot; [hero]=&quot;hero&quot;>
</toh-hero>
Total powers: {{totalPowers}}<br>
Average power: {{avgPower}}
</section>
`
})
export class HeroListComponent {
heroes: Hero[];
totalPowers: number;
// testing harness
constructor() {
this.heroes = [];
}
get avgPower() {
return this.totalPowers / this.heroes.length;
}
}
/*
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
*/"><input type="hidden" name="files[05-17/app/heroes/hero-list/index.ts]" value="export * from './hero-list.component';
/*
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
*/"><input type="hidden" name="files[05-17/app/heroes/hero/hero.component.ts]" value="import { Component, Input } from '@angular/core';
import { Hero } from '../shared/hero.model';
@Component({
selector: 'toh-hero',
template: `...`
})
export class HeroComponent {
@Input() hero: Hero;
}
/*
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
*/"><input type="hidden" name="files[05-17/app/heroes/hero/index.ts]" value="export * from './hero.component';
/*
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
*/"><input type="hidden" name="files[05-17/app/heroes/index.ts]" value="export * from './hero';
export * from './hero-list';
export * from './shared';
/*
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
*/"><input type="hidden" name="files[05-17/app/heroes/shared/hero.model.ts]" value="export class Hero {
id: number;
name: string;
}
/*
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
*/"><input type="hidden" name="files[05-17/app/heroes/shared/index.ts]" value="export * from './hero.model';
/*
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
*/"><input type="hidden" name="files[05-17/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[06-01/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'sg-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[06-01/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HighlightDirective } from './shared';
@NgModule({
imports: [
RouterModule.forChild([{ path: '06-01', component: AppComponent }])
],
declarations: [
AppComponent,
HighlightDirective
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[06-01/app/index.ts]" value="export * from './shared';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[06-01/app/shared/highlight.directive.ts]" value="import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[tohHighlight]'
})
export class HighlightDirective {
@HostListener('mouseover') onMouseEnter() {
// do highlight work
}
}
/*
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
*/"><input type="hidden" name="files[06-01/app/shared/index.ts]" value="export * from './highlight.directive';
/*
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
*/"><input type="hidden" name="files[06-03/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: `
<input type=&quot;text&quot; tohValidator>
<textarea tohValidator2></textarea>`
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[06-03/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ValidatorDirective, Validator2Directive } from './shared';
@NgModule({
imports: [
RouterModule.forChild([{ path: '06-03', component: AppComponent }])
],
declarations: [
AppComponent,
ValidatorDirective, Validator2Directive
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[06-03/app/index.ts]" value="export * from './shared';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[06-03/app/shared/index.ts]" value="export * from './validator.directive';
export * from './validator2.directive';
/*
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
*/"><input type="hidden" name="files[06-03/app/shared/validator.directive.ts]" value="import { Directive, HostBinding, HostListener } from '@angular/core';
@Directive({
selector: '[tohValidator]'
})
export class ValidatorDirective {
@HostBinding('attr.role') role = 'button';
@HostListener('mouseenter') onMouseEnter() {
// do work
}
}
/*
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
*/"><input type="hidden" name="files[06-03/app/shared/validator2.directive.ts]" value="import { Directive } from '@angular/core';
@Directive({
selector: '[tohValidator2]',
host: {
'attr.role': 'button',
'(mouseenter)': 'onMouseEnter()'
}
})
export class Validator2Directive {
role = 'button';
onMouseEnter() {
// do work
}
}
/*
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
*/"><input type="hidden" name="files[07-01/app/app.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { Hero, HeroService } from './heroes';
@Component({
moduleId: module.id,
selector: 'sg-app',
templateUrl: './app.component.html',
providers: [HeroService]
})
export class AppComponent implements OnInit {
heroes: Hero[];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
}
}
/*
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
*/"><input type="hidden" name="files[07-01/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '07-01', component: AppComponent }])
],
declarations: [
AppComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[07-01/app/heroes/index.ts]" value="export * from './shared';
/*
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
*/"><input type="hidden" name="files[07-01/app/heroes/shared/hero.model.ts]" value="export class Hero {
id: number;
name: string;
}
/*
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
*/"><input type="hidden" name="files[07-01/app/heroes/shared/hero.service.ts]" value="import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Hero } from './hero.model';
@Injectable()
export class HeroService {
constructor(private http: Http) { }
getHeroes() {
return this.http.get('api/heroes')
.map((response: Response) => <Hero[]>response.json().data);
}
}
/*
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
*/"><input type="hidden" name="files[07-01/app/heroes/shared/index.ts]" value="export * from './hero.model';
export * from './hero.service';
/*
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
*/"><input type="hidden" name="files[07-01/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[07-03/app/app.component.ts]" value="import { Component } from '@angular/core';
import { HeroService } from './heroes';
@Component({
selector: 'toh-app',
template: `
<toh-heroes></toh-heroes>
`,
providers: [HeroService]
})
export class AppComponent {}
/*
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
*/"><input type="hidden" name="files[07-03/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroListComponent } from './heroes';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '07-03', component: AppComponent }])
],
declarations: [
AppComponent,
HeroListComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[07-03/app/heroes/hero-list/hero-list.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { Hero, HeroService } from '../shared';
@Component({
selector: 'toh-heroes',
template: `
<pre>{{heroes | json}}</pre>
`
})
export class HeroListComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
}
}
/*
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
*/"><input type="hidden" name="files[07-03/app/heroes/hero-list/index.ts]" value="export * from './hero-list.component';
/*
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
*/"><input type="hidden" name="files[07-03/app/heroes/index.ts]" value="export * from './hero-list';
export * from './shared';
/*
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
*/"><input type="hidden" name="files[07-03/app/heroes/shared/hero.model.ts]" value="export class Hero {
id: number;
name: string;
}
/*
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
*/"><input type="hidden" name="files[07-03/app/heroes/shared/hero.service.ts]" value="import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { Hero } from './hero.model';
@Injectable()
export class HeroService {
getHeroes() {
let heroes: Hero[] = [];
return Observable.of(heroes);
}
}
/*
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
*/"><input type="hidden" name="files[07-03/app/heroes/shared/index.ts]" value="export * from './hero.model';
export * from './hero.service';
/*
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
*/"><input type="hidden" name="files[07-03/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[07-04/app/app.component.ts]" value="import { Component, OnInit } from '@angular/core';
import { HeroArena, HeroService, Hero } from './heroes';
@Component({
selector: 'toh-app',
template: '<pre>{{heroes | json}}</pre>',
providers: [HeroArena, HeroService]
})
export class AppComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroArena: HeroArena) { }
ngOnInit() {
this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes);
}
}
/*
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
*/"><input type="hidden" name="files[07-04/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forChild([{ path: '07-04', component: AppComponent }])
],
declarations: [
AppComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[07-04/app/heroes/index.ts]" value="export * from './shared';
/*
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
*/"><input type="hidden" name="files[07-04/app/heroes/shared/hero-arena.service.avoid.ts]" value="import { Inject } from '@angular/core';
import { Http } from '@angular/http';
import { HeroService } from './hero.service';
/* avoid */
export class HeroArena {
constructor(
@Inject(HeroService) private heroService: HeroService,
@Inject(Http) private http: Http) {}
}
/*
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
*/"><input type="hidden" name="files[07-04/app/heroes/shared/hero-arena.service.ts]" value="import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { HeroService } from './index';
@Injectable()
export class HeroArena {
constructor(
private heroService: HeroService,
private http: Http) {}
// test harness
getParticipants() {
return this.heroService.getHeroes();
}
}
/*
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
*/"><input type="hidden" name="files[07-04/app/heroes/shared/hero.model.ts]" value="export class Hero {
id: number;
name: string;
}
/*
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
*/"><input type="hidden" name="files[07-04/app/heroes/shared/hero.service.ts]" value="import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { Hero } from './hero.model';
@Injectable()
export class HeroService {
getHeroes() {
let heroes: Hero[] = [];
return Observable.of(heroes);
}
}
/*
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
*/"><input type="hidden" name="files[07-04/app/heroes/shared/index.ts]" value="export * from './hero.model';
export * from './hero.service';
export * from './hero-arena.service';
/*
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
*/"><input type="hidden" name="files[07-04/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[09-01/app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
selector: 'sg-app',
template: '<toh-hero-button></toh-hero-button>'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[09-01/app/app.module.ts]" value="import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroButtonComponent } from './heroes';
@NgModule({
imports: [
RouterModule.forChild([{ path: '09-01', component: AppComponent }])
],
declarations: [
AppComponent,
HeroButtonComponent
],
exports: [ AppComponent ]
})
export class AppModule {}
/*
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
*/"><input type="hidden" name="files[09-01/app/heroes/index.ts]" value="export * from './shared';
/*
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
*/"><input type="hidden" name="files[09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts]" value="import { Component } from '@angular/core';
/* avoid */
@Component({
selector: 'toh-hero-button',
template: `<button>OK<button>`
})
export class HeroButtonComponent {
onInit() { // misspelled
console.log('The component is initialized');
}
}
/*
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
*/"><input type="hidden" name="files[09-01/app/heroes/shared/hero-button/hero-button.component.ts]" value="import { Component, OnInit } from '@angular/core';
@Component({
selector: 'toh-hero-button',
template: `<button>OK</button>`
})
export class HeroButtonComponent implements OnInit {
ngOnInit() {
console.log('The component is initialized');
}
}
/*
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
*/"><input type="hidden" name="files[09-01/app/heroes/shared/hero-button/index.ts]" value="export * from './hero-button.component';
/*
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
*/"><input type="hidden" name="files[09-01/app/heroes/shared/index.ts]" value="export * from './hero-button';
/*
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
*/"><input type="hidden" name="files[09-01/app/index.ts]" value="export * from './heroes';
export * from './app.component';
/*
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
*/"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
/*
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
*/"><input type="hidden" name="files[app/app.routes.ts]" value="import { Routes } from '@angular/router';
import { AppComponent as S0101 } from '../01-01/app';
export const routes: Routes = [
{ path: '', redirectTo: '/01-01', pathMatch: 'full' },
{ path: '01-01', component: S0101 },
];
/*
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
*/"><input type="hidden" name="files[app/hero-data.ts]" value="export class HeroData {
createDb() {
let heroes = [
{ id: 1, name: 'Windstorm' },
{ id: 2, name: 'Bombasto' },
{ id: 3, name: 'Magneta' },
{ id: 4, name: 'Tornado' }
];
return {heroes};
}
}
/*
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
*/"><input type="hidden" name="files[main.ts]" value="import { NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { RouterModule } from '@angular/router';
import { HashLocationStrategy,
LocationStrategy } from '@angular/common';
import 'rxjs/add/operator/map';
import { HeroData } from './app/hero-data';
import { AppComponent } from './app/app.component';
import * as s0101 from './01-01/app/app.module';
import * as s0205 from './02-05/app/app.module';
import * as s0207 from './02-07/app/app.module';
import * as s0208 from './02-08/app/app.module';
import * as s0301 from './03-01/app/app.module';
import * as s0302 from './03-02/app/app.module';
import * as s0303 from './03-03/app/app.module';
import * as s0304 from './03-04/app/app.module';
import * as s0306 from './03-06/app/app.module';
import * as s0408 from './04-08/app/app.module';
import * as s0410 from './04-10/app/app.module';
import * as s0411 from './04-11/app/app.module';
import * as s0412 from './04-12/app/app.module';
import * as s0502 from './05-02/app/app.module';
import * as s0503 from './05-03/app/app.module';
import * as s0504 from './05-04/app/app.module';
import * as s0512 from './05-12/app/app.module';
import * as s0513 from './05-13/app/app.module';
import * as s0514 from './05-14/app/app.module';
import * as s0515 from './05-15/app/app.module';
import * as s0516 from './05-16/app/app.module';
import * as s0517 from './05-17/app/app.module';
import * as s0601 from './06-01/app/app.module';
import * as s0603 from './06-03/app/app.module';
import * as s0701 from './07-01/app/app.module';
import * as s0703 from './07-03/app/app.module';
import * as s0704 from './07-04/app/app.module';
import * as s0901 from './09-01/app/app.module';
///////////////////
const moduleMetadata = {
imports: [
BrowserModule,
HttpModule,
InMemoryWebApiModule.forRoot(HeroData),
s0101.AppModule,
s0205.AppModule,
s0207.AppModule,
s0208.AppModule,
s0301.AppModule,
s0302.AppModule,
s0303.AppModule,
s0304.AppModule,
s0306.AppModule,
s0408.AppModule,
s0410.AppModule,
s0411.AppModule,
s0412.AppModule,
s0502.AppModule,
s0503.AppModule,
s0504.AppModule,
s0512.AppModule,
s0513.AppModule,
s0514.AppModule,
s0515.AppModule,
s0516.AppModule,
s0517.AppModule,
s0601.AppModule,
s0603.AppModule,
s0701.AppModule,
s0703.AppModule,
s0704.AppModule,
s0901.AppModule,
RouterModule.forRoot([
{ path: '', redirectTo: '/01-01', pathMatch: 'full' }
], {/* enableTracing: true */}),
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy }
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
};
@NgModule(moduleMetadata)
class MainModule { }
platformBrowserDynamic().bootstrapModule(MainModule);
/*
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
*/"><input type="hidden" name="files[01-01/app/app.component.css]" value="
/*
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
*/"><input type="hidden" name="files[04-11/app/core/nav/nav.component.css]" value=".mdl-layout__header {
display: flex;
position: fixed;
background-color: #222;
}
.nav-link {
padding: 0 1em;
width: 100px;
color: rgba(255,255,255,.6);
text-align: center;
text-decoration: none;
}
.nav-link.router-link-active {
color: rgba(255,255,255, 1);
}
.nav-link.router-link-active::after {
height: 3px;
width: 100%;
display: block;
content: &quot; &quot;;
bottom: 0;
left: 0;
position: inherit;
background: rgb(83,109,254);
}
.md-title-icon > i {
background-image: url(&quot;assets/ng.png&quot;);
background-repeat: no-repeat;
background-position: center center;
padding: 1em 2em;
}
.mdl-layout__header-row {
height: 56px;
padding: 0 16px 0 72px;
padding-left: 8px;
background-color: #673AB7;
background: #0033FF;
background-color: #222;
}
#reset-button {
position: fixed;
right: 2em;
top: 1em;
}
@media (max-width: 480px) {
#reset-button {
display: none
}
}
@media (max-width: 320px) {
a.nav-link {
font-size: 12px;
}
}
/*
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
*/"><input type="hidden" name="files[04-11/app/core/spinner/spinner.component.css]" value=".spinner {
position: absolute;
left: 7em;
top: 20em;
position: absolute;
background-color: blue;
height: .3em;
width: 6em;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.spinner-hidden {
display:none;
}
/*
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
*/"><input type="hidden" name="files[04-12/app/core/nav/nav.component.css]" value=".mdl-layout__header {
display: flex;
position: fixed;
background-color: #222;
}
.nav-link {
padding: 0 1em;
width: 100px;
color: rgba(255,255,255,.6);
text-align: center;
text-decoration: none;
}
.nav-link.router-link-active {
color: rgba(255,255,255, 1);
}
.nav-link.router-link-active::after {
height: 3px;
width: 100%;
display: block;
content: &quot; &quot;;
bottom: 0;
left: 0;
position: inherit;
background: rgb(83,109,254);
}
.md-title-icon > i {
background-image: url(&quot;assets/ng.png&quot;);
background-repeat: no-repeat;
background-position: center center;
padding: 1em 2em;
}
.mdl-layout__header-row {
height: 56px;
padding: 0 16px 0 72px;
padding-left: 8px;
background-color: #673AB7;
background: #0033FF;
background-color: #222;
}
#reset-button {
position: fixed;
right: 2em;
top: 1em;
}
@media (max-width: 480px) {
#reset-button {
display: none
}
}
@media (max-width: 320px) {
a.nav-link {
font-size: 12px;
}
}
/*
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
*/"><input type="hidden" name="files[05-04/app/heroes/heroes.component.css]" value=".heroes {
margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.heroes .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
/*
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
*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
a {
cursor: pointer;
cursor: hand;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* Navigation link styles */
nav a {
padding: 5px 10px;
text-decoration: none;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.active {
color: #039be5;
}
/* items class */
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.items li.selected {
background-color: #CFD8DC;
color: white;
}
.items li.selected:hover {
background-color: #BBD8DC;
}
.items .text {
position: relative;
top: -3px;
}
.items .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
/*
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
*/"><input type="hidden" name="files[03-06/app/app.component.html]" value="<div>Actual favorite: {{favorite?.name}}</div>
<ul>
<li *ngFor=&quot;let hero of heroes&quot;>
{{hero.name}}
</li>
</ul>
<!--
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
-->"><input type="hidden" name="files[04-08/app/heroes/heroes.component.html]" value="<div>This is heroes component</div>
<!--
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
-->"><input type="hidden" name="files[04-10/app/heroes/heroes.component.html]" value="<div>This is heroes component</div>
<ul>
<li *ngFor=&quot;let hero of filteredHeroes&quot;>
{{hero.name}}
</li>
</ul>
<toh-filter-text (changed)=&quot;filterChanged($event)&quot;></toh-filter-text>
<!--
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
-->"><input type="hidden" name="files[04-11/app/core/nav/nav.component.html]" value="<header>
<div>
<h4>Tour of Heroes</h4>
</div>
<nav>
<ul>
<li *ngFor=&quot;let item of menuItems&quot;>
{{item}}
</li>
</ul>
</nav>
<br/>
</header>
<!--
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
-->"><input type="hidden" name="files[04-11/app/core/spinner/spinner.component.html]" value="<div class=&quot;spinner&quot; [class.spinner-hidden]=&quot;!visible&quot;> </div>
<!--
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
-->"><input type="hidden" name="files[04-11/app/heroes/heroes.component.html]" value="<div>
<button (click)=&quot;getHeroes()&quot;>Get Heroes</button>
<ul>
<li *ngFor=&quot;let hero of heroes&quot;>
{{hero.name}}
</li>
</ul>
</div>
<!--
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
-->"><input type="hidden" name="files[04-12/app/core/nav/nav.component.html]" value="<header>
<div>
<h4>Tour of Heroes</h4>
</div>
<nav>
<ul>
<li *ngFor=&quot;let item of menuItems&quot;>
{{item}}
</li>
</ul>
</nav>
<br/>
</header>
<!--
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
-->"><input type="hidden" name="files[04-12/app/heroes/heroes.component.html]" value="<div>
<button (click)=&quot;getHeroes()&quot;>Get Heroes</button>
<ul>
<li *ngFor=&quot;let hero of heroes&quot;>
{{hero.name}}
</li>
</ul>
</div>
<!--
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
-->"><input type="hidden" name="files[05-02/app/app.component.html]" value="<toh-hero-button></toh-hero-button>
<!--
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
-->"><input type="hidden" name="files[05-02/app/heroes/shared/hero-button/hero-button.component.html]" value="<button class=&quot;hero-button&quot;>Hero button</button>
<!--
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
-->"><input type="hidden" name="files[05-03/app/app.component.avoid.html]" value="<!-- avoid -->
<div tohHeroButton></div>
<!--
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
-->"><input type="hidden" name="files[05-03/app/app.component.html]" value="<toh-hero-button></toh-hero-button>
<!--
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
-->"><input type="hidden" name="files[05-03/app/heroes/shared/hero-button/hero-button.component.html]" value="<button class=&quot;hero-button&quot;>Hero button</button>
<!--
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
-->"><input type="hidden" name="files[05-04/app/heroes/heroes.component.html]" value="<div>
<h2>My Heroes</h2>
<ul class=&quot;heroes&quot;>
<li *ngFor=&quot;let hero of heroes | async&quot; (click)=&quot;selectedHero=hero&quot;>
<span class=&quot;badge&quot;>{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf=&quot;selectedHero&quot;>
<h2>{{selectedHero.name | uppercase}} is my hero</h2>
</div>
</div>
<!--
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
-->"><input type="hidden" name="files[05-13/app/app.component.avoid.html]" value="<!-- avoid -->
<toh-hero-button labelAttribute=&quot;OK&quot; (changeEvent)=&quot;doSomething()&quot;>
</toh-hero-button>
<!--
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
-->"><input type="hidden" name="files[05-13/app/app.component.html]" value="<toh-hero-button label=&quot;OK&quot; (change)=&quot;doSomething()&quot;>
</toh-hero-button>
<!-- `heroHighlight` is both the directive name and the data-bound aliased property name -->
<h3 heroHighlight=&quot;skyblue&quot;>The Great Bombasto</h3>
<!--
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
-->"><input type="hidden" name="files[05-16/app/app.component.avoid.html]" value="<!-- avoid -->
<toh-hero (onSavedTheDay)=&quot;onSavedTheDay($event)&quot;></toh-hero>
<!--
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
-->"><input type="hidden" name="files[05-16/app/app.component.html]" value="<toh-hero (savedTheDay)=&quot;onSavedTheDay($event)&quot;></toh-hero>
<!--
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
-->"><input type="hidden" name="files[06-01/app/app.component.html]" value="<div tohHighlight>Bombasta</div>
<!--
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
-->"><input type="hidden" name="files[07-01/app/app.component.html]" value="<ul>
<li *ngFor=&quot;let hero of heroes&quot;>
{{hero.name}}
</li>
</ul>
<!--
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
-->"><input type="hidden" name="files[app/app.component.html]" value="<router-outlet></router-outlet>
<!--
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
-->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href=&quot;' + document.location + '&quot; />');</script>
<title>Style Guide Sample</title>
<meta charset=&quot;UTF-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
<!-- Polyfills -->
<script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
<script src=&quot;https://unpkg.com/zone.js@0.7.4?main=browser&quot;></script>
<script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
<script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
<script src=&quot;systemjs.custom.js&quot;></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>loading...</my-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
-->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="style guide, styleguide"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Style Guide"></form><script>document.getElementById("mainForm").submit();</script></body></html>
Reference in New Issue View Git Blame Copy Permalink