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

1022 lines
27 KiB
HTML
Raw Normal View History

feat(aio): copy example code from angular.io
2017-02-22 18:13:21 +00:00
<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.js]" value="(function(app) {
app.AppComponent = AppComponent;
function AppComponent() {
this.title = 'ES5 JavaScript';
}
AppComponent.annotations = [
new ng.core.Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styles: [
// See hero-di-inject-additional.component
'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}',
'.heading {font-style: italic}'
]
})
];
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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.js]" value="(function(app) {
app.AppModule = AppModule;
function AppModule() { }
AppModule.annotations = [
new ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [
app.AppComponent,
app.ConfirmComponent, app.ConfirmDslComponent,
app.HeroComponent, app.HeroDslComponent,
app.HeroDIComponent, app.HeroDIDslComponent,
app.HeroDIInjectComponent, app.HeroDIInjectDslComponent,
app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent,
app.HeroHostComponent, app.HeroHostDslComponent,
app.HeroIOComponent, app.HeroIODslComponent,
app.HeroLifecycleComponent, app.HeroLifecycleDslComponent,
app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent,
app.HeroTitleComponent, app.HeroTitleDslComponent
],
providers: [
app.DataService,
{ provide: 'heroName', useValue: 'Windstorm' }
],
bootstrap: [ app.AppComponent ],
// schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging!
})
]
})(window.app = window.app || {});
///// For documentation only /////
(function () {
var HeroComponent = app.HeroComponent;
var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
var LocationStrategy = ng.common.LocationStrategy;
var HashLocationStrategy = ng.common.HashLocationStrategy;
})
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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/confirm.component.js]" value="(function(app) {
app.ConfirmComponent = ConfirmComponent;
ConfirmComponent.annotations = [
new ng.core.Component({
selector: 'app-confirm',
templateUrl: 'app/confirm.component.html',
inputs: [
'okMsg',
'notOkMsg: cancelMsg'
],
outputs: [
'ok',
'notOk: cancel'
]
})
];
function ConfirmComponent() {
this.ok = new ng.core.EventEmitter();
this.notOk = new ng.core.EventEmitter();
}
ConfirmComponent.prototype.onOkClick = function() {
this.ok.emit(true);
}
ConfirmComponent.prototype.onNotOkClick = function() {
this.notOk.emit(true);
}
})(window.app = window.app || {});
/////// DSL version ////////
(function(app) {
var old = app.ConfirmComponent;
app.ConfirmComponent = ng.core.Component({
selector: 'app-confirm-dsl',
templateUrl: 'app/confirm.component.html',
inputs: [
'okMsg',
'notOkMsg: cancelMsg'
],
outputs: [
'ok',
'notOk: cancel'
]
})
.Class({
constructor: function ConfirmComponent() {
this.ok = new ng.core.EventEmitter();
this.notOk = new ng.core.EventEmitter();
},
onOkClick: function() {
this.ok.emit(true);
},
onNotOkClick: function() {
this.notOk.emit(true);
}
});
app.ConfirmDslComponent = app.ConfirmComponent;
app.ConfirmComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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/data.service.js]" value="(function(app) {
app.DataService = DataService;
function DataService() { }
DataService.prototype.getHeroName = function() {
return 'Windstorm';
};
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-di-inject-additional.component.js]" value="(function(app) {
var old = app.HeroComponent;
app.HeroComponent = HeroComponent;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-di-inject-additional',
template: '<hero-title title=&quot;Tour of Heroes&quot;></hero-title>'
})
];
function HeroComponent() {}
app.HeroDIInjectAdditionalComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
////// DSL Version /////////
(function(app) {
var old = app.HeroComponent;
app.HeroComponent = ng.core.Component({
selector: 'hero-di-inject-additional-dsl',
template: '<hero-title-dsl title=&quot;Tour of Heroes&quot;></hero-title-dsl>'
}).Class({
constructor: function HeroComponent() { }
});
app.HeroDIInjectAdditionalDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-di-inject.component.js]" value="(function(app) {
var old = app.HeroComponent;
app.HeroComponent = HeroComponent;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-di-inject',
template: '<h1>Hero: {{name}}</h1>'
})
];
HeroComponent.parameters = [ 'heroName' ];
function HeroComponent(name) {
this.name = name;
}
app.HeroDIInjectComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/////// DSL version ////////
(function(app) {
var old = app.HeroComponent;
app.HeroComponent = ng.core.Component({
selector: 'hero-di-inject-dsl',
template: '<h1>Hero: {{name}}</h1>'
})
.Class({
constructor: [
new ng.core.Inject('heroName'),
function HeroComponent(name) {
this.name = name;
}
]
});
app.HeroDIInjectDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-di.component.js]" value="(function(app) {
var old = app.HeroComponent;
app.HeroComponent = HeroComponent;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-di',
template: '<h1>Hero: {{name}}</h1>'
})
];
HeroComponent.parameters = [ app.DataService ];
function HeroComponent(dataService) {
this.name = dataService.getHeroName();
}
app.HeroDIComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
////// DSL Version /////
(function(app) {
var old = app.HeroComponent;
app.HeroComponent = ng.core.Component({
selector: 'hero-di-dsl',
template: '<h1>Hero: {{name}}</h1>'
})
.Class({
constructor: [
app.DataService,
function HeroComponent(service) {
this.name = service.getHeroName();
}
]
});
app.HeroDIDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-host.component.js]" value="(function(app) {
var old = app.HeroComponent
app.HeroComponent = HeroComponent;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-host',
template:
'<h1 [class.active]=&quot;active&quot;>Hero Host</h1>' +
'<div>Heading clicks: {{clicks}}</div>',
host: {
// HostBindings to the <hero-host> element
'[title]': 'title',
'[class.heading]': 'headingClass',
'(click)': 'clicked()',
// HostListeners on the entire <hero-host> element
'(mouseenter)': 'enter($event)',
'(mouseleave)': 'leave($event)'
},
// Styles within (but excluding) the <hero-host> element
styles: ['.active {background-color: yellow;}']
})
];
function HeroComponent() {
this.clicks = 0;
this.headingClass = true;
this.title = 'Hero Host Tooltip content';
}
HeroComponent.prototype.clicked = function() {
this.clicks += 1;
}
HeroComponent.prototype.enter = function(event) {
this.active = true;
this.headingClass = false;
}
HeroComponent.prototype.leave = function(event) {
this.active = false;
this.headingClass = true;
}
app.HeroHostComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
//// DSL Version ////
(function(app) {
var old = app.HeroComponent;
app.HeroComponent = ng.core.Component({
selector: 'hero-host-dsl',
template: `
<h1 [class.active]=&quot;active&quot;>Hero Host (DSL)</h1>
<div>Heading clicks: {{clicks}}</div>
`,
host: {
// HostBindings to the <hero-host-dsl> element
'[title]': 'title',
'[class.heading]': 'headingClass',
'(click)': 'clicked()',
// HostListeners on the entire <hero-host-dsl> element
'(mouseenter)': 'enter($event)',
'(mouseleave)': 'leave($event)'
},
// Styles within (but excluding) the <hero-host-dsl> element
styles: ['.active {background-color: coral;}']
})
.Class({
constructor: function HeroComponent() {
this.clicks = 0;
this.headingClass = true;
this.title = 'Hero Host Tooltip DSL content';
},
clicked() {
this.clicks += 1;
},
enter(event) {
this.active = true;
this.headingClass = false;
},
leave(event) {
this.active = false;
this.headingClass = true;
}
});
app.HeroHostDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-io.component.js]" value="(function(app) {
var old = app.HeroComponent
app.HeroComponent = HeroComponent;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-io',
templateUrl: 'app/hero-io.component.html'
})
];
function HeroComponent() { }
HeroComponent.prototype.onOk = function() {
this.okClicked = true;
}
HeroComponent.prototype.onCancel = function() {
this.cancelClicked = true;
}
app.HeroIOComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
///// DSL Version ////
(function(app) {
var old = app.HeroComponent
app.HeroComponent = ng.core.Component({
selector: 'hero-io-dsl',
templateUrl: 'app/hero-io-dsl.component.html'
})
.Class({
constructor: function HeroComponent() { },
onOk: function() {
this.okClicked = true;
},
onCancel: function() {
this.cancelClicked = true;
}
});
app.HeroIODslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-lifecycle.component.js]" value="(function(app) {
var old = app.HeroComponent;
app.HeroComponent = HeroComponent;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-lifecycle',
template: '<h1>Hero: {{name}}</h1>'
})
];
function HeroComponent() { }
HeroComponent.prototype.ngOnInit = function() {
// todo: fetch from server async
setTimeout(() => this.name = 'Windstorm', 0);
};
app.HeroLifecycleComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/////// DSL version ////
(function(app) {
var old = app.HeroComponent;
app.HeroComponent = ng.core.Component({
selector: 'hero-lifecycle-dsl',
template: '<h1>Hero: {{name}}</h1>'
})
.Class({
constructor: function HeroComponent() { },
ngOnInit: function() {
// todo: fetch from server async
setTimeout(() => this.name = 'Windstorm', 0);
}
});
app.HeroLifecycleDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-queries.component.js]" value="(function(app) {
app.heroQueries = app.heroQueries || {};
app.heroQueries.ContentChildComponent = ng.core.Component({
selector: 'content-child',
template:
'<span class=&quot;content-child&quot; *ngIf=&quot;active&quot;>' +
'Active' +
'</span>'
}).Class({
constructor: function ContentChildComponent() {
this.active = false;
},
activate: function() {
this.active = !this.active;
}
});
////////////////////
app.heroQueries.ViewChildComponent = ng.core.Component({
selector: 'view-child',
template:
'<h2 [class.active]=active>' +
'{{hero.name}} ' +
'<ng-content></ng-content>' +
'</h2>',
styles: ['.active {font-weight: bold; background-color: skyblue;}'],
inputs: ['hero'],
queries: {
content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
}
})
.Class({
constructor: function HeroQueriesHeroComponent() {
this.active = false;
},
activate: function() {
this.active = !this.active;
this.content.activate();
}
});
////////////////////
app.heroQueries.HeroQueriesComponent = ng.core.Component({
selector: 'hero-queries',
template:
'<view-child *ngFor=&quot;let hero of heroData&quot; [hero]=&quot;hero&quot;>' +
'<content-child></content-child>' +
'</view-child>' +
'<button (click)=&quot;activate()&quot;>{{buttonLabel}} All</button>',
queries: {
views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
}
})
.Class({
constructor: function HeroQueriesComponent() {
this.active = false;
this.heroData = [
{id: 1, name: 'Windstorm'},
{id: 2, name: 'LaughingGas'}
];
},
activate: function() {
this.active = !this.active;
this.views.forEach(function(view) {
view.activate();
});
},
});
// add prototype property w/ getter outside the DSL
var proto = app.heroQueries.HeroQueriesComponent.prototype;
Object.defineProperty(proto, &quot;buttonLabel&quot;, {
get: function () {
return this.active ? 'Deactivate' : 'Activate';
},
enumerable: true
});
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-title.component.js]" value="(function(app) {
app.HeroTitleComponent = HeroTitleComponent;
HeroTitleComponent.annotations = [
new ng.core.Component({
selector: 'hero-title',
templateUrl: 'app/hero-title.component.html'
})
];
function HeroTitleComponent(titlePrefix, title) {
this.titlePrefix = titlePrefix;
this.title = title;
this.msg = '';
}
HeroTitleComponent.prototype.ok = function() {
this.msg = 'OK!';
}
HeroTitleComponent.parameters = [
[new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
[new ng.core.Attribute('title')]
];
})(window.app = window.app || {});
////////// DSL version ////////////
(function(app) {
var old = app.HeroTitleComponent;
app.HeroTitleComponent = ng.core.Component({
selector: 'hero-title-dsl',
templateUrl: 'app/hero-title.component.html'
})
.Class({
constructor: [
[ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
new ng.core.Attribute('title'),
function HeroTitleComponent(titlePrefix, title) {
this.titlePrefix = titlePrefix;
this.title = title;
this.msg = '';
}
],
ok: function() {
this.msg = 'OK!';
}
});
app.HeroTitleDslComponent = app.HeroTitleComponent;
app.HeroTitleComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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.component.js]" value="(function(app) {
app.HeroComponent = HeroComponent; // &quot;export&quot;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-view',
template: '<h1>{{title}}: {{getName()}}</h1>'
})
];
function HeroComponent() {
this.title = &quot;Hero Detail&quot;;
}
HeroComponent.prototype.getName = function() { return 'Windstorm'; };
})(window.app = window.app || {});
//////////// DSL version ///////////
(function(app) {
var old = app.HeroComponent;
app.HeroComponent = ng.core.Component({
selector: 'hero-view-dsl',
template: '<h1>{{title}}: {{getName()}}</h1>',
})
.Class({
constructor: function HeroComponent() {
this.title = &quot;Hero Detail&quot;;
},
getName: function() { return 'Windstorm'; }
});
app.HeroDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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.js]" value="(function(app) {
var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
document.addEventListener('DOMContentLoaded', function() {
platformBrowserDynamic().bootstrapModule(app.AppModule);
});
})(window.app = window.app || {});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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=&quot;toc&quot;></a>
<h1>{{title}}</h1>
<a href=&quot;#class-metadata&quot;>Classes and Class Metadata</a><br>
<a href=&quot;#interfaces&quot;>Interfaces</a><br>
<a href=&quot;#io-metadata&quot;>Input and Output Metadata</a><br>
<a href=&quot;#dependency-injection&quot;>Dependency Injection</a><br>
<a href=&quot;#host-metadata&quot;>Host Metadata</a><br>
<a href=&quot;#view-child-metadata&quot;>View and Child Metadata</a><br>
<hr>
<h4 id=&quot;class-metadata&quot;>Classes and Class Metadata</h4>
<hero-view></hero-view>
<h4 id=&quot;class-metadata-dsl&quot;>Classes and Class Metadata (DSL)</h4>
<hero-view-dsl></hero-view-dsl>
<hr>
<h4 id=&quot;interfaces&quot;>Interfaces</h4>
<hero-lifecycle></hero-lifecycle>
<h4 id=&quot;interfaces-dsl&quot;>Interfaces (DSL)</h4>
<hero-lifecycle-dsl></hero-lifecycle-dsl>
<hr>
<h4 id=&quot;io-metadata&quot;>Input and Output Metadata</h4>
<hero-io></hero-io>
<h4 id=&quot;io-metadata-dsl&quot;>Input and Output Metadata (DSL)</h4>
<hero-io-dsl></hero-io-dsl>
<hr>
<h4 id=&quot;dependency-injection&quot;>Dependency Injection</h4>
<hero-di></hero-di>
<hero-di-inject></hero-di-inject>
<hero-di-inject-additional></hero-di-inject-additional>
<h4 id=&quot;dependency-injection-dsl&quot;>Dependency Injection (DSL)</h4>
<hero-di-dsl></hero-di-dsl>
<hero-di-inject-dsl></hero-di-inject-dsl>
<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
<hr>
<h4 id=&quot;host-metadata&quot;>Host Metadata</h4>
<hero-host></hero-host>
<h4 id=&quot;host-metadata-dsl&quot;>Host Metadata (DSL)</h4>
<hero-host-dsl></hero-host-dsl>
<hr>
<h4 id=&quot;view-child-metadata&quot;>View and Child Metadata (DSL)</h4>
<hero-queries></hero-queries>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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/confirm.component.html]" value="<button (click)=&quot;onOkClick()&quot;>
{{okMsg}}
</button>
<button (click)=&quot;onNotOkClick()&quot;>
{{notOkMsg}}
</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[app/hero-io-dsl.component.html]" value="<app-confirm-dsl [okMsg]=&quot;'OK'&quot;
[cancelMsg]=&quot;'Cancel'&quot;
(ok)=&quot;onOk()&quot;
(cancel)=&quot;onCancel()&quot;>
</app-confirm-dsl>
<span *ngIf=&quot;okClicked&quot;>OK clicked</span>
<span *ngIf=&quot;cancelClicked&quot;>Cancel clicked</span>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-io.component.html]" value="<app-confirm [okMsg]=&quot;'OK'&quot;
[cancelMsg]=&quot;'Cancel'&quot;
(ok)=&quot;onOk()&quot;
(cancel)=&quot;onCancel()&quot;>
</app-confirm>
<span *ngIf=&quot;okClicked&quot;>OK clicked</span>
<span *ngIf=&quot;cancelClicked&quot;>Cancel clicked</span>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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-title.component.html]" value="<h1>{{titlePrefix}} {{title}}</h1>
<button (click)=&quot;ok()&quot;>OK</button>
<p>{{ msg }}</p>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is 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>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
<title>TypeScript to JavaScript</title>
<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>
<!-- Angular and RxJS umd scripts -->
<script src=&quot;https://unpkg.com/rxjs@5.0.1/bundles/Rx.js&quot;></script>
<script src=&quot;https://unpkg.com/@angular/core/bundles/core.umd.js&quot;></script>
<script src=&quot;https://unpkg.com/@angular/common/bundles/common.umd.js&quot;></script>
<script src=&quot;https://unpkg.com/@angular/compiler/bundles/compiler.umd.js&quot;></script>
<script src=&quot;https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js&quot;></script>
<script src=&quot;https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js&quot;></script>
<!-- Application scripts -->
<script src=&quot;app/app.component.js&quot;></script>
<script src=&quot;app/confirm.component.js&quot;></script>
<script src=&quot;app/data.service.js&quot;></script>
<script src=&quot;app/hero.component.js&quot;></script>
<script src=&quot;app/hero-io.component.js&quot;></script>
<script src=&quot;app/hero-di.component.js&quot;></script>
<script src=&quot;app/hero-di-inject.component.js&quot;></script>
<script src=&quot;app/hero-di-inject-additional.component.js&quot;></script>
<script src=&quot;app/hero-host.component.js&quot;></script>
<script src=&quot;app/hero-lifecycle.component.js&quot;></script>
<script src=&quot;app/hero-queries.component.js&quot;></script>
<script src=&quot;app/hero-title.component.js&quot;></script>
<script src=&quot;app/app.module.js&quot;></script>
<script src=&quot;main.js&quot;></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="cookbook"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - TypeScript to JavaScript"></form><script>document.getElementById("mainForm").submit();</script></body></html>
Reference in New Issue Copy Permalink