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

closes #893

Author: teropa

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

@@ -0,0 +1,73 @@
+describe('TypeScript to Javascript tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display the basic component example', function () {
+    testTag('hero-view', 'Hero: Windstorm');
+  });
+
+  it('should display the component example with lifecycle methods', function () {
+    testTag('hero-lifecycle', 'Hero: Windstorm');
+  });
+
+  it('should display component with DI example', function () {
+    testTag('hero-di', 'Hero: Windstorm');
+  });
+
+  it('should display component with DI using @Inject example', function () {
+    testTag('hero-di-inject', 'Hero: Windstorm');
+  });
+
+  it('should support optional, attribute, and query injections', function () {
+    var app = element(by.css('hero-di-inject-additional'));
+    var h1 = app.element(by.css('h1'));
+    var okMsg = app.element(by.css('.ok-msg'));
+
+    expect(h1.getText()).toBe('Tour of Heroes');
+    app.element(by.buttonText('OK')).click();
+    expect(okMsg.getText()).toBe('OK!');
+  });
+
+  it('should support component with inputs and outputs', function () {
+    var app = element(by.css('hero-io'));
+    var confirmComponent = app.element(by.css('my-confirm'));
+
+    confirmComponent.element(by.buttonText('OK')).click();
+    expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
+
+    confirmComponent.element(by.buttonText('Cancel')).click();
+    expect(app.element(by.cssContainingText('span', 'Cancel clicked')).isPresent()).toBe(true);
+  });
+
+  it('should support host bindings and host listeners', function() {
+    var app = element(by.css('heroes-bindings'));
+    var h1 = app.element(by.css('h1'));
+
+    expect(app.getAttribute('class')).toBe('heading');
+    expect(app.getAttribute('title')).toBe('Tooltip content');
+
+    h1.click();
+    expect(h1.getAttribute('class')).toBe('active');
+
+    h1.click();
+    browser.actions().doubleClick(h1).perform();
+    expect(h1.getAttribute('class')).toBe('active');
+  });
+
+  it('should support content and view queries', function() {
+    var app = element(by.css('heroes-queries'));
+    var windstorm = app.element(by.css('hero:first-child'));
+
+    app.element(by.buttonText('Activate')).click();
+    expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
+    expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
+  });
+
+  function testTag(selector, expectedText) {
+    var component = element(by.css(selector));
+    expect(component.getText()).toBe(expectedText);
+  }
+
+});

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.getHeroName = function() {
+    return 'Windstorm';
+  };
+  app.DataService = DataService;
+
+})(window.app = window.app || {});

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

@@ -0,0 +1,47 @@
+(function(app) {
+
+  // #docregion
+  var TitleComponent = ng.core.Component({
+    selector: 'hero-title',
+    template:
+      '<h1>{{titlePrefix}} {{title}}</h1>' +
+      '<button (click)="ok()">OK</button>' +
+      '<ng-content></ng-content>'
+  }).Class({
+    constructor: [
+      [
+        new ng.core.Optional(),
+        new ng.core.Inject('titlePrefix')
+      ],
+      new ng.core.Attribute('title'),
+      [
+        new ng.core.Query('okMsg'),
+        ng.core.ElementRef
+      ],
+      function(titlePrefix, title, msg) {
+        this.titlePrefix = titlePrefix;
+        this.title  = title;
+        this.msg = msg;
+      }
+    ],
+    ok: function() {
+      var msgEl =
+        this.msg.first.nativeElement;
+      msgEl.textContent = 'OK!';
+    }
+  });
+  // #enddocregion
+
+  var AppComponent = ng.core.Component({
+    selector: 'hero-di-inject-additional',
+    template: '<hero-title title="Tour of Heroes">' +
+      '<span #okMsg class="ok-msg"></span>' +
+    '</hero-title>',
+    directives: [TitleComponent]
+  }).Class({
+    constructor: function() { }
+  });
+
+  app.HeroDIInjectAdditionalComponent = AppComponent;
+
+})(window.app = window.app || {});

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

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

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

@@ -0,0 +1,16 @@
+(function(app) {
+  // #docregion
+  var HeroComponent = ng.core.Component({
+    selector: 'hero-di-inline',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor:
+      [app.DataService, 
+       function(service) {
+         this.name = service.getHeroName();
+       }]
+  });
+  // #enddocregion
+  app.HeroDIInlineComponent = HeroComponent;
+})(window.app = window.app || {});

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

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

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

@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion appexport
+(function(app) {
+
+  // #docregion component
+  var HeroComponent = ng.core.Component({
+      selector: 'hero-view-2',
+      template:
+        '<h1>Name: {{getName()}}</h1>',
+    })
+    .Class({
+      constructor: function() {
+      },
+      getName: function() {
+        return 'Windstorm';
+      }
+    });
+  // #enddocregion component
+
+  app.HeroComponentDsl = HeroComponent;
+
+})(window.app = window.app || {});
+// #enddocregion appexport

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

@@ -0,0 +1,57 @@
+(function(app) {
+  // #docregion
+  var ConfirmComponent = ng.core.Component({
+    selector: 'my-confirm',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ],
+    template:
+      '<button (click)="onOkClick()">' +
+        '{{okMsg}}' +
+      '</button>' +
+      '<button (click)="onNotOkClick()">' +
+        '{{notOkMsg}}' +
+      '</button>'
+  }).Class({
+    constructor: function() {
+      this.ok = new ng.core.EventEmitter();
+      this.notOk = new ng.core.EventEmitter();
+    },
+    onOkClick: function() {
+      this.ok.next(true);
+    },
+    onNotOkClick: function() {
+      this.notOk.next(true);
+    }
+  });
+  // #enddocregion
+
+  function AppComponent() {
+  }
+  AppComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-io',
+      template: '<my-confirm [okMsg]="\'OK\'"' +
+        '[cancelMsg]="\'Cancel\'"' +
+        '(ok)="onOk()"' +
+        '(cancel)="onCancel()">' +
+        '</my-confirm>' +
+        '<span *ngIf="okClicked">OK clicked</span>' +
+        '<span *ngIf="cancelClicked">Cancel clicked</span>',
+      directives: [ConfirmComponent]
+    })
+  ];
+  AppComponent.prototype.onOk = function() {
+    this.okClicked = true;
+  }
+  AppComponent.prototype.onCancel = function() {
+    this.cancelClicked = true;
+  }
+  app.HeroIOComponent = AppComponent;
+
+})(window.app = window.app || {});

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

@@ -0,0 +1,21 @@
+// #docplaster
+(function(app) {
+  // #docregion
+  function HeroComponent() {}
+  // #enddocregion
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-lifecycle',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+  // #docregion
+  HeroComponent.prototype.ngOnInit =
+    function() {
+      this.name = 'Windstorm';
+    };
+  // #enddocregion
+
+  app.HeroLifecycleComponent = HeroComponent;
+
+})(window.app = window.app || {});

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

@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion appexport
+(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:
+        '<h1>Hero: {{getName()}}</h1>'
+    })
+  ];
+  // #docregion constructorproto
+  HeroComponent.prototype.getName =
+    function() {return 'Windstorm';};
+  // #enddocregion constructorproto
+  // #enddocregion metadata
+
+  // #docregion appexport
+  app.HeroComponent = HeroComponent;
+
+})(window.app = window.app || {});
+// #enddocregion appexport

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

@@ -0,0 +1,30 @@
+(function(app) {
+
+  // #docregion
+  var HeroesComponent = ng.core.Component({
+    selector: 'heroes-bindings',
+    template: '<h1 [class.active]="active">' +
+      'Tour of Heroes' +
+    '</h1>',
+    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.HeroesHostBindingsComponent = HeroesComponent;
+
+})(window.app = window.app || {});