diff --git a/gulpfile.js b/gulpfile.js
index d24edb1f16..765dd3e006 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) {
e2eSpecPaths.forEach(function(specPath) {
// get all of the examples under each dir where a pcFilename is found
localExamplePaths = getExamplePaths(specPath, true);
- // Filter by language
- localExamplePaths = localExamplePaths.filter(function (fn) {
- return fn.match('/'+lang+'$') != null;
- });
+ // Filter by example name
if (filter) {
localExamplePaths = localExamplePaths.filter(function (fn) {
return fn.match(filter) != null;
})
}
+ // Filter by language, also supports variations like js-es6
+ localExamplePaths = localExamplePaths.filter(function (fn) {
+ return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
+ });
localExamplePaths.forEach(function(examplePath) {
examplePaths.push(examplePath);
})
@@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) {
}
function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
- var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
+ var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
var includePattern = path.join(shredOptions.examplesDir, watchPattern);
// removed this version because gulp.watch has the same glob issue that dgeni has.
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index b6733dc6ea..b1a1357472 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -11,6 +11,7 @@ wallaby.js
_test-output
**/ts/**/*.js
+**/js-es6*/**/*.js
**/ts-snippets/**/*.js
*.d.ts
diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json
index 3f255fcbd6..bcccdd978a 100644
--- a/public/docs/_examples/_boilerplate/package.json
+++ b/public/docs/_examples/_boilerplate/package.json
@@ -18,6 +18,7 @@
"build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
"build:cli": "ng build",
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+ "build:babel": "babel app -d app --extensions \".es6\" --source-maps",
"copy-dist-files": "node ./copy-dist-files.js",
"i18n": "ng-xi18n"
},
diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
index 5862beeebf..bc67bac8f0 100644
--- a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
+++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node
+'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor';
@@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () {
});
it('should display the basic component example', function () {
- testTag('hero-view', 'Hero: Windstorm');
+ testTag('hero-view', 'Hero Detail: Windstorm');
});
it('should display the component example with lifecycle methods', function () {
@@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () {
it('should support component with inputs and outputs', function () {
let app = element(by.css('hero-io'));
- let confirmComponent = app.element(by.css('my-confirm'));
+ let confirmComponent = app.element(by.css('app-confirm'));
confirmComponent.element(by.buttonText('OK')).click();
expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
@@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () {
});
it('should support host bindings and host listeners', function() {
- let app = element(by.css('heroes-bindings'));
+ let app = element(by.css('hero-host'));
let h1 = app.element(by.css('h1'));
expect(app.getAttribute('class')).toBe('heading');
- expect(app.getAttribute('title')).toBe('Tooltip content');
+ expect(app.getAttribute('title')).toContain('Tooltip');
h1.click();
expect(h1.getAttribute('class')).toBe('active');
@@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () {
});
it('should support content and view queries', function() {
- let app = element(by.css('heroes-queries'));
- let windstorm = app.element(by.css('a-hero:first-child'));
+ let app = element(by.css('hero-queries'));
+ let windstorm = app.element(by.css('view-child:first-child'));
- app.element(by.buttonText('Activate')).click();
+ app.element(by.css('button')).click();
expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
- expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
+ expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
});
function testTag(selector: string, expectedText: string) {
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
new file mode 100644
index 0000000000..3aaf507508
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "es2015",
+ "angular2"
+ ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
new file mode 100644
index 0000000000..e5f158dbed
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+ moduleId: module.id,
+ selector: 'my-app',
+ templateUrl: 'app.component.html',
+ styles: [
+ // See hero-di-inject-additional.component
+ 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+ '.heading {font-style: italic}'
+ ]
+})
+export class AppComponent {
+ title = 'ES6 JavaScript with Decorators';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
new file mode 100644
index 0000000000..7f1efd31a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
@@ -0,0 +1,31 @@
+
+{{title}}
+Classes and Class Metadata
+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+
+
+
+
+
+
+
+
+
+
+
+Dependency Injection
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
new file mode 100644
index 0000000000..bea55777ef
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
@@ -0,0 +1,55 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent,
+ ConfirmComponent,
+ HeroComponent,
+ HeroDIComponent,
+ HeroDIInjectComponent,
+ HeroDIInjectAdditionalComponent,
+ HeroHostComponent, HeroHostMetaComponent,
+ HeroIOComponent,
+ HeroLifecycleComponent,
+ HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+ HeroTitleComponent
+ ],
+ providers: [
+ DataService,
+ { provide: 'heroName', useValue: 'Windstorm' }
+ ],
+ bootstrap: [ AppComponent ],
+
+ // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+ LocationStrategy,
+ HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
new file mode 100644
index 0000000000..08a0ed6c60
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+ moduleId: module.id,
+ selector: 'app-confirm',
+ templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+ @Input() okMsg = '';
+ @Input('cancelMsg') notOkMsg = '';
+ @Output() ok = new EventEmitter();
+ @Output('cancel') notOk = new EventEmitter();
+
+ onOkClick() {
+ this.ok.emit(true);
+ }
+ onNotOkClick() {
+ this.notOk.emit(true);
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html
@@ -0,0 +1,6 @@
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
new file mode 100644
index 0000000000..cd7f9e1aae
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DataService {
+ constructor() { }
+
+ getHeroName() {
+ return 'Windstorm';
+ }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
new file mode 100644
index 0000000000..ec460a9dbc
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-di-inject-additional',
+ template: ``
+})
+export class HeroComponent { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
new file mode 100644
index 0000000000..94b42f956a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
@@ -0,0 +1,13 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+@Component({
+ selector: 'hero-di-inject',
+ template: `Hero: {{name}}
`
+})
+export class HeroComponent {
+ constructor(@Inject('heroName') name) {
+ this.name = name;
+ }
+}
+// #enddocregion
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
new file mode 100644
index 0000000000..0cc78d277e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { DataService } from './data.service';
+
+// #docregion
+@Component({
+ selector: 'hero-di',
+ template: `Hero: {{name}}
`
+})
+export class HeroComponent {
+ name = '';
+ constructor(dataService: DataService) {
+ this.name = dataService.getHeroName();
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
new file mode 100644
index 0000000000..25dbe1c21a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+ selector: 'hero-host-meta',
+ template: `
+ Hero Host in Metadata
+ Heading clicks: {{clicks}}
+ `,
+ host: {
+ // HostBindings to the element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+
+ // HostListeners on the entire element
+ '(click)': 'clicked()',
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+ title = 'Hero Host in Metadata Tooltip';
+ headingClass = true;
+
+ active = false;
+ clicks = 0;
+
+ clicked() {
+ this.clicks += 1;
+ }
+
+ enter(event: Event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ leave(event: Event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+ selector: 'hero-host',
+ template: `
+ Hero Host in Decorators
+ Heading clicks: {{clicks}}
+ `,
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+ // HostBindings to the element
+ @HostBinding() title = 'Hero Host in Decorators Tooltip';
+ @HostBinding('class.heading') headingClass = true;
+
+ active = false;
+ clicks = 0;
+
+ // HostListeners on the entire element
+ @HostListener('click')
+ clicked() {
+ this.clicks += 1;
+ }
+
+ @HostListener('mouseenter', ['$event'])
+ enter(event: Event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ @HostListener('mouseleave', ['$event'])
+ leave(event: Event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
new file mode 100644
index 0000000000..4b36411e78
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-io',
+ template: `
+
+
+ OK clicked
+ Cancel clicked
+ `
+})
+export class HeroIOComponent {
+ okClicked = false;
+ cancelClicked = false;
+
+ onOk() {
+ this.okClicked = true;
+ }
+
+ onCancel() {
+ this.cancelClicked = true;
+ }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..2539266597
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
@@ -0,0 +1,14 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-lifecycle',
+ template: `Hero: {{name}}
`
+})
+export class HeroComponent {
+ name = '';
+ ngOnInit() {
+ // todo: fetch from server async
+ setTimeout(() => this.name = 'Windstorm', 0);
+ }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
new file mode 100644
index 0000000000..fced43d4d7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
@@ -0,0 +1,81 @@
+import {
+ Component,
+ ContentChild,
+ Input,
+ QueryList,
+ ViewChildren
+} from '@angular/core';
+
+@Component({
+ selector: 'content-child',
+ template: `
+
+ Active
+ `
+})
+export class ContentChildComponent {
+ active = false;
+
+ activate() {
+ this.active = true;
+ }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+ selector: 'view-child',
+ template: `
+
+ {{hero.name}}
+
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+ @Input() hero;
+ active = false;
+
+ @ContentChild(ContentChildComponent) content;
+
+ activate() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+ selector: 'hero-queries',
+ template: `
+
+
+
+
+ `
+})
+export class HeroQueriesComponent {
+ active = false;
+ heroData = [
+ {id: 1, name: 'Windstorm'},
+ {id: 2, name: 'LaughingGas'}
+ ];
+
+ @ViewChildren(ViewChildComponent) views;
+
+ activate() {
+ this.active = !this.active;
+ this.views.forEach(
+ view => view.activate()
+ );
+ }
+
+ get buttonLabel() {
+ return this.active ? 'Deactivate' : 'Activate';
+ }
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
new file mode 100644
index 0000000000..25460d34f7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
@@ -0,0 +1,26 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+ moduleId: module.id,
+ selector: 'hero-title',
+ templateUrl: 'hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+ msg = '';
+ constructor(
+ @Inject('titlePrefix') @Optional() titlePrefix,
+ @Attribute('title') title
+ ) {
+ this.titlePrefix = titlePrefix;
+ this.title = title;
+ }
+
+ ok() {
+ this.msg = 'OK!';
+ }
+}
+// #enddocregion
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
@@ -0,0 +1,4 @@
+
+{{titlePrefix}} {{title}}
+
+{{ msg }}
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
new file mode 100644
index 0000000000..4ea4c11611
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -0,0 +1,14 @@
+// #docregion metadata
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'hero-view',
+ template: '{{title}}: {{getName()}}
'
+})
+// #docregion appexport, class
+export class HeroComponent {
+ title = 'Hero Detail';
+ getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+// #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
new file mode 100644
index 0000000000..2470c9595e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
new file mode 100644
index 0000000000..391bd1a766
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
@@ -0,0 +1,4 @@
+{
+ "build": "build:babel",
+ "run": "http-server:e2e"
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
new file mode 100644
index 0000000000..1b9e3b5211
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+ TypeScript to JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
@@ -0,0 +1,8 @@
+{
+ "description": "TypeScript to JavaScript",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
new file mode 100644
index 0000000000..3c078e9f99
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
@@ -0,0 +1,5 @@
+{
+ "presets": [
+ "es2015"
+ ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
new file mode 100644
index 0000000000..9615b98a1f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+export class AppComponent {
+ constructor() {
+ this.title = 'Plain ES6 JavaScript';
+ }
+}
+
+AppComponent.annotations = [
+ new Component({
+ moduleId: module.id,
+ selector: 'my-app',
+ templateUrl: 'app.component.html',
+ styles: [
+ // See hero-di-inject-additional.component
+ 'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
+ '.heading {font-style: italic}'
+ ]
+ })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
new file mode 100644
index 0000000000..8fbe65ade6
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
@@ -0,0 +1,30 @@
+
+{{title}}
+Classes and Class Metadata
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+
+
+
+
+
+
+
+
+
+
+
+Dependency Injection
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
new file mode 100644
index 0000000000..e8c7a8f9c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
@@ -0,0 +1,56 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+export class AppModule { }
+
+AppModule.annotations = [
+ new NgModule({
+ imports: [ BrowserModule],
+ declarations: [
+ AppComponent,
+ ConfirmComponent,
+ HeroComponent,
+ HeroDIComponent,
+ HeroDIInjectComponent,
+ HeroDIInjectAdditionalComponent,
+ HeroHostComponent,
+ HeroIOComponent,
+ HeroLifecycleComponent,
+ HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+ HeroTitleComponent
+ ],
+ providers: [
+ DataService,
+ { provide: 'heroName', useValue: 'Windstorm' }
+ ],
+ bootstrap: [ AppComponent ],
+
+ // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+ })
+]
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+ LocationStrategy,
+ HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
new file mode 100644
index 0000000000..d42a553688
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
@@ -0,0 +1,32 @@
+import { Component, EventEmitter } from '@angular/core';
+
+// #docregion
+export class ConfirmComponent {
+ constructor(){
+ this.ok = new EventEmitter();
+ this.notOk = new EventEmitter();
+ }
+ onOkClick() {
+ this.ok.emit(true);
+ }
+ onNotOkClick() {
+ this.notOk.emit(true);
+ }
+}
+
+ConfirmComponent.annotations = [
+ new Component({
+ moduleId: module.id,
+ selector: 'app-confirm',
+ templateUrl: 'confirm.component.html',
+ inputs: [
+ 'okMsg',
+ 'notOkMsg: cancelMsg'
+ ],
+ outputs: [
+ 'ok',
+ 'notOk: cancel'
+ ]
+ })
+];
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html
@@ -0,0 +1,6 @@
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
new file mode 100644
index 0000000000..de023ce5a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+export class DataService {
+ constructor() {
+ }
+ getHeroName() {
+ return 'Windstorm';
+ }
+}
+
+DataService.annotations = [
+ new Injectable()
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
new file mode 100644
index 0000000000..5eb9bab815
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+export class HeroComponent { }
+
+HeroComponent.annotations = [
+ new Component({
+ selector: 'hero-di-inject-additional',
+ template: ``
+ })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
new file mode 100644
index 0000000000..2f95a0b981
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+export class HeroComponent {
+ constructor(name) {
+ this.name = name;
+ }
+}
+
+HeroComponent.annotations = [
+ new Component({
+ selector: 'hero-di-inject',
+ template: `Hero: {{name}}
`
+ })
+];
+
+HeroComponent.parameters = [
+ [new Inject('heroName')]
+];
+// #enddocregion
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
new file mode 100644
index 0000000000..dfbecf0707
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { DataService } from './data.service';
+
+// #docregion
+export class HeroComponent {
+ constructor(dataService) {
+ this.name = dataService.getHeroName();
+ }
+}
+
+HeroComponent.annotations = [
+ new Component({
+ selector: 'hero-di',
+ template: `Hero: {{name}}
`
+ })
+];
+
+HeroComponent.parameters = [
+ [DataService]
+];
+
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
new file mode 100644
index 0000000000..092cd1a1ce
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+
+// #docregion
+export class HeroHostComponent {
+ constructor() {
+ this.active = false;
+ this.clicks = 0;
+ this.headingClass = true;
+ this.title = 'Hero Host Tooltip';
+ }
+
+ clicked() {
+ this.clicks += 1;
+ }
+
+ enter(event) {
+ this.active = true;
+ this.headingClass = false;
+ }
+
+ leave(event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+}
+
+// #docregion metadata
+HeroHostComponent.annotations = [
+ new Component({
+ selector: 'hero-host',
+ template: `
+ Hero Host
+ Heading clicks: {{clicks}}
+ `,
+ host: {
+ // HostBindings to the element
+ '[title]': 'title',
+ '[class.heading]': 'headingClass',
+ '(click)': 'clicked()',
+
+ // HostListeners on the entire element
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: yellow;}']
+ })
+];
+// #docregion metadata
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
new file mode 100644
index 0000000000..0dc8c08f2d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+export class HeroIOComponent {
+ constructor() {
+ this.okClicked = false;
+ this.cancelClicked = false;
+ }
+
+ onOk() {
+ this.okClicked = true;
+ }
+
+ onCancel() {
+ this.cancelClicked = true;
+ }
+}
+
+HeroIOComponent.annotations = [
+ new Component({
+ selector: 'hero-io',
+ template: `
+
+
+ OK clicked
+ Cancel clicked
+ `
+ })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..b394ff59aa
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+export class HeroComponent {
+ ngOnInit() {
+ // todo: fetch from server async
+ setTimeout(() => this.name = 'Windstorm', 0);
+ }
+}
+
+HeroComponent.annotations = [
+ new Component({
+ selector: 'hero-lifecycle',
+ template: `Hero: {{name}}
`
+ })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
new file mode 100644
index 0000000000..bf3b914406
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
@@ -0,0 +1,97 @@
+import {
+ Component,
+ ContentChild,
+ Input,
+ QueryList,
+ ViewChildren
+} from '@angular/core';
+
+export class ContentChildComponent {
+ constructor() {
+ this.active = false;
+ }
+
+ activate() {
+ this.active = !this.active;
+ }
+}
+
+ContentChildComponent.annotations = [
+ new Component({
+ selector: 'content-child',
+ template: `
+
+ Active
+ `
+ })
+];
+
+////////////////////
+
+// #docregion content
+export class ViewChildComponent {
+ constructor() {
+ this.active = false;
+ }
+
+ activate() {
+ this.active = !this.active;
+ this.content.activate();
+ }
+}
+
+ViewChildComponent.annotations = [
+ new Component({
+ selector: 'view-child',
+ template: `
+ {{hero.name}}
+
+
`,
+ styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+ inputs: ['hero'],
+ queries: {
+ content: new ContentChild(ContentChildComponent)
+ }
+ })
+];
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+export class HeroQueriesComponent {
+ constructor(){
+ this.active = false;
+ this.heroData = [
+ {id: 1, name: 'Windstorm'},
+ {id: 2, name: 'LaughingGas'}
+ ];
+ }
+
+ activate() {
+ this.active = !this.active;
+ this.views.forEach(
+ view => view.activate()
+ );
+ }
+
+ get buttonLabel() {
+ return this.active ? 'Deactivate' : 'Activate';
+ }
+}
+
+HeroQueriesComponent.annotations = [
+ new Component({
+ selector: 'hero-queries',
+ template: `
+
+
+
+
+ `,
+ queries: {
+ views: new ViewChildren(ViewChildComponent)
+ }
+ })
+];
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
new file mode 100644
index 0000000000..ff1e6ce026
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
@@ -0,0 +1,29 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+export class HeroTitleComponent {
+ constructor(titlePrefix, title) {
+ this.titlePrefix = titlePrefix;
+ this.title = title;
+ this.msg = '';
+ }
+
+ ok() {
+ this.msg = 'OK!';
+ }
+}
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+ new Component({
+ moduleId: module.id,
+ selector: 'hero-title',
+ templateUrl: 'hero-title.component.html'
+ })
+];
+// #enddocregion templateUrl
+
+HeroTitleComponent.parameters = [
+ [new Optional(), new Inject('titlePrefix')],
+ [new Attribute('title')]
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
@@ -0,0 +1,4 @@
+
+{{titlePrefix}} {{title}}
+
+{{ msg }}
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
new file mode 100644
index 0000000000..10b92c2878
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
@@ -0,0 +1,20 @@
+// #docplaster
+// #docregion metadata
+import { Component } from '@angular/core';
+
+// #docregion appexport, class
+export class HeroComponent {
+ constructor() {
+ this.title = 'Hero Detail';
+ }
+ getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+
+HeroComponent.annotations = [
+ new Component({
+ selector: 'hero-view',
+ template: '{{title}}: {{getName()}}
'
+ })
+];
+// #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
new file mode 100644
index 0000000000..2470c9595e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
new file mode 100644
index 0000000000..391bd1a766
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
@@ -0,0 +1,4 @@
+{
+ "build": "build:babel",
+ "run": "http-server:e2e"
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/index.html b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
new file mode 100644
index 0000000000..1b9e3b5211
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+ TypeScript to JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
@@ -0,0 +1,8 @@
+{
+ "description": "TypeScript to JavaScript",
+ "files":[
+ "!**/*.d.ts",
+ "!**/*.js"
+ ],
+ "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html
new file mode 100644
index 0000000000..6681d60672
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html
@@ -0,0 +1,47 @@
+
+{{title}}
+Classes and Class Metadata
+Interfaces
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+
+
+
+
+
+
+
+
+Interfaces
+
+Interfaces (DSL)
+
+
+
+
+
+
+
+
+
+Dependency Injection
+
+
+
+
+Dependency Injection (DSL)
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.js b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js
new file mode 100644
index 0000000000..9e8c5da535
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js
@@ -0,0 +1,20 @@
+(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 || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.module.js b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js
new file mode 100644
index 0000000000..3791fe16da
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js
@@ -0,0 +1,46 @@
+(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 () {
+ // #docregion appimport
+ var HeroComponent = app.HeroComponent;
+ // #enddocregion appimport
+
+ // #docregion ng2import
+ var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+ var LocationStrategy = ng.common.LocationStrategy;
+ var HashLocationStrategy = ng.common.HashLocationStrategy;
+ // #enddocregion ng2import
+})
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html
@@ -0,0 +1,6 @@
+
+
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
new file mode 100644
index 0000000000..4a4cd0a470
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
@@ -0,0 +1,73 @@
+(function(app) {
+
+// #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'
+ ]
+ })
+];
+
+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);
+}
+
+
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+// #docregion dsl
+app.ConfirmDslComponent = ng.core.Component({
+ selector: 'app-confirm-dsl',
+ templateUrl: 'app/confirm.component.html',
+ inputs: [
+ 'okMsg',
+ 'notOkMsg: cancelMsg'
+ ],
+ outputs: [
+ 'ok',
+ 'notOk: cancel'
+ ]
+ })
+ .Class({
+ constructor: function ConfirmDslComponent() {
+ this.ok = new ng.core.EventEmitter();
+ this.notOk = new ng.core.EventEmitter();
+ },
+
+ onOkClick: function() {
+ this.ok.emit(true);
+ },
+
+ onNotOkClick: function() {
+ this.notOk.emit(true);
+ }
+ });
+
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
index c060e2b39d..643bb57dca 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
@@ -1,13 +1,10 @@
(function(app) {
- function DataService() {
- }
- DataService.annotations = [
- new ng.core.Injectable()
- ];
+ app.DataService = DataService;
+ function DataService() { }
+
DataService.prototype.getHeroName = function() {
return 'Windstorm';
};
- app.DataService = DataService;
})(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 fa9684e7a1..1a88cfa355 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,50 +1,26 @@
(function(app) {
- // #docregion
- var TitleComponent = ng.core.Component({
- selector: 'hero-title',
- template:
- '{{titlePrefix}} {{title}}
' +
- '' +
- '{{ msg }}
'
- }).Class({
- constructor: [
- [
- new ng.core.Optional(),
- new ng.core.Inject('titlePrefix')
- ],
- new ng.core.Attribute('title'),
- function(titlePrefix, title) {
- this.titlePrefix = titlePrefix;
- this.title = title;
- this.msg = '';
- }
- ],
- ok: function() {
- this.msg = 'OK!';
- }
- });
- // #enddocregion
+app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent;
- var AppComponent = ng.core.Component({
+HeroDIInjectAdditionalComponent.annotations = [
+ new ng.core.Component({
selector: 'hero-di-inject-additional',
- template: '' +
- ''
- }).Class({
- constructor: function() { }
- });
-
- app.HeroesDIInjectAdditionalModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- declarations: [
- AppComponent,
- TitleComponent
- ],
- bootstrap: [ AppComponent ]
- })
- .Class({
- constructor: function() {}
- });
+ template: ''
+ })
+];
+
+function HeroDIInjectAdditionalComponent() {}
+
+})(window.app = window.app || {});
+
+////// DSL Version /////////
+(function(app) {
+
+app.HeroDIInjectAdditionalDslComponent = ng.core.Component({
+ selector: 'hero-di-inject-additional-dsl',
+ template: ''
+}).Class({
+ constructor: function HeroDIInjectAdditionalDslComponent() { }
+});
})(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 dfda83e1f0..2e04c9246e 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,57 +1,41 @@
(function(app) {
-// #docregion parameters
- function HeroComponent(name) {
- this.name = name;
- }
- HeroComponent.parameters = [
- 'heroName'
- ];
- HeroComponent.annotations = [
- new ng.core.Component({
- selector: 'hero-di-inject',
- template: 'Hero: {{name}}
'
- })
- ];
-// #enddocregion parameters
-
- app.HeroesDIInjectModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
- })
- .Class({
- constructor: function() {}
- });
-
-})(window.app = window.app || {});
+// #docregion
+app.HeroDIInjectComponent = HeroDIInjectComponent;
-(function(app) {
-// #docregion ctor
- var HeroComponent = ng.core.Component({
- selector: 'hero-di-inline2',
+HeroDIInjectComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-di-inject',
template: 'Hero: {{name}}
'
})
- .Class({
- constructor:
- [new ng.core.Inject('heroName'),
- function(name) {
- this.name = name;
- }]
- });
-// #enddocregion ctor
-
- app.HeroesDIInjectModule2 =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- providers: [ { provide: 'heroName', useValue: 'Bombasto' } ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
- })
- .Class({
- constructor: function() {}
- });
+];
+
+HeroDIInjectComponent.parameters = [ 'heroName' ];
+
+function HeroDIInjectComponent(name) {
+ this.name = name;
+}
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(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
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
deleted file mode 100644
index 1fe9c38cb1..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-(function(app) {
- // #docregion
- var HeroComponent = ng.core.Component({
- selector: 'hero-di-inline',
- template: 'Hero: {{name}}
'
- })
- .Class({
- constructor:
- [app.DataService,
- function(service) {
- this.name = service.getHeroName();
- }]
- });
- // #enddocregion
-
- app.HeroDIInlineModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- providers: [ app.DataService ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
- })
- .Class({
- constructor: function() {}
- });
-
-})(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 55c576b836..c80efe193e 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,31 +1,43 @@
(function(app) {
// #docregion
- app.HeroDIComponent = HeroComponent;
-
- function HeroComponent(dataService) {
- this.name = dataService.getHeroName();
- }
- HeroComponent.parameters = [
- app.DataService
- ];
- HeroComponent.annotations = [
+ app.HeroDIComponent = HeroDIComponent;
+
+ HeroDIComponent.annotations = [
new ng.core.Component({
selector: 'hero-di',
template: 'Hero: {{name}}
'
})
];
+
+ HeroDIComponent.parameters = [ app.DataService ];
+
+ function HeroDIComponent(dataService) {
+ this.name = dataService.getHeroName();
+ }
+
// #enddocregion
- app.HeroesDIModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- providers: [ app.DataService ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
- })
- .Class({
- constructor: function() {}
- });
+
+})(window.app = window.app || {});
+
+////// DSL Version /////
+
+(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
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
deleted file mode 100644
index 5dd84733f3..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// #docplaster
-// #docregion appexport
-(function(app) {
-
- // #docregion component
- var HeroComponent = ng.core.Component({
- selector: 'hero-view-2',
- template:
- 'Name: {{getName()}}
',
- })
- .Class({
- constructor: function() {
- },
- getName: function() {
- return 'Windstorm';
- }
- });
- // #enddocregion component
-
- app.HeroesDslModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
- })
- .Class({
- constructor: function() {}
- });
-
-})(window.app = window.app || {});
-// #enddocregion appexport
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
new file mode 100644
index 0000000000..0b04d5efae
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
@@ -0,0 +1,97 @@
+(function(app) {
+
+// #docregion
+app.HeroHostComponent = HeroHostComponent;
+
+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()',
+
+ // HostListeners on the entire element
+ '(mouseenter)': 'enter($event)',
+ '(mouseleave)': 'leave($event)'
+ },
+ // Styles within (but excluding) the element
+ styles: ['.active {background-color: yellow;}']
+ })
+];
+
+function HeroHostComponent() {
+ this.clicks = 0;
+ this.headingClass = true;
+ this.title = 'Hero Host Tooltip content';
+}
+
+HeroHostComponent.prototype.clicked = function() {
+ this.clicks += 1;
+}
+
+HeroHostComponent.prototype.enter = function(event) {
+ this.active = true;
+ this.headingClass = false;
+}
+
+HeroHostComponent.prototype.leave = function(event) {
+ this.active = false;
+ this.headingClass = true;
+}
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//// DSL Version ////
+
+(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()',
+
+ // 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';
+ },
+
+ clicked() {
+ this.clicks += 1;
+ },
+
+ enter(event) {
+ this.active = true;
+ this.headingClass = false;
+ },
+
+ leave(event) {
+ this.active = false;
+ this.headingClass = true;
+ }
+});
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
new file mode 100644
index 0000000000..48c491be35
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
@@ -0,0 +1,7 @@
+
+
+OK clicked
+Cancel clicked
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
new file mode 100644
index 0000000000..e6eae2e804
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
@@ -0,0 +1,7 @@
+
+
+OK clicked
+Cancel clicked
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 79aef12125..d35f3762da 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,68 +1,42 @@
(function(app) {
- // #docregion
- var ConfirmComponent = ng.core.Component({
- selector: 'my-confirm',
- inputs: [
- 'okMsg',
- 'notOkMsg: cancelMsg'
- ],
- outputs: [
- 'ok',
- 'notOk: cancel'
- ],
- template:
- '' +
- ''
- }).Class({
- constructor: function() {
- this.ok = new ng.core.EventEmitter();
- this.notOk = new ng.core.EventEmitter();
- },
- onOkClick: function() {
- this.ok.next(true);
+
+app.HeroIOComponent = 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;
+}
+
+})(window.app = window.app || {});
+
+///// DSL Version ////
+
+(function(app) {
+
+app.HeroIODslComponent = ng.core.Component({
+ selector: 'hero-io-dsl',
+ templateUrl: 'app/hero-io-dsl.component.html'
+ })
+ .Class({
+ constructor: function HeroIODslComponent() { },
+ onOk: function() {
+ this.okClicked = true;
},
- onNotOkClick: function() {
- this.notOk.next(true);
+ onCancel: function() {
+ this.cancelClicked = true;
}
});
- // #enddocregion
-
- function AppComponent() {
- }
- AppComponent.annotations = [
- new ng.core.Component({
- selector: 'hero-io',
- template: '' +
- '' +
- 'OK clicked' +
- 'Cancel clicked'
- })
- ];
- AppComponent.prototype.onOk = function() {
- this.okClicked = true;
- }
- AppComponent.prototype.onCancel = function() {
- this.cancelClicked = true;
- }
-
- app.HeroesIOModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- declarations: [
- AppComponent,
- ConfirmComponent
- ],
- bootstrap: [ AppComponent ]
- })
- .Class({
- constructor: function() {}
- });
})(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 3e81c72e4e..94aa3514b2 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,29 +1,42 @@
// #docplaster
(function(app) {
- // #docregion
- function HeroComponent() {}
- // #enddocregion
- HeroComponent.annotations = [
- new ng.core.Component({
- selector: 'hero-lifecycle',
- template: 'Hero: {{name}}
'
- })
- ];
- // #docregion
- HeroComponent.prototype.ngOnInit =
- function() {
- this.name = 'Windstorm';
- };
- // #enddocregion
-
- app.HeroesLifecycleModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
- })
- .Class({
- constructor: function() {}
- });
+
+// #docregion
+app.HeroLifecycleComponent = HeroComponent;
+
+HeroComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-lifecycle',
+ template: 'Hero: {{name}}
'
+ })
+];
+
+function HeroComponent() { }
+
+HeroComponent.prototype.ngOnInit = function() {
+ // todo: fetch from server async
+ setTimeout(() => this.name = 'Windstorm', 0);
+};
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroLifecycleDslComponent = ng.core.Component({
+ selector: 'hero-lifecycle-dsl',
+ template: 'Hero: {{name}}
'
+ })
+ .Class({
+ constructor: function HeroLifecycleDslComponent() { },
+ ngOnInit: function() {
+ // todo: fetch from server async
+ setTimeout(() => this.name = 'Windstorm', 0);
+ }
+ });
+// #enddocregion dsl
})(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
new file mode 100644
index 0000000000..5e21cfcb0b
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
@@ -0,0 +1,92 @@
+(function(app) {
+
+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';
+ },
+ 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.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
@@ -0,0 +1,4 @@
+
+{{titlePrefix}} {{title}}
+
+{{ msg }}
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
new file mode 100644
index 0000000000..9a8ce7e578
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
@@ -0,0 +1,60 @@
+(function(app) {
+
+// #docregion
+app.HeroTitleComponent = HeroTitleComponent;
+
+// #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 = '';
+}
+
+HeroTitleComponent.prototype.ok = function() {
+ this.msg = 'OK!';
+}
+
+HeroTitleComponent.parameters = [
+ [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
+ [new ng.core.Attribute('title')]
+];
+
+// #enddocregion
+
+})(window.app = window.app || {});
+
+////////// DSL version ////////////
+
+(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 = '';
+ }
+ ],
+
+ ok: function() {
+ this.msg = 'OK!';
+ }
+});
+// #enddocregion dsl
+
+})(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 c6a58acc56..346d6f03d8 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
@@ -1,42 +1,48 @@
// #docplaster
+(function(app) {
+
+// #docregion
// #docregion appexport
+// #docregion metadata
+app.HeroComponent = HeroComponent; // "export"
+
+HeroComponent.annotations = [
+ new ng.core.Component({
+ selector: 'hero-view',
+ template: '{{title}}: {{getName()}}
'
+ })
+];
+
+// #docregion constructorproto
+function HeroComponent() {
+ this.title = "Hero Detail";
+}
+
+HeroComponent.prototype.getName = function() { return 'Windstorm'; };
+// #enddocregion constructorproto
+
+// #enddocregion metadata
+// #enddocregion appexport
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//////////// DSL version ///////////
+
(function(app) {
- // #enddocregion appexport
-
- // #docregion metadata
- // #docregion appexport
- // #docregion constructorproto
- function HeroComponent() {
- this.title = "Hero Detail";
- }
-
- // #enddocregion constructorproto
- // #enddocregion appexport
- HeroComponent.annotations = [
- new ng.core.Component({
- selector: 'hero-view',
- template:
- 'Hero: {{getName()}}
'
- })
- ];
- // #docregion constructorproto
- HeroComponent.prototype.getName =
- function() {return 'Windstorm';};
- // #enddocregion constructorproto
- // #enddocregion metadata
-
- app.HeroesModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- declarations: [ HeroComponent ],
- bootstrap: [ HeroComponent ]
- })
- .Class({
- constructor: function() {}
- });
-
- // #docregion appexport
- app.HeroComponent = HeroComponent;
+
+// #docregion dsl
+app.HeroDslComponent = ng.core.Component({
+ selector: 'hero-view-dsl',
+ template: '{{title}}: {{getName()}}
',
+ })
+ .Class({
+ constructor: function HeroDslComponent() {
+ this.title = "Hero Detail";
+ },
+
+ getName: function() { return 'Windstorm'; }
+ });
+// #enddocregion dsl
})(window.app = window.app || {});
-// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
deleted file mode 100644
index 3a562d6912..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
+++ /dev/null
@@ -1,39 +0,0 @@
-(function(app) {
-
- // #docregion
- var HeroesComponent = ng.core.Component({
- selector: 'heroes-bindings',
- template: '' +
- 'Tour of Heroes' +
- '
',
- host: {
- '[title]': 'title',
- '[class.heading]': 'hClass',
- '(click)': 'clicked()',
- '(dblclick)': 'doubleClicked($event)'
- }
- }).Class({
- constructor: function() {
- this.title = 'Tooltip content';
- this.hClass = true;
- },
- clicked: function() {
- this.active = !this.active;
- },
- doubleClicked: function(evt) {
- this.active = true;
- }
- });
- // #enddocregion
-
- app.HeroesHostBindingsModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- declarations: [ HeroesComponent ],
- bootstrap: [ HeroesComponent ]
- })
- .Class({
- constructor: function() {}
- });
-
-})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
deleted file mode 100644
index f1bda77cb1..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
+++ /dev/null
@@ -1,82 +0,0 @@
-(function(app) {
-
- var ActiveLabelComponent = ng.core.Component({
- selector: 'active-label',
- template: '' +
- 'Active' +
- ''
- }).Class({
- constructor: [function() { }],
- activate: function() {
- this.active = true;
- }
- });
-
- // #docregion content
- var HeroComponent = ng.core.Component({
- selector: 'a-hero',
- template: '' +
- '{{hero.name}} ' +
- '' +
- '
',
- inputs: ['hero'],
- queries: {
- label: new ng.core.ContentChild(
- ActiveLabelComponent)
- }
- }).Class({
- constructor: [function() { }],
- activate: function() {
- this.active = true;
- this.label.activate();
- }
- });
- app.HeroQueriesComponent = HeroComponent;
- // #enddocregion content
-
- // #docregion view
- var AppComponent = ng.core.Component({
- selector: 'heroes-queries',
- template:
- '' +
- '' +
- '' +
- '',
- queries: {
- heroCmps: new ng.core.ViewChildren(
- HeroComponent)
- }
- }).Class({
- constructor: function() {
- this.heroData = [
- {id: 1, name: 'Windstorm'},
- {id: 2, name: 'Superman'}
- ];
- },
- activate: function() {
- this.heroCmps.forEach(function(cmp) {
- cmp.activate();
- });
- }
- });
- // #enddocregion view
-
- app.HeroesQueriesModule =
- ng.core.NgModule({
- imports: [ ng.platformBrowser.BrowserModule ],
- declarations: [
- AppComponent,
- HeroComponent,
- ActiveLabelComponent
- ],
- bootstrap: [ AppComponent ]
- })
- .Class({
- constructor: function() {}
- });
-
-})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js
index 9091452599..fd3e737c9e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/main.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js
@@ -1,35 +1,9 @@
-// #docplaster
-// #docregion appimport
(function(app) {
- // #enddocregion appimport
- // #docregion ng2import
- var platformBrowserDynamic =
- ng.platformBrowserDynamic.platformBrowserDynamic;
- var LocationStrategy =
- ng.common.LocationStrategy;
- var HashLocationStrategy =
- ng.common.HashLocationStrategy;
- // #enddocregion ng2import
+var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
- // #docregion appimport
- var HeroComponent = app.HeroComponent;
- // #enddocregion appimport
+document.addEventListener('DOMContentLoaded', function() {
+ platformBrowserDynamic().bootstrapModule(app.AppModule);
+});
- document.addEventListener('DOMContentLoaded', function() {
- platformBrowserDynamic().bootstrapModule(app.HeroesModule);
- platformBrowserDynamic().bootstrapModule(app.HeroesDslModule);
- platformBrowserDynamic().bootstrapModule(app.HeroesLifecycleModule);
- platformBrowserDynamic().bootstrapModule(app.HeroesDIModule);
- platformBrowserDynamic().bootstrapModule(app.HeroDIInlineModule);
- platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule);
- platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule2);
- platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectAdditionalModule);
- platformBrowserDynamic().bootstrapModule(app.HeroesIOModule);
- platformBrowserDynamic().bootstrapModule(app.HeroesHostBindingsModule);
- platformBrowserDynamic().bootstrapModule(app.HeroesQueriesModule);
- });
-
- // #docregion appimport
})(window.app = window.app || {});
-// #enddocregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
index 448c295609..7d2105bf78 100644
--- a/public/docs/_examples/cb-ts-to-js/js/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -4,64 +4,41 @@
+ TypeScript to JavaScript
+
-
+
+
+
-
-
-
-
-
+
+
+
+
+
+
-
- TypeScript to JavaScript
- Classes and Class Metadata
- Input and Output Metadata
- Dependency Injection
- Host and Query Metadata
-
-
-
- Loading hero-view...
- Loading hero-view2...
- Loading hero-lifecycle...
-
-
-
- Loading hero-io...
-
-
- Dependency Injection
- Loading hero-di...
- Loading hero-di-inline...
- Loading hero-di-inline2...
- Loading hero-di-inject...
- Loading hero-di-inject-additional...
-
-
-
- Loading heroes-bindings...
- Loading heroes-queries...
+ Loading...