honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(ts->js): example tweaks for more consistent reading of JS (#2938)

Browse Source
This commit is contained in:
Ward Bell 2016-12-06 19:43:50 -08:00 committed by GitHub
parent cd80df8dc7
commit af0ffa6f19
16 changed files with 413 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
View File

@ -1,7 +1,7 @@
// #docregion
import { Component } from '@angular/core';
import { DataService } from './data.service';
// #docregion
@Component({
selector: 'hero-di',
template: `<h1>Hero: {{name}}</h1>`

1
public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
View File

@ -1,3 +1,4 @@
// #docregion
// #docregion metadata
import { Component } from '@angular/core';

3
public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
View File

@ -1,7 +1,7 @@
// #docregion
import { Component } from '@angular/core';
import { DataService } from './data.service';
// #docregion
export class HeroComponent {
constructor(dataService) {
this.name = dataService.getHeroName();
@ -18,5 +18,4 @@ HeroComponent.annotations = [
HeroComponent.parameters = [
[DataService]
];
// #enddocregion

1
public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
View File

@ -1,4 +1,5 @@
// #docplaster
// #docregion
// #docregion metadata
import { Component } from '@angular/core';

68
public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
View File

@ -1,38 +1,36 @@
(function(app) {
// #docregion
app.ConfirmComponent = ConfirmComponent;
// #docregion
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'
]
})
];
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();
}
function ConfirmComponent() {
this.ok = new ng.core.EventEmitter();
this.notOk = new ng.core.EventEmitter();
}
ConfirmComponent.prototype.onOkClick = function() {
this.ok.emit(true);
}
ConfirmComponent.prototype.onOkClick = function() {
this.ok.emit(true);
}
ConfirmComponent.prototype.onNotOkClick = function() {
this.notOk.emit(true);
}
// #enddocregion
ConfirmComponent.prototype.onNotOkClick = function() {
this.notOk.emit(true);
}
// #enddocregion
})(window.app = window.app || {});
@ -40,8 +38,10 @@ ConfirmComponent.prototype.onNotOkClick = function() {
(function(app) {
// #docregion dsl
app.ConfirmDslComponent = ng.core.Component({
var old = app.ConfirmComponent;
// #docregion dsl
app.ConfirmComponent = ng.core.Component({
selector: 'app-confirm-dsl',
templateUrl: 'app/confirm.component.html',
inputs: [
@ -54,7 +54,7 @@ app.ConfirmDslComponent = ng.core.Component({
]
})
.Class({
constructor: function ConfirmDslComponent() {
constructor: function ConfirmComponent() {
this.ok = new ng.core.EventEmitter();
this.notOk = new ng.core.EventEmitter();
},
@ -67,7 +67,9 @@ app.ConfirmDslComponent = ng.core.Component({
this.notOk.emit(true);
}
});
// #enddocregion dsl
// #enddocregion dsl
app.ConfirmDslComponent = app.ConfirmComponent;
app.ConfirmComponent = old;
})(window.app = window.app || {});

38
public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
View File

@ -1,26 +1,36 @@
(function(app) {
app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent;
var old = app.HeroComponent;
HeroDIInjectAdditionalComponent.annotations = [
new ng.core.Component({
selector: 'hero-di-inject-additional',
template: '<hero-title title="Tour of Heroes"></hero-title>'
})
];
app.HeroComponent = HeroComponent;
function HeroDIInjectAdditionalComponent() {}
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-di-inject-additional',
template: '<hero-title title="Tour of Heroes"></hero-title>'
})
];
function HeroComponent() {}
app.HeroDIInjectAdditionalComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
////// DSL Version /////////
(function(app) {
app.HeroDIInjectAdditionalDslComponent = ng.core.Component({
selector: 'hero-di-inject-additional-dsl',
template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
}).Class({
constructor: function HeroDIInjectAdditionalDslComponent() { }
});
var old = app.HeroComponent;
app.HeroComponent = ng.core.Component({
selector: 'hero-di-inject-additional-dsl',
template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
}).Class({
constructor: function HeroComponent() { }
});
app.HeroDIInjectAdditionalDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});

64
public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
View File

@ -1,21 +1,26 @@
(function(app) {
// #docregion
app.HeroDIInjectComponent = HeroDIInjectComponent;
var old = app.HeroComponent;
HeroDIInjectComponent.annotations = [
new ng.core.Component({
selector: 'hero-di-inject',
template: '<h1>Hero: {{name}}</h1>'
})
];
// #docregion
app.HeroComponent = HeroComponent;
HeroDIInjectComponent.parameters = [ 'heroName' ];
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-di-inject',
template: '<h1>Hero: {{name}}</h1>'
})
];
function HeroDIInjectComponent(name) {
this.name = name;
}
// #enddocregion
HeroComponent.parameters = [ 'heroName' ];
function HeroComponent(name) {
this.name = name;
}
// #enddocregion
app.HeroDIInjectComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
@ -23,19 +28,24 @@ function HeroDIInjectComponent(name) {
(function(app) {
// #docregion dsl
app.HeroDIInjectDslComponent = ng.core.Component({
selector: 'hero-di-inject-dsl',
template: '<h1>Hero: {{name}}</h1>'
})
.Class({
constructor: [
new ng.core.Inject('heroName'),
function HeroDIInjectDslComponent(name) {
this.name = name;
}
]
});
// #enddocregion dsl
var old = app.HeroComponent;
// #docregion dsl
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;
}
]
});
// #enddocregion dsl
app.HeroDIInjectDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});

48
public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
View File

@ -1,23 +1,26 @@
(function(app) {
// #docregion
app.HeroDIComponent = HeroDIComponent;
var old = app.HeroComponent;
HeroDIComponent.annotations = [
// #docregion
app.HeroComponent = HeroComponent;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-di',
template: '<h1>Hero: {{name}}</h1>'
})
];
HeroDIComponent.parameters = [ app.DataService ];
HeroComponent.parameters = [ app.DataService ];
function HeroDIComponent(dataService) {
function HeroComponent(dataService) {
this.name = dataService.getHeroName();
}
// #enddocregion
app.HeroDIComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
@ -25,19 +28,24 @@
(function(app) {
// #docregion dsl
app.HeroDIDslComponent = ng.core.Component({
selector: 'hero-di-dsl',
template: '<h1>Hero: {{name}}</h1>'
})
.Class({
constructor: [
app.DataService,
function HeroDIDslComponent(service) {
this.name = service.getHeroName();
}
]
});
// #enddocregion dsl
var old = app.HeroComponent;
// #docregion dsl
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();
}
]
});
// #enddocregion dsl
app.HeroDIDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});

162
public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
View File

@ -1,49 +1,54 @@
(function(app) {
// #docregion
app.HeroHostComponent = HeroHostComponent;
var old = app.HeroComponent
HeroHostComponent.annotations = [
new ng.core.Component({
selector: 'hero-host',
template:
'<h1 [class.active]="active">Hero Host</h1>' +
'<div>Heading clicks: {{clicks}}</div>',
host: {
// HostBindings to the <hero-host> element
'[title]': 'title',
'[class.heading]': 'headingClass',
'(click)': 'clicked()',
// #docregion
app.HeroComponent = HeroComponent;
// 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;}']
})
];
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-host',
template:
'<h1 [class.active]="active">Hero Host</h1>' +
'<div>Heading clicks: {{clicks}}</div>',
host: {
// HostBindings to the <hero-host> element
'[title]': 'title',
'[class.heading]': 'headingClass',
'(click)': 'clicked()',
function HeroHostComponent() {
this.clicks = 0;
this.headingClass = true;
this.title = 'Hero Host Tooltip content';
}
// 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;}']
})
];
HeroHostComponent.prototype.clicked = function() {
this.clicks += 1;
}
function HeroComponent() {
this.clicks = 0;
this.headingClass = true;
this.title = 'Hero Host Tooltip content';
}
HeroHostComponent.prototype.enter = function(event) {
this.active = true;
this.headingClass = false;
}
HeroComponent.prototype.clicked = function() {
this.clicks += 1;
}
HeroHostComponent.prototype.leave = function(event) {
this.active = false;
this.headingClass = true;
}
// #enddocregion
HeroComponent.prototype.enter = function(event) {
this.active = true;
this.headingClass = false;
}
HeroComponent.prototype.leave = function(event) {
this.active = false;
this.headingClass = true;
}
// #enddocregion
app.HeroHostComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
@ -51,47 +56,52 @@ HeroHostComponent.prototype.leave = function(event) {
(function(app) {
// #docregion dsl
app.HeroHostDslComponent = ng.core.Component({
selector: 'hero-host-dsl',
template: `
<h1 [class.active]="active">Hero Host (DSL)</h1>
<div>Heading clicks: {{clicks}}</div>
`,
host: {
// HostBindings to the <hero-host-dsl> element
'[title]': 'title',
'[class.heading]': 'headingClass',
'(click)': 'clicked()',
var old = app.HeroComponent;
// 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 HeroHostDslComponent() {
this.clicks = 0;
this.headingClass = true;
this.title = 'Hero Host Tooltip DSL content';
},
// #docregion dsl
app.HeroComponent = ng.core.Component({
selector: 'hero-host-dsl',
template: `
<h1 [class.active]="active">Hero Host (DSL)</h1>
<div>Heading clicks: {{clicks}}</div>
`,
host: {
// HostBindings to the <hero-host-dsl> element
'[title]': 'title',
'[class.heading]': 'headingClass',
'(click)': 'clicked()',
clicked() {
this.clicks += 1;
},
// 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';
},
enter(event) {
this.active = true;
this.headingClass = false;
},
clicked() {
this.clicks += 1;
},
leave(event) {
this.active = false;
this.headingClass = true;
}
});
// #enddocregion dsl
enter(event) {
this.active = true;
this.headingClass = false;
},
leave(event) {
this.active = false;
this.headingClass = true;
}
});
// #enddocregion dsl
app.HeroHostDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});

42
public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
View File

@ -1,23 +1,28 @@
(function(app) {
app.HeroIOComponent = HeroComponent;
var old = app.HeroComponent
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-io',
templateUrl: 'app/hero-io.component.html'
})
];
app.HeroComponent = HeroComponent;
function HeroComponent() { }
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-io',
templateUrl: 'app/hero-io.component.html'
})
];
HeroComponent.prototype.onOk = function() {
this.okClicked = true;
}
function HeroComponent() { }
HeroComponent.prototype.onCancel = function() {
this.cancelClicked = true;
}
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 || {});
@ -25,12 +30,14 @@ HeroComponent.prototype.onCancel = function() {
(function(app) {
app.HeroIODslComponent = ng.core.Component({
var old = app.HeroComponent
app.HeroComponent = ng.core.Component({
selector: 'hero-io-dsl',
templateUrl: 'app/hero-io-dsl.component.html'
})
.Class({
constructor: function HeroIODslComponent() { },
constructor: function HeroComponent() { },
onOk: function() {
this.okClicked = true;
},
@ -39,4 +46,7 @@ app.HeroIODslComponent = ng.core.Component({
}
});
app.HeroIODslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});

46
public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
View File

@ -1,23 +1,28 @@
// #docplaster
(function(app) {
// #docregion
app.HeroLifecycleComponent = HeroComponent;
var old = app.HeroComponent;
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-lifecycle',
template: '<h1>Hero: {{name}}</h1>'
})
];
// #docregion
app.HeroComponent = HeroComponent;
function HeroComponent() { }
HeroComponent.annotations = [
new ng.core.Component({
selector: 'hero-lifecycle',
template: '<h1>Hero: {{name}}</h1>'
})
];
HeroComponent.prototype.ngOnInit = function() {
// todo: fetch from server async
setTimeout(() => this.name = 'Windstorm', 0);
};
// #enddocregion
function HeroComponent() { }
HeroComponent.prototype.ngOnInit = function() {
// todo: fetch from server async
setTimeout(() => this.name = 'Windstorm', 0);
};
// #enddocregion
app.HeroLifecycleComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});
@ -25,18 +30,23 @@ HeroComponent.prototype.ngOnInit = function() {
(function(app) {
// #docregion dsl
app.HeroLifecycleDslComponent = ng.core.Component({
var old = app.HeroComponent;
// #docregion dsl
app.HeroComponent = ng.core.Component({
selector: 'hero-lifecycle-dsl',
template: '<h1>Hero: {{name}}</h1>'
})
.Class({
constructor: function HeroLifecycleDslComponent() { },
constructor: function HeroComponent() { },
ngOnInit: function() {
// todo: fetch from server async
setTimeout(() => this.name = 'Windstorm', 0);
}
});
// #enddocregion dsl
// #enddocregion dsl
app.HeroLifecycleDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});

172
public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
View File

@ -1,92 +1,92 @@
(function(app) {
app.heroQueries = app.heroQueries || {};
app.heroQueries = app.heroQueries || {};
app.heroQueries.ContentChildComponent = ng.core.Component({
selector: 'content-child',
template:
'<span class="content-child" *ngIf="active">' +
'Active' +
'</span>'
}).Class({
constructor: function ContentChildComponent() {
this.active = false;
},
activate: function() {
this.active = !this.active;
}
});
////////////////////
// #docregion content
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();
}
});
// #enddocregion content
////////////////////
// #docregion view
app.heroQueries.HeroQueriesComponent = ng.core.Component({
selector: 'hero-queries',
template:
'<view-child *ngFor="let hero of heroData" [hero]="hero">' +
'<content-child></content-child>' +
'</view-child>' +
'<button (click)="activate()">{{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();
});
},
});
// #docregion defined-property
// add prototype property w/ getter outside the DSL
var proto = app.heroQueries.HeroQueriesComponent.prototype;
Object.defineProperty(proto, "buttonLabel", {
get: function () {
return this.active ? 'Deactivate' : 'Activate';
app.heroQueries.ContentChildComponent = ng.core.Component({
selector: 'content-child',
template:
'<span class="content-child" *ngIf="active">' +
'Active' +
'</span>'
}).Class({
constructor: function ContentChildComponent() {
this.active = false;
},
enumerable: true
});
// #enddocregion defined-property
// #enddocregion view
activate: function() {
this.active = !this.active;
}
});
////////////////////
// #docregion content
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();
}
});
// #enddocregion content
////////////////////
// #docregion view
app.heroQueries.HeroQueriesComponent = ng.core.Component({
selector: 'hero-queries',
template:
'<view-child *ngFor="let hero of heroData" [hero]="hero">' +
'<content-child></content-child>' +
'</view-child>' +
'<button (click)="activate()">{{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();
});
},
});
// #docregion defined-property
// add prototype property w/ getter outside the DSL
var proto = app.heroQueries.HeroQueriesComponent.prototype;
Object.defineProperty(proto, "buttonLabel", {
get: function () {
return this.active ? 'Deactivate' : 'Activate';
},
enumerable: true
});
// #enddocregion defined-property
// #enddocregion view
})(window.app = window.app || {});

92
public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
View File

@ -1,33 +1,32 @@
(function(app) {
// #docregion
app.HeroTitleComponent = HeroTitleComponent;
// #docregion
app.HeroTitleComponent = HeroTitleComponent;
// #docregion templateUrl
HeroTitleComponent.annotations = [
new ng.core.Component({
selector: 'hero-title',
templateUrl: 'app/hero-title.component.html'
})
];
// #enddocregion templateUrl
// #docregion templateUrl
HeroTitleComponent.annotations = [
new ng.core.Component({
selector: 'hero-title',
templateUrl: 'app/hero-title.component.html'
})
];
// #enddocregion templateUrl
function HeroTitleComponent(titlePrefix, title) {
this.titlePrefix = titlePrefix;
this.title = title;
this.msg = '';
}
function HeroTitleComponent(titlePrefix, title) {
this.titlePrefix = titlePrefix;
this.title = title;
this.msg = '';
}
HeroTitleComponent.prototype.ok = function() {
this.msg = 'OK!';
}
HeroTitleComponent.prototype.ok = function() {
this.msg = 'OK!';
}
HeroTitleComponent.parameters = [
[new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
[new ng.core.Attribute('title')]
];
// #enddocregion
HeroTitleComponent.parameters = [
[new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
[new ng.core.Attribute('title')]
];
// #enddocregion
})(window.app = window.app || {});
@ -35,26 +34,31 @@ HeroTitleComponent.parameters = [
(function(app) {
// #docregion dsl
app.HeroTitleDslComponent = 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 HeroTitleDslComponent(titlePrefix, title) {
this.titlePrefix = titlePrefix;
this.title = title;
this.msg = '';
}
],
var old = app.HeroTitleComponent;
ok: function() {
this.msg = 'OK!';
}
});
// #enddocregion dsl
// #docregion dsl
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!';
}
});
// #enddocregion dsl
app.HeroTitleDslComponent = app.HeroTitleComponent;
app.HeroTitleComponent = old;
})(window.app = window.app || {});

13
public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
View File

@ -31,18 +31,23 @@ HeroComponent.prototype.getName = function() { return 'Windstorm'; };
(function(app) {
// #docregion dsl
app.HeroDslComponent = ng.core.Component({
var old = app.HeroComponent;
// #docregion dsl
app.HeroComponent = ng.core.Component({
selector: 'hero-view-dsl',
template: '<h1>{{title}}: {{getName()}}</h1>',
})
.Class({
constructor: function HeroDslComponent() {
constructor: function HeroComponent() {
this.title = "Hero Detail";
},
getName: function() { return 'Windstorm'; }
});
// #enddocregion dsl
// #enddocregion dsl
app.HeroDslComponent = app.HeroComponent;
app.HeroComponent = old;
})(window.app = window.app || {});

2
public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
View File

@ -1,7 +1,7 @@
// #docregion
import { Component } from '@angular/core';
import { DataService } from './data.service';
// #docregion
@Component({
selector: 'hero-di',
template: `<h1>Hero: {{name}}</h1>`

1
public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
View File

@ -1,3 +1,4 @@
// #docregion
// #docregion metadata
import { Component } from '@angular/core';