663 lines
19 KiB
HTML
663 lines
19 KiB
HTML
<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[app/app.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'my-app',
|
|
templateUrl: './app.component.html'
|
|
})
|
|
export class AppComponent {
|
|
birthday = new Date(1988, 3, 15); // April 15, 1988
|
|
}
|
|
|
|
|
|
/*
|
|
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.module.ts]" value="import { NgModule } from '@angular/core';
|
|
import { BrowserModule } from '@angular/platform-browser';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { HttpModule } from '@angular/http';
|
|
|
|
import { AppComponent } from './app.component';
|
|
import {
|
|
FlyingHeroesComponent,
|
|
FlyingHeroesImpureComponent
|
|
} from './flying-heroes.component';
|
|
import { HeroAsyncMessageComponent } from './hero-async-message.component';
|
|
import { HeroBirthdayComponent } from './hero-birthday1.component';
|
|
import { HeroBirthday2Component } from './hero-birthday2.component';
|
|
import { HeroListComponent } from './hero-list.component';
|
|
import { PowerBoosterComponent } from './power-booster.component';
|
|
import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
|
|
import {
|
|
FlyingHeroesPipe,
|
|
FlyingHeroesImpurePipe
|
|
} from './flying-heroes.pipe';
|
|
import { FetchJsonPipe } from './fetch-json.pipe';
|
|
import { ExponentialStrengthPipe } from './exponential-strength.pipe';
|
|
|
|
@NgModule({
|
|
imports: [
|
|
BrowserModule,
|
|
FormsModule,
|
|
HttpModule
|
|
],
|
|
declarations: [
|
|
AppComponent,
|
|
FlyingHeroesComponent,
|
|
FlyingHeroesImpureComponent,
|
|
HeroAsyncMessageComponent,
|
|
HeroBirthdayComponent,
|
|
HeroBirthday2Component,
|
|
HeroListComponent,
|
|
PowerBoosterComponent,
|
|
PowerBoostCalculatorComponent,
|
|
FlyingHeroesPipe,
|
|
FlyingHeroesImpurePipe,
|
|
FetchJsonPipe,
|
|
ExponentialStrengthPipe
|
|
],
|
|
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[app/exponential-strength.pipe.ts]" value="import { Pipe, PipeTransform } from '@angular/core';
|
|
/*
|
|
* Raise the value exponentially
|
|
* Takes an exponent argument that defaults to 1.
|
|
* Usage:
|
|
* value | exponentialStrength:exponent
|
|
* Example:
|
|
* {{ 2 | exponentialStrength:10}}
|
|
* formats to: 1024
|
|
*/
|
|
@Pipe({name: 'exponentialStrength'})
|
|
export class ExponentialStrengthPipe implements PipeTransform {
|
|
transform(value: number, exponent: string): number {
|
|
let exp = parseFloat(exponent);
|
|
return Math.pow(value, isNaN(exp) ? 1 : exp);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
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/fetch-json.pipe.ts]" value="import { Pipe, PipeTransform } from '@angular/core';
|
|
import { Http } from '@angular/http';
|
|
|
|
import 'rxjs/add/operator/map';
|
|
|
|
@Pipe({
|
|
name: 'fetch',
|
|
pure: false
|
|
})
|
|
export class FetchJsonPipe implements PipeTransform {
|
|
private cachedData: any = null;
|
|
private cachedUrl = '';
|
|
|
|
constructor(private http: Http) { }
|
|
|
|
transform(url: string): any {
|
|
if (url !== this.cachedUrl) {
|
|
this.cachedData = null;
|
|
this.cachedUrl = url;
|
|
this.http.get(url)
|
|
.map( result => result.json() )
|
|
.subscribe( result => this.cachedData = result );
|
|
}
|
|
|
|
return this.cachedData;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
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/flying-heroes.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { HEROES } from './heroes';
|
|
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'flying-heroes',
|
|
templateUrl: './flying-heroes.component.html',
|
|
styles: ['#flyers, #all {font-style: italic}']
|
|
})
|
|
export class FlyingHeroesComponent {
|
|
heroes: any[] = [];
|
|
canFly = true;
|
|
mutate = true;
|
|
title = 'Flying Heroes (pure pipe)';
|
|
|
|
constructor() { this.reset(); }
|
|
|
|
addHero(name: string) {
|
|
name = name.trim();
|
|
if (!name) { return; }
|
|
let hero = {name, canFly: this.canFly};
|
|
if (this.mutate) {
|
|
// Pure pipe won't update display because heroes array reference is unchanged
|
|
// Impure pipe will display
|
|
this.heroes.push(hero);
|
|
} else {
|
|
// Pipe updates display because heroes array is a new object
|
|
this.heroes = this.heroes.concat(hero);
|
|
}
|
|
}
|
|
|
|
reset() { this.heroes = HEROES.slice(); }
|
|
}
|
|
|
|
////// Identical except for impure pipe //////
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'flying-heroes-impure',
|
|
templateUrl: './flying-heroes-impure.component.html',
|
|
styles: ['.flyers, .all {font-style: italic}'],
|
|
})
|
|
export class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
|
|
title = 'Flying Heroes (impure pipe)';
|
|
}
|
|
|
|
|
|
/*
|
|
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/flying-heroes.pipe.ts]" value="/* tslint:disable use-pipe-transform-interface */
|
|
import { Pipe, PipeTransform } from '@angular/core';
|
|
|
|
import { Flyer } from './heroes';
|
|
|
|
@Pipe({ name: 'flyingHeroes' })
|
|
export class FlyingHeroesPipe implements PipeTransform {
|
|
transform(allHeroes: Flyer[]) {
|
|
return allHeroes.filter(hero => hero.canFly);
|
|
}
|
|
}
|
|
|
|
/////// Identical except for the pure flag
|
|
@Pipe({
|
|
name: 'flyingHeroesImpure',
|
|
pure: false
|
|
})
|
|
export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}
|
|
|
|
|
|
/*
|
|
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-async-message.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
import { Observable } from 'rxjs/Observable';
|
|
import 'rxjs/add/observable/interval';
|
|
import 'rxjs/add/operator/map';
|
|
import 'rxjs/add/operator/take';
|
|
|
|
@Component({
|
|
selector: 'hero-message',
|
|
template: `
|
|
<h2>Async Hero Message and AsyncPipe</h2>
|
|
<p>Message: {{ message$ | async }}</p>
|
|
<button (click)="resend()">Resend</button>`,
|
|
})
|
|
export class HeroAsyncMessageComponent {
|
|
message$: Observable<string>;
|
|
|
|
private messages = [
|
|
'You are my hero!',
|
|
'You are the best hero!',
|
|
'Will you be my hero?'
|
|
];
|
|
|
|
constructor() { this.resend(); }
|
|
|
|
resend() {
|
|
this.message$ = Observable.interval(500)
|
|
.map(i => this.messages[i])
|
|
.take(this.messages.length);
|
|
}
|
|
}
|
|
|
|
// Alternative message$ formula:
|
|
// this.message$ = Observable.fromArray(this.messages)
|
|
// .map(message => Observable.timer(500).map(() => message))
|
|
// .concatAll();
|
|
|
|
|
|
/*
|
|
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-birthday1.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'hero-birthday',
|
|
template: `<p>The hero's birthday is {{ birthday | date }}</p>`
|
|
})
|
|
export class HeroBirthdayComponent {
|
|
birthday = new Date(1988, 3, 15); // April 15, 1988
|
|
}
|
|
|
|
|
|
/*
|
|
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-birthday2.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'hero-birthday2',
|
|
template: `
|
|
<p>The hero's birthday is {{ birthday | date:format }}</p>
|
|
<button (click)="toggleFormat()">Toggle Format</button>
|
|
`
|
|
})
|
|
export class HeroBirthday2Component {
|
|
birthday = new Date(1988, 3, 15); // April 15, 1988
|
|
toggle = true; // start with true == shortDate
|
|
|
|
get format() { return this.toggle ? 'shortDate' : 'fullDate'; }
|
|
toggleFormat() { this.toggle = !this.toggle; }
|
|
}
|
|
|
|
|
|
/*
|
|
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-list.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'hero-list',
|
|
template: `
|
|
<h2>Heroes from JSON File</h2>
|
|
|
|
<div *ngFor="let hero of ('heroes.json' | fetch) ">
|
|
{{hero.name}}
|
|
</div>
|
|
|
|
<p>Heroes as JSON:
|
|
{{'heroes.json' | fetch | json}}
|
|
</p>`
|
|
})
|
|
export class HeroListComponent { }
|
|
|
|
|
|
/*
|
|
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/heroes.ts]" value="export interface Flyer { canFly: boolean; }
|
|
export const HEROES = [
|
|
{name: 'Windstorm', canFly: true},
|
|
{name: 'Bombasto', canFly: false},
|
|
{name: 'Magneto', canFly: false},
|
|
{name: 'Tornado', canFly: true}
|
|
];
|
|
|
|
|
|
/*
|
|
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/power-boost-calculator.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'power-boost-calculator',
|
|
template: `
|
|
<h2>Power Boost Calculator</h2>
|
|
<div>Normal power: <input [(ngModel)]="power"></div>
|
|
<div>Boost factor: <input [(ngModel)]="factor"></div>
|
|
<p>
|
|
Super Hero Power: {{power | exponentialStrength: factor}}
|
|
</p>
|
|
`
|
|
})
|
|
export class PowerBoostCalculatorComponent {
|
|
power = 5;
|
|
factor = 1;
|
|
}
|
|
|
|
|
|
/*
|
|
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/power-booster.component.ts]" value="import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'power-booster',
|
|
template: `
|
|
<h2>Power Booster</h2>
|
|
<p>Super power boost: {{2 | exponentialStrength: 10}}</p>
|
|
`
|
|
})
|
|
export class PowerBoosterComponent { }
|
|
|
|
|
|
/*
|
|
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 { 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[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[app/app.component.html]" value="<a id="toc"></a>
|
|
<h1>Pipes</h1>
|
|
<a href="#happy-birthday1">Happy Birthday v1</a><br>
|
|
<a href="#birthday-date-pipe">Birthday DatePipe</a><br>
|
|
<a href="#happy-birthday2">Happy Birthday v2</a><br>
|
|
<a href="#birthday-pipe-chaining">Birthday Pipe Chaining</a><br>
|
|
<a href="#power-booster">Power Booster custom pipe</a><br>
|
|
<a href="#power-boost-calc">Power Boost Calculator custom pipe with params</a><br>
|
|
<a href="#flying-heroes">Flying Heroes filter pipe (pure)</a><br>
|
|
<a href="#flying-heroes-impure">Flying Heroes filter pipe (impure)</a><br>
|
|
<a href="#hero-message">Async Hero Message and AsyncPipe</a><br>
|
|
<a href="#hero-list">Hero List with caching FetchJsonPipe</a><br>
|
|
|
|
|
|
<hr>
|
|
<a id="happy-birthday1"></a>
|
|
<h2>Hero Birthday v1</h2>
|
|
<hero-birthday></hero-birthday>
|
|
|
|
<hr>
|
|
<a id="birthday-date-pipe"></a>
|
|
<h2>Birthday DatePipe</h2>
|
|
<p>The hero's birthday is {{ birthday | date }}</p>
|
|
|
|
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
|
|
|
|
<hr>
|
|
<a id="happy-birthday2"></a>
|
|
<h2>Hero Birthday v2</h2>
|
|
<hero-birthday2></hero-birthday2>
|
|
|
|
<hr>
|
|
<a id="birthday-pipe-chaining"></a>
|
|
<h2>Birthday Pipe Chaining</h2>
|
|
<p>
|
|
The chained hero's birthday is
|
|
{{ birthday | date | uppercase}}
|
|
</p>
|
|
|
|
<p>
|
|
The chained hero's birthday is
|
|
{{ birthday | date:'fullDate' | uppercase}}
|
|
</p>
|
|
<p>
|
|
The chained hero's birthday is
|
|
{{ ( birthday | date:'fullDate' ) | uppercase}}
|
|
</p>
|
|
<hr>
|
|
<a id="power-booster"></a>
|
|
<power-booster></power-booster>
|
|
|
|
<hr>
|
|
<a id="power-boost-calc"></a>
|
|
<power-boost-calculator>loading</power-boost-calculator>
|
|
|
|
<hr>
|
|
<a id="flying-heroes"></a>
|
|
<flying-heroes></flying-heroes>
|
|
|
|
<hr>
|
|
<a id="flying-heroes-impure"></a>
|
|
<flying-heroes-impure></flying-heroes-impure>
|
|
|
|
<hr>
|
|
<a id="hero-message"></a>
|
|
<!-- async examples at the top so can see them in action -->
|
|
<hero-message></hero-message>
|
|
|
|
<hr>
|
|
<a id="hero-list"></a>
|
|
<hero-list></hero-list>
|
|
|
|
<div style="margin-top:12em;"></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[app/flying-heroes-impure.component.html]" value="<h2>{{title}}</h2>
|
|
<p>
|
|
New hero:
|
|
<input type="text" #box
|
|
(keyup.enter)="addHero(box.value); box.value=''"
|
|
placeholder="hero name">
|
|
<input id="can-fly" type="checkbox" [(ngModel)]="canFly"> can fly
|
|
</p>
|
|
<p>
|
|
<input id="mutate" type="checkbox" [(ngModel)]="mutate">Mutate array
|
|
<button (click)="reset()">Reset</button>
|
|
</p>
|
|
|
|
<h4>Heroes who fly (piped)</h4>
|
|
<div id="flyers">
|
|
<div *ngFor="let hero of (heroes | flyingHeroesImpure)">
|
|
{{hero.name}}
|
|
</div>
|
|
</div>
|
|
|
|
<h4>All Heroes (no pipe)</h4>
|
|
<div id="all">
|
|
<div *ngFor="let hero of heroes">
|
|
{{hero.name}}
|
|
</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[app/flying-heroes.component.html]" value="<h2>{{title}}</h2>
|
|
<p>
|
|
New hero:
|
|
<input type="text" #box
|
|
(keyup.enter)="addHero(box.value); box.value=''"
|
|
placeholder="hero name">
|
|
<input id="can-fly" type="checkbox" [(ngModel)]="canFly"> can fly
|
|
</p>
|
|
<p>
|
|
<input id="mutate" type="checkbox" [(ngModel)]="mutate">Mutate array
|
|
<button (click)="reset()">Reset</button>
|
|
</p>
|
|
|
|
<h4>Heroes who fly (piped)</h4>
|
|
<div id="flyers">
|
|
<div *ngFor="let hero of (heroes | flyingHeroes)">
|
|
{{hero.name}}
|
|
</div>
|
|
</div>
|
|
|
|
<h4>All Heroes (no pipe)</h4>
|
|
<div id="all">
|
|
<div *ngFor="let hero of heroes">
|
|
{{hero.name}}
|
|
</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[index.html]" value="<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Pipes</title>
|
|
<script>document.write('<base href="' + document.location + '" />');</script>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<!-- Polyfills -->
|
|
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
|
|
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
|
|
|
|
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
|
|
<script>
|
|
System.import('main.js').catch(function(err){ console.error(err); });
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<my-app>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="files[heroes.json]" value="[
|
|
{"name": "Windstorm", "canFly": true},
|
|
{"name": "Bombasto", "canFly": false},
|
|
{"name": "Magneto", "canFly": false},
|
|
{"name": "Tornado", "canFly": true}
|
|
]
|
|
"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="pipe"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Pipes"></form><script>document.getElementById("mainForm").submit();</script></body></html> |