docs(aio): rename cb- files and a few others

aio/content/examples/ts-to-js/js/example-config.json

@@ -0,0 +1,3 @@
+{
+  "build": "build:babel"
+}

aio/content/examples/ts-to-js/js/plnkr.json

@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "basePath": "src/",
+  "files":[
+    "!**/karma*.*"
+  ],
+  "tags":["cookbook"]
+}

aio/content/examples/ts-to-js/js/src/app/app.component.html

@@ -0,0 +1,47 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#interfaces">Interfaces</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<h4 id="class-metadata-dsl">Classes and Class Metadata (DSL)</h4>
+<hero-view-dsl></hero-view-dsl>
+
+<hr>
+<h4 id="interfaces">Interfaces</h4>
+<hero-lifecycle></hero-lifecycle>
+<h4 id="interfaces-dsl">Interfaces (DSL)</h4>
+<hero-lifecycle-dsl></hero-lifecycle-dsl>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+<h4 id="io-metadata-dsl">Input and Output Metadata (DSL)</h4>
+<hero-io-dsl></hero-io-dsl>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<h4 id="dependency-injection-dsl">Dependency Injection (DSL)</h4>
+<hero-di-dsl></hero-di-dsl>
+<hero-di-inject-dsl></hero-di-inject-dsl>
+<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<h4 id="host-metadata-dsl">Host Metadata (DSL)</h4>
+<hero-host-dsl></hero-host-dsl>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata (DSL)</h4>
+<hero-queries></hero-queries>

aio/content/examples/ts-to-js/js/src/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 || {});

aio/content/examples/ts-to-js/js/src/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
+})

aio/content/examples/ts-to-js/js/src/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

aio/content/examples/ts-to-js/js/src/app/confirm.component.js

@@ -0,0 +1,75 @@
+(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) {
+
+  var old = app.ConfirmComponent;
+
+  // #docregion dsl
+  app.ConfirmComponent = ng.core.Component({
+    selector: 'app-confirm-dsl',
+    templateUrl: 'app/confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+  .Class({
+    constructor: function ConfirmComponent() {
+      this.ok    = new ng.core.EventEmitter();
+      this.notOk = new ng.core.EventEmitter();
+    },
+
+    onOkClick: function() {
+      this.ok.emit(true);
+    },
+
+    onNotOkClick: function() {
+      this.notOk.emit(true);
+    }
+  });
+  // #enddocregion dsl
+
+  app.ConfirmDslComponent = app.ConfirmComponent;
+  app.ConfirmComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/data.service.js

@@ -0,0 +1,10 @@
+(function(app) {
+
+  app.DataService = DataService;
+  function DataService() { }
+
+  DataService.prototype.getHeroName = function() {
+    return 'Windstorm';
+  };
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js

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

aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js

@@ -0,0 +1,51 @@
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di-inject',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+
+  HeroComponent.parameters = [ 'heroName' ];
+
+  function HeroComponent(name) {
+    this.name = name;
+  }
+  // #enddocregion
+
+  app.HeroDIInjectComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-di-inject-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: [
+      new ng.core.Inject('heroName'),
+      function HeroComponent(name) {
+        this.name = name;
+      }
+    ]
+  });
+  // #enddocregion dsl
+
+  app.HeroDIInjectDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-di.component.js

@@ -0,0 +1,51 @@
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+
+  HeroComponent.parameters = [ app.DataService ];
+
+  function HeroComponent(dataService) {
+    this.name = dataService.getHeroName();
+  }
+  // #enddocregion
+
+  app.HeroDIComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+////// DSL Version /////
+
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-di-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: [
+      app.DataService,
+      function HeroComponent(service) {
+        this.name = service.getHeroName();
+      }
+    ]
+  });
+  // #enddocregion dsl
+
+  app.HeroDIDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-host.component.js

@@ -0,0 +1,107 @@
+(function(app) {
+
+  var old = app.HeroComponent
+
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-host',
+      template:
+        '<h1 [class.active]="active">Hero Host</h1>' +
+        '<div>Heading clicks: {{clicks}}</div>',
+      host: {
+        // HostBindings to the <hero-host> element
+        '[title]': 'title',
+        '[class.heading]': 'headingClass',
+        '(click)': 'clicked()',
+
+        // HostListeners on the entire <hero-host> element
+        '(mouseenter)': 'enter($event)',
+        '(mouseleave)': 'leave($event)'
+      },
+      // Styles within (but excluding) the <hero-host> element
+      styles: ['.active {background-color: yellow;}']
+    })
+  ];
+
+  function HeroComponent() {
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip content';
+  }
+
+  HeroComponent.prototype.clicked = function() {
+    this.clicks += 1;
+  }
+
+  HeroComponent.prototype.enter = function(event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  HeroComponent.prototype.leave = function(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+  // #enddocregion
+
+  app.HeroHostComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+//// DSL Version ////
+
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-host-dsl',
+    template: `
+      <h1 [class.active]="active">Hero Host (DSL)</h1>
+      <div>Heading clicks: {{clicks}}</div>
+    `,
+    host: {
+      // HostBindings to the <hero-host-dsl> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host-dsl> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host-dsl> element
+    styles: ['.active {background-color: coral;}']
+  })
+  .Class({
+    constructor: function HeroComponent() {
+      this.clicks = 0;
+      this.headingClass = true;
+      this.title = 'Hero Host Tooltip DSL content';
+    },
+
+    clicked() {
+      this.clicks += 1;
+    },
+
+    enter(event) {
+      this.active = true;
+      this.headingClass = false;
+    },
+
+    leave(event) {
+      this.active = false;
+      this.headingClass = true;
+    }
+  });
+  // #enddocregion dsl
+
+  app.HeroHostDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html

@@ -0,0 +1,7 @@
+<app-confirm-dsl [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+</app-confirm-dsl>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>

aio/content/examples/ts-to-js/js/src/app/hero-io.component.html

@@ -0,0 +1,7 @@
+<app-confirm [okMsg]="'OK'"
+             [cancelMsg]="'Cancel'"
+             (ok)="onOk()"
+             (cancel)="onCancel()">
+</app-confirm>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>

aio/content/examples/ts-to-js/js/src/app/hero-io.component.js

@@ -0,0 +1,52 @@
+(function(app) {
+
+  var old = app.HeroComponent
+
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-io',
+      templateUrl: 'app/hero-io.component.html'
+    })
+  ];
+
+  function HeroComponent() { }
+
+  HeroComponent.prototype.onOk = function() {
+    this.okClicked = true;
+  }
+
+  HeroComponent.prototype.onCancel = function() {
+    this.cancelClicked = true;
+  }
+
+  app.HeroIOComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+///// DSL Version ////
+
+(function(app) {
+
+  var old = app.HeroComponent
+
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-io-dsl',
+    templateUrl: 'app/hero-io-dsl.component.html'
+  })
+  .Class({
+    constructor: function HeroComponent() { },
+    onOk: function() {
+      this.okClicked = true;
+    },
+    onCancel: function() {
+      this.cancelClicked = true;
+    }
+  });
+
+  app.HeroIODslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js

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

aio/content/examples/ts-to-js/js/src/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:
+      '<span class="content-child" *ngIf="active">' +
+        'Active' +
+      '</span>'
+  }).Class({
+    constructor: function ContentChildComponent() {
+      this.active = false;
+    },
+
+    activate: function() {
+      this.active = !this.active;
+    }
+  });
+
+  ////////////////////
+
+  // #docregion content
+  app.heroQueries.ViewChildComponent = ng.core.Component({
+    selector: 'view-child',
+    template:
+      '<h2 [class.active]=active>' +
+        '{{hero.name}} ' +
+        '<ng-content></ng-content>' +
+      '</h2>',
+    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+    inputs: ['hero'],
+    queries: {
+      content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+    }
+  })
+  .Class({
+    constructor: function HeroQueriesHeroComponent() {
+      this.active = false;
+    },
+
+    activate: function() {
+      this.active = !this.active;
+      this.content.activate();
+    }
+  });
+  // #enddocregion content
+
+  ////////////////////
+
+  // #docregion view
+  app.heroQueries.HeroQueriesComponent = ng.core.Component({
+    selector: 'hero-queries',
+    template:
+      '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
+        '<content-child></content-child>' +
+      '</view-child>' +
+      '<button (click)="activate()">{{buttonLabel}} All</button>',
+    queries: {
+      views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
+    }
+  })
+  .Class({
+    constructor: function HeroQueriesComponent() {
+      this.active = false;
+      this.heroData = [
+        {id: 1, name: 'Windstorm'},
+        {id: 2, name: 'LaughingGas'}
+      ];
+    },
+
+    activate: function() {
+      this.active = !this.active;
+      this.views.forEach(function(view) {
+        view.activate();
+      });
+    },
+  });
+
+  // #docregion defined-property
+  // add prototype property w/ getter outside the DSL
+  var proto = app.heroQueries.HeroQueriesComponent.prototype;
+  Object.defineProperty(proto, "buttonLabel", {
+      get: function () {
+          return this.active ? 'Deactivate' : 'Activate';
+      },
+      enumerable: true
+  });
+  // #enddocregion defined-property
+  // #enddocregion view
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-title.component.html

@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>

aio/content/examples/ts-to-js/js/src/app/hero-title.component.js

@@ -0,0 +1,64 @@
+(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) {
+
+  var old = app.HeroTitleComponent;
+
+  // #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 || {});

aio/content/examples/ts-to-js/js/src/app/hero.component.js

@@ -0,0 +1,53 @@
+// #docplaster
+(function(app) {
+
+// #docregion
+// #docregion appexport
+// #docregion metadata
+app.HeroComponent = HeroComponent; // "export"
+
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-view',
+    template: '<h1>{{title}}: {{getName()}}</h1>'
+  })
+];
+
+// #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) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-view-dsl',
+    template: '<h1>{{title}}: {{getName()}}</h1>',
+  })
+  .Class({
+    constructor: function HeroComponent() {
+      this.title = "Hero Detail";
+    },
+
+    getName: function() { return 'Windstorm'; }
+  });
+  // #enddocregion dsl
+
+  app.HeroDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
+
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+
+    <!-- Angular and RxJS umd scripts -->
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
+    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
+    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
+
+    <!-- Application scripts -->
+    <script src="app/app.component.js"></script>
+    <script src="app/confirm.component.js"></script>
+    <script src="app/data.service.js"></script>
+    <script src="app/hero.component.js"></script>
+    <script src="app/hero-io.component.js"></script>
+    <script src="app/hero-di.component.js"></script>
+    <script src="app/hero-di-inject.component.js"></script>
+    <script src="app/hero-di-inject-additional.component.js"></script>
+    <script src="app/hero-host.component.js"></script>
+    <script src="app/hero-lifecycle.component.js"></script>
+    <script src="app/hero-queries.component.js"></script>
+    <script src="app/hero-title.component.js"></script>
+
+    <script src="app/app.module.js"></script>
+    <script src="main.js"></script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>

aio/content/examples/ts-to-js/js/src/main.js

@@ -0,0 +1,9 @@
+(function(app) {
+
+var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+
+document.addEventListener('DOMContentLoaded', function() {
+  platformBrowserDynamic().bootstrapModule(app.AppModule);
+});
+
+})(window.app = window.app || {});