docs(cb-ts-to-js): add cookbook about applying TypeScript examples to ES5

Author: teropa

public/docs/_examples/cb-ts-to-js/e2e-spec.js

@@ -0,0 +1,32 @@
+describe('TypeScript to Javascript tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display the basic component example', function () {
+    testTag('my-app', 'Hello World');
+  });
+
+  it('should display the component example with lifecycle methods', function () {
+    testTag('my-app-lifecycle', 'Hello World');
+  });
+
+  it('should display component with DI example', function () {
+    testTag('my-app-di', 'Hello World');
+  });
+
+  it('should display component with DI using @Inject example', function () {
+    testTag('my-app-di-inject', 'Hello World');
+  });
+
+  it('should display component with DI using @Optional example', function () {
+    testTag('my-app-di-inject-optional', 'Hello');
+  });
+
+  function testTag(selector, expectedText) {
+    var component = element(by.css(selector));
+    expect(component.getText()).toBe(expectedText);
+  }
+
+});

public/docs/_examples/cb-ts-to-js/js/app/app-di-inject-optional.component.js

@@ -0,0 +1,22 @@
+(function(app) {
+
+  // #docregion
+  function AppComponent(message) {
+    this.message = message;
+  }
+  AppComponent.parameters = [
+    [
+      new ng.core.Optional(),
+      new ng.core.Inject('message')
+    ]
+  ];
+  AppComponent.annotations = [
+    new ng.core.Component({
+      selector: 'my-app-di-inject-optional',
+      template: '<h1>Hello {{message}}</h1>'
+    })
+  ];
+  // #enddocregion
+  app.AppDIInjectOptionalComponent = AppComponent;
+
+})(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/app-di-inject.component.js

@@ -0,0 +1,19 @@
+(function(app) {
+
+  // #docregion
+  function AppComponent(message) {
+    this.message = message;
+  }
+  AppComponent.parameters = [
+    new ng.core.Inject('message')
+  ];
+  AppComponent.annotations = [
+    new ng.core.Component({
+      selector: 'my-app-di-inject',
+      template: '<h1>Hello {{message}}</h1>'
+    })
+  ];
+  // #enddocregion
+  app.AppDIInjectComponent = AppComponent;
+
+})(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/app-di-inline.component.js

@@ -0,0 +1,15 @@
+(function(app) {
+  // #docregion
+  var AppComponent = ng.core.Component({
+    selector: 'my-app-di-inline',
+    template: '<h1>Hello {{message}}</h1>'
+  })
+  .Class({
+    constructor:
+      [app.DataService, function(service) {
+        this.message = service.getMessage();
+      }]
+  });
+  // #enddocregion
+  app.AppDIInlineComponent = AppComponent;
+})(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/app-di.component.js

@@ -0,0 +1,19 @@
+(function(app) {
+
+  // #docregion
+  function AppComponent(dataService) {
+    this.message = dataService.getMessage();
+  }
+  AppComponent.parameters = [
+    app.DataService
+  ];
+  AppComponent.annotations = [
+    new ng.core.Component({
+      selector: 'my-app-di',
+      template: '<h1>Hello {{message}}</h1>'
+    })
+  ];
+  // #enddocregion
+  app.AppDIComponent = AppComponent;
+
+})(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/app-dsl.component.js

@@ -0,0 +1,21 @@
+(function(app) {
+
+  // #docregion component
+  var AppComponent = ng.core.Component({
+      selector: 'my-app-2',
+      template:
+        '<h1>Hello {{getMessage()}}</h1>',
+    })
+    .Class({
+      constructor: function() {
+      },
+      getMessage: function() {
+        return 'World';
+      }
+    });
+  // #enddocregion component
+
+  app.AppComponentDsl = AppComponent;
+
+})(window.app = window.app || {});
+// #enddocregion appexport

public/docs/_examples/cb-ts-to-js/js/app/app-lifecycle.component.js

@@ -0,0 +1,21 @@
+(function(app) {
+  // #docregion
+  function AppComponent() {
+  }
+  // #enddocregion
+  AppComponent.annotations = [
+    new ng.core.Component({
+      selector: 'my-app-lifecycle',
+      template: '<h1>Hello {{message}}</h1>'
+    })
+  ];
+  // #docregion
+  AppComponent.prototype.ngOnInit =
+    function() {
+      this.message = 'World';
+    };
+  // #enddocregion
+
+  app.AppLifecycleComponent = AppComponent;
+
+})(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/app.component.js

@@ -0,0 +1,31 @@
+// #docregion appexport
+(function(app) {
+  // #enddocregion appexport
+
+  // #docregion metadata
+  // #docregion appexport
+  // #docregion constructorproto
+  function AppComponent() {
+  }
+  // #enddocregion constructorproto
+  // #enddocregion appexport
+  AppComponent.annotations = [
+    new ng.core.Component({
+      selector: 'my-app',
+      template:
+        '<h1>Hello {{getMessage()}}</h1>'
+    })
+  ];
+  // #docregion constructorproto
+  AppComponent.prototype.getMessage =
+    function() {
+      return 'World';
+    };
+  // #enddocregion constructorproto
+  // #enddocregion metadata
+
+  // #docregion appexport
+  app.AppComponent = AppComponent;
+
+})(window.app = window.app || {});
+// #enddocregion appexport

public/docs/_examples/cb-ts-to-js/js/app/data.service.js

@@ -0,0 +1,13 @@
+(function(app) {
+
+  function DataService() {
+  }
+  DataService.annotations = [
+    new ng.core.Injectable()
+  ];
+  DataService.prototype.getMessage = function() {
+    return 'World';
+  };
+  app.DataService = DataService;
+  
+})(window.app = window.app || {});

public/docs/_examples/cb-ts-to-js/js/app/main.js

@@ -0,0 +1,34 @@
+// #docregion appimport
+(function(app) {
+  // #enddocregion appimport
+
+  // #docregion ng2import
+  var provide =
+    ng.core.provide;
+  var bootstrap =
+    ng.platform.browser.bootstrap;
+  var LocationStrategy =
+    ng.router.LocationStrategy;
+  var HashLocationStrategy =
+    ng.router.HashLocationStrategy;
+  // #enddocregion ng2import
+
+  // #docregion appimport
+  var AppComponent = app.AppComponent;
+  // #enddocregion appimport
+
+  document.addEventListener('DOMContentLoaded', function() {
+    bootstrap(AppComponent);
+    bootstrap(app.AppComponentDsl);
+    bootstrap(app.AppLifecycleComponent);
+    bootstrap(app.AppDIComponent, [app.DataService]);
+    bootstrap(app.AppDIInlineComponent, [app.DataService]);
+    bootstrap(app.AppDIInjectComponent, [
+      ng.core.provide('message', {useValue: 'World'})
+    ]);
+    bootstrap(app.AppDIInjectOptionalComponent);
+  });
+
+  // #docregion appimport
+})(window.app = window.app || {});
+// #enddocregion appimport

public/docs/_examples/cb-ts-to-js/js/example-config.json

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
+    <script src="node_modules/angular2/bundles/angular2-all.umd.dev.js"></script>
+    <script src="app/data.service.js"></script>
+    <script src="app/app.component.js"></script>
+    <script src="app/app-dsl.component.js"></script>
+    <script src="app/app-lifecycle.component.js"></script>
+    <script src="app/app-di.component.js"></script>
+    <script src="app/app-di-inline.component.js"></script>
+    <script src="app/app-di-inject.component.js"></script>
+    <script src="app/app-di-inject-optional.component.js"></script>
+    <script src="app/main.js"></script>
+  </head>
+
+  <body>
+    <my-app>Loading app...</my-app>
+    <my-app-2>Loading app...</my-app-2>
+    <my-app-lifecycle>Loading app...</my-app-lifecycle>
+    <my-app-di>Loading app...</my-app-di>
+    <my-app-di-inline>Loading app...</my-app-di-inline>
+    <my-app-di-inject>Loading app...</my-app-di-inject>
+    <my-app-di-inject-optional>Loading app...</my-app-di-inject-optional>
+  </body>
+
+</html>

public/docs/_examples/cb-ts-to-js/js/index.html

@@ -0,0 +1 @@
+**/*.js

public/docs/_examples/cb-ts-to-js/ts/.gitignore

@@ -0,0 +1,15 @@
+import {Component, Inject, Optional} from 'angular2/core';
+
+// #docregion
+@Component({
+  selector: 'my-app-di-inject-optional',
+  template: `<h1>Hello {{message}}</h1>`
+})
+export class AppComponent {
+  constructor(
+    @Inject('message')
+    @Optional()
+      private message:string) {
+  }
+}
+// #enddocregion

public/docs/_examples/cb-ts-to-js/ts/app/app-di-inject-optional.component.ts

@@ -0,0 +1,14 @@
+import {Component, Inject} from 'angular2/core';
+
+// #docregion
+@Component({
+  selector: 'my-app-di-inject',
+  template: `<h1>Hello {{message}}</h1>`
+})
+export class AppComponent {
+  constructor(
+    @Inject('message')
+      private message:string) {
+  }
+}
+// #enddocregion

public/docs/_examples/cb-ts-to-js/ts/app/app-di-inject.component.ts

@@ -0,0 +1,15 @@
+import {Component} from 'angular2/core';
+import {DataService} from './data.service';
+
+// #docregion
+@Component({
+  selector: 'my-app-di',
+  template: `<h1>Hello {{message}}</h1>`
+})
+export class AppComponent {
+  message:string;
+  constructor(dataService:DataService) {
+    this.message = dataService.getMessage();
+  }
+}
+// #enddocregion

public/docs/_examples/cb-ts-to-js/ts/app/app-di.component.ts

@@ -0,0 +1,18 @@
+// #docregion
+import {Component, OnInit}
+  from 'angular2/core';
+  // #enddocregion
+
+@Component({
+  selector: 'my-app-lifecycle',
+  template: `<h1>Hello {{message}}</h1>`
+})
+// #docregion
+export class AppComponent
+    implements OnInit {
+  message:string;
+  ngOnInit() {
+    this.message = 'World';
+  }
+}
+// #enddocregion

public/docs/_examples/cb-ts-to-js/ts/app/app-lifecycle.component.ts

@@ -0,0 +1,19 @@
+// #docregion metadata
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>Hello {{getMessage()}}</h1>
+  `
+})
+// #docregion appexport
+// #docregion class
+export class AppComponent {
+  getMessage() {
+    return 'World';
+  }
+}
+// #enddocregion class
+// #enddocregion appexport
+// #enddocregion metadata

public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts

@@ -0,0 +1,10 @@
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class DataService {
+  constructor() {
+  }
+  getMessage() {
+    return 'World';
+  }
+}