diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
index 0cc78d277e..3a17abd281 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
@@ -1,7 +1,7 @@
+// #docregion
import { Component } from '@angular/core';
import { DataService } from './data.service';
-// #docregion
@Component({
selector: 'hero-di',
template: `
Hero: {{name}}
`
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
index 4ea4c11611..2976ec605e 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -1,3 +1,4 @@
+// #docregion
// #docregion metadata
import { Component } from '@angular/core';
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
index dfbecf0707..a18b1ba777 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
@@ -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
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
index 10b92c2878..350f946460 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
@@ -1,4 +1,5 @@
// #docplaster
+// #docregion
// #docregion metadata
import { Component } from '@angular/core';
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
index 4a4cd0a470..2cac6b032b 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
@@ -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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
index 1a88cfa355..450cc53847 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
@@ -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: ''
- })
-];
+ app.HeroComponent = HeroComponent;
-function HeroDIInjectAdditionalComponent() {}
+ HeroComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-di-inject-additional',
+ template: ''
+ })
+ ];
+
+ 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: ''
-}).Class({
- constructor: function HeroDIInjectAdditionalDslComponent() { }
-});
+ var old = app.HeroComponent;
+
+ app.HeroComponent = ng.core.Component({
+ selector: 'hero-di-inject-additional-dsl',
+ template: ''
+ }).Class({
+ constructor: function HeroComponent() { }
+ });
+
+ app.HeroDIInjectAdditionalDslComponent = app.HeroComponent;
+ app.HeroComponent = old;
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
index 2e04c9246e..879365208c 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
@@ -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: 'Hero: {{name}}
'
- })
-];
+ // #docregion
+ app.HeroComponent = HeroComponent;
-HeroDIInjectComponent.parameters = [ 'heroName' ];
+ HeroComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-di-inject',
+ template: 'Hero: {{name}}
'
+ })
+ ];
-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: 'Hero: {{name}}
'
-})
-.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: 'Hero: {{name}}
'
+ })
+ .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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
index c80efe193e..2f49a85079 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
@@ -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: 'Hero: {{name}}
'
})
];
- 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: 'Hero: {{name}}
'
-})
-.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: 'Hero: {{name}}
'
+ })
+ .Class({
+ constructor: [
+ app.DataService,
+ function HeroComponent(service) {
+ this.name = service.getHeroName();
+ }
+ ]
+ });
+ // #enddocregion dsl
+
+ app.HeroDIDslComponent = app.HeroComponent;
+ app.HeroComponent = old;
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
index 0b04d5efae..b73e50aae0 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
@@ -1,49 +1,54 @@
(function(app) {
-// #docregion
-app.HeroHostComponent = HeroHostComponent;
+ var old = app.HeroComponent
-HeroHostComponent.annotations = [
- new ng.core.Component({
- selector: 'hero-host',
- template:
- 'Hero Host
' +
- 'Heading clicks: {{clicks}}
',
- host: {
- // HostBindings to the element
- '[title]': 'title',
- '[class.heading]': 'headingClass',
- '(click)': 'clicked()',
+ // #docregion
+ app.HeroComponent = HeroComponent;
- // HostListeners on the entire element
- '(mouseenter)': 'enter($event)',
- '(mouseleave)': 'leave($event)'
- },
- // Styles within (but excluding) the element
- styles: ['.active {background-color: yellow;}']
- })
-];
+ HeroComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-host',
+ template:
+ 'Hero Host
' +
+ 'Heading clicks: {{clicks}}
',
+ host: {
+ // HostBindings to the 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 element
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the 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: `
- Hero Host (DSL)
- Heading clicks: {{clicks}}
- `,
- host: {
- // HostBindings to the element
- '[title]': 'title',
- '[class.heading]': 'headingClass',
- '(click)': 'clicked()',
+ var old = app.HeroComponent;
- // HostListeners on the entire element
- '(mouseenter)': 'enter($event)',
- '(mouseleave)': 'leave($event)'
- },
- // Styles within (but excluding) the 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: `
+ Hero Host (DSL)
+ Heading clicks: {{clicks}}
+ `,
+ host: {
+ // HostBindings to the element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+ '(click)': 'clicked()',
- clicked() {
- this.clicks += 1;
- },
+ // HostListeners on the entire element
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the 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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
index d35f3762da..b09208ce68 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
@@ -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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
index 94aa3514b2..2a68288f92 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
@@ -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: 'Hero: {{name}}
'
- })
-];
+ // #docregion
+ app.HeroComponent = HeroComponent;
-function HeroComponent() { }
+ HeroComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-lifecycle',
+ template: 'Hero: {{name}}
'
+ })
+ ];
-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: 'Hero: {{name}}
'
})
.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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
index 5e21cfcb0b..5e8de58d41 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
@@ -1,92 +1,92 @@
(function(app) {
-app.heroQueries = app.heroQueries || {};
+ app.heroQueries = app.heroQueries || {};
-app.heroQueries.ContentChildComponent = ng.core.Component({
- selector: 'content-child',
- template:
- '' +
- 'Active' +
- ''
-}).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:
- '' +
- '{{hero.name}} ' +
- '' +
- '
',
- 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:
- '' +
- '' +
- '' +
- '',
- 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:
+ '' +
+ 'Active' +
+ ''
+ }).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:
+ '' +
+ '{{hero.name}} ' +
+ '' +
+ '
',
+ 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:
+ '' +
+ '' +
+ '' +
+ '',
+ 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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
index 9a8ce7e578..f0770e1228 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
@@ -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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
index 346d6f03d8..e1407b2635 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
@@ -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: '{{title}}: {{getName()}}
',
})
.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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
index 0cc78d277e..3a17abd281 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
@@ -1,7 +1,7 @@
+// #docregion
import { Component } from '@angular/core';
import { DataService } from './data.service';
-// #docregion
@Component({
selector: 'hero-di',
template: `Hero: {{name}}
`
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
index 4ea4c11611..2976ec605e 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -1,3 +1,4 @@
+// #docregion
// #docregion metadata
import { Component } from '@angular/core';