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';