docs(cb-ts-to-js): Ward's tweaks to cookbook about applying TypeScript examples to ES5

wardbell · wardbell · commit 55d42c43efee · 2016-03-27T14:12:47.000-07:00
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
@@ -1,6 +1,6 @@
 (function(app) {
 
-  // #docregion
+// #docregion parameters
   function HeroComponent(name) {
     this.name = name;
   }
@@ -13,7 +13,27 @@
       template: '<h1>Hero: {{name}}</h1>'
     })
   ];
-  // #enddocregion
+// #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 || {});
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
@@ -6,9 +6,10 @@
   })
   .Class({
     constructor:
-      [app.DataService, function(service) {
-        this.name = service.getHeroName();
-      }]
+      [app.DataService, 
+       function(service) {
+         this.name = service.getHeroName();
+       }]
   });
   // #enddocregion
   app.HeroDIInlineComponent = HeroComponent;
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
@@ -1,6 +1,8 @@
 (function(app) {
 
   // #docregion
+  app.HeroDIComponent = HeroComponent;
+  
   function HeroComponent(dataService) {
     this.name = dataService.getHeroName();
   }
@@ -14,6 +16,5 @@
     })
   ];
   // #enddocregion
-  app.HeroDIComponent = HeroComponent;
 
 })(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
@@ -1,3 +1,5 @@
+// #docplaster
+// #docregion appexport
 (function(app) {
 
   // #docregion component
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
@@ -1,7 +1,7 @@
+// #docplaster
 (function(app) {
   // #docregion
-  function HeroComponent() {
-  }
+  function HeroComponent() {}
   // #enddocregion
   HeroComponent.annotations = [
     new ng.core.Component({
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
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion appexport
 (function(app) {
   // #enddocregion appexport
@@ -6,7 +7,9 @@
   // #docregion appexport
   // #docregion constructorproto
   function HeroComponent() {
+    this.title = "Hero Detail";
   }
+  
   // #enddocregion constructorproto
   // #enddocregion appexport
   HeroComponent.annotations = [
@@ -18,9 +21,7 @@
   ];
   // #docregion constructorproto
   HeroComponent.prototype.getName =
-    function() {
-      return 'Windstorm';
-    };
+    function() {return 'Windstorm';};
   // #enddocregion constructorproto
   // #enddocregion metadata
 
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
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion appimport
 (function(app) {
   // #enddocregion appimport
@@ -26,6 +27,9 @@
     bootstrap(app.HeroDIInjectComponent, [
       ng.core.provide('heroName', {useValue: 'Windstorm'})
     ]);
+    bootstrap(app.HeroDIInjectComponent2, [
+      ng.core.provide('heroName', {useValue: 'Bombasto'})
+    ]);
     bootstrap(app.HeroDIInjectAdditionalComponent);
     bootstrap(app.HeroIOComponent);
     bootstrap(app.HeroesHostBindingsComponent);
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -33,6 +33,7 @@
     <hero-lifecycle>Loading app...</hero-lifecycle>
     <hero-di>Loading app...</hero-di>
     <hero-di-inline>Loading app...</hero-di-inline>
+    <hero-di-inline2>Loading app...</hero-di-inline2>
     <hero-di-inject>Loading app...</hero-di-inject>
     <hero-di-inject-additional>Loading app...</hero-di-inject-additional>
     <hero-io>Loading app...</hero-io>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
@@ -26,7 +26,6 @@ export class ConfirmComponent {
   onNotOkClick() {
     this.notOk.next(true);
   }
-
 }
 // #enddocregion
 
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import {Component, OnInit}
   from 'angular2/core';
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -1,18 +1,17 @@
+// #docplaster
 // #docregion metadata
 import {Component} from 'angular2/core';
 
 @Component({
   selector: 'hero-view',
-  template: `
-    <h1>Hero: {{getName()}}</h1>
-  `
+  template: 
+    '<h1>Hero: {{getName()}}</h1>'
 })
 // #docregion appexport
 // #docregion class
 export class HeroComponent {
-  getName() {
-    return 'Windstorm';
-  }
+  title = 'Hero Detail';
+  getName() {return 'Windstorm';}
 }
 // #enddocregion class
 // #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
@@ -13,8 +13,7 @@ export class HeroesComponent {
     hClass = true
   active:boolean;
 
-  constructor() {
-  }
+  constructor() {}
 
   @HostListener('click')
   clicked() {
diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json
@@ -2,18 +2,30 @@
   "index": {
     "title": "Cookbook",
     "navTitle": "Overview",
-    "description": "A collection of recipes for common Angular application scenarios"
+    "intro": "A collection of recipes for common Angular application scenarios"
   },
   
   "a1-a2-quick-reference": {
     "title": "Angular 1 to 2 Quick Reference",
     "navTitle": "Angular 1 to 2 Quick Ref",
-    "description": "Learn how Angular 1 concepts and techniques map to Angular 2",
+    "intro": "Learn how Angular 1 concepts and techniques map to Angular 2",
     "hide": true
   },
   
   "component-communication": {
     "title": "Component Interaction",
-    "description": "Share information between different directives and components"
+    "intro": "Share information between different directives and components"
+  },
+
+  "dynamic-form": {
+    "title": "Dynamic Form",
+    "intro": "Render dynamic forms with NgFormModel",
+    "hide": true
+  },
+
+  "ts-to-js": {
+    "title": "TypeScript to JavaScript",
+    "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
+    "hide": true
   }
 }
diff --git a/public/docs/dart/latest/cookbook/dynamic-forms.jade b/public/docs/dart/latest/cookbook/dynamic-forms.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/dart/latest/cookbook/ts-to-js.jade b/public/docs/dart/latest/cookbook/ts-to-js.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json
@@ -2,23 +2,29 @@
   "index": {
     "title": "Cookbook",
     "navTitle": "Overview",
-    "description": "A collection of recipes for common Angular application scenarios"
+    "intro": "A collection of recipes for common Angular application scenarios"
   },
 
   "a1-a2-quick-reference": {
     "title": "Angular 1 to 2 Quick Reference",
     "navTitle": "Angular 1 to 2 Quick Ref",
-    "description": "Learn how Angular 1 concepts and techniques map to Angular 2"
+    "intro": "Learn how Angular 1 concepts and techniques map to Angular 2"
   },
 
   "component-communication": {
     "title": "Component Interaction",
-    "description": "Share information between different directives and components"
+    "intro": "Share information between different directives and components"
+  },
+
+  "dynamic-form": {
+    "title": "Dynamic Form",
+    "intro": "Render dynamic forms with NgFormModel",
+    "hide": true
   },
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Angular 2 TypeScript examples can be easily converted into ES5 JavaScript"
+    "intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
   }
 
 }
diff --git a/public/docs/js/latest/cookbook/dynamic-forms.jade b/public/docs/js/latest/cookbook/dynamic-forms.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+// #docplaster`
	`2`	`+// #docregion appexport`
`1`	`3`	`(function(app) {`
`2`	`4`
`3`	`5`	`// #docregion component`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,6 @@ export class ConfirmComponent {`
`26`	`26`	`onNotOkClick() {`
`27`	`27`	`this.notOk.next(true);`
`28`	`28`	`}`
`29`		`-`
`30`	`29`	`}`
`31`	`30`	`// #enddocregion`
`32`	`31`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// #docplaster`
`1`	`2`	`// #docregion`
`2`	`3`	`import {Component, OnInit}`
`3`	`4`	`from 'angular2/core';`