Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 0baa323

Browse files
wardbellwardbell
committed
docs(cb-ts-to-js): Ward's tweaks to cookbook about applying TypeScript examples to ES5
1 parent 29aad37 commit 0baa323

26 files changed

+332
-190
lines changed

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

+22-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
(function(app) {
22

3-
// #docregion
3+
// #docregion parameters
44
function HeroComponent(name) {
55
this.name = name;
66
}
@@ -13,7 +13,27 @@
1313
template: '<h1>Hero: {{name}}</h1>'
1414
})
1515
];
16-
// #enddocregion
16+
// #enddocregion parameters
17+
1718
app.HeroDIInjectComponent = HeroComponent;
19+
20+
})(window.app = window.app || {});
21+
22+
(function(app) {
23+
// #docregion ctor
24+
var HeroComponent = ng.core.Component({
25+
selector: 'hero-di-inline2',
26+
template: '<h1>Hero: {{name}}</h1>'
27+
})
28+
.Class({
29+
constructor:
30+
[new ng.core.Inject('heroName'),
31+
function(name) {
32+
this.name = name;
33+
}]
34+
});
35+
// #enddocregion ctor
36+
37+
app.HeroDIInjectComponent2 = HeroComponent;
1838

1939
})(window.app = window.app || {});

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
})
77
.Class({
88
constructor:
9-
[app.DataService, function(service) {
10-
this.name = service.getHeroName();
11-
}]
9+
[app.DataService,
10+
function(service) {
11+
this.name = service.getHeroName();
12+
}]
1213
});
1314
// #enddocregion
1415
app.HeroDIInlineComponent = HeroComponent;

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
(function(app) {
22

33
// #docregion
4+
app.HeroDIComponent = HeroComponent;
5+
46
function HeroComponent(dataService) {
57
this.name = dataService.getHeroName();
68
}
@@ -14,6 +16,5 @@
1416
})
1517
];
1618
// #enddocregion
17-
app.HeroDIComponent = HeroComponent;
1819

1920
})(window.app = window.app || {});

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// #docplaster
2+
// #docregion appexport
13
(function(app) {
24

35
// #docregion component

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
// #docplaster
12
(function(app) {
23
// #docregion
3-
function HeroComponent() {
4-
}
4+
function HeroComponent() {}
55
// #enddocregion
66
HeroComponent.annotations = [
77
new ng.core.Component({

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// #docplaster
12
// #docregion appexport
23
(function(app) {
34
// #enddocregion appexport
@@ -6,7 +7,9 @@
67
// #docregion appexport
78
// #docregion constructorproto
89
function HeroComponent() {
10+
this.title = "Hero Detail";
911
}
12+
1013
// #enddocregion constructorproto
1114
// #enddocregion appexport
1215
HeroComponent.annotations = [
@@ -18,9 +21,7 @@
1821
];
1922
// #docregion constructorproto
2023
HeroComponent.prototype.getName =
21-
function() {
22-
return 'Windstorm';
23-
};
24+
function() {return 'Windstorm';};
2425
// #enddocregion constructorproto
2526
// #enddocregion metadata
2627

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
this.title = 'Tooltip content';
1818
this.hClass = true;
1919
},
20-
clicked() {
20+
clicked: function() {
2121
this.active = !this.active;
2222
},
23-
doubleClicked(evt) {
23+
doubleClicked: function(evt) {
2424
this.active = true;
2525
}
2626
});

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
'Active' +
88
'</span>'
99
}).Class({
10-
constructor: function() { },
10+
constructor: function() { },
1111
activate: function() {
1212
this.active = true;
1313
}
1414
});
15-
15+
1616
// #docregion content
1717
var HeroComponent = ng.core.Component({
1818
selector: 'hero',

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

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// #docplaster
12
// #docregion appimport
23
(function(app) {
34
// #enddocregion appimport
@@ -26,6 +27,9 @@
2627
bootstrap(app.HeroDIInjectComponent, [
2728
ng.core.provide('heroName', {useValue: 'Windstorm'})
2829
]);
30+
bootstrap(app.HeroDIInjectComponent2, [
31+
ng.core.provide('heroName', {useValue: 'Bombasto'})
32+
]);
2933
bootstrap(app.HeroDIInjectAdditionalComponent);
3034
bootstrap(app.HeroIOComponent);
3135
bootstrap(app.HeroesHostBindingsComponent);

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

+30-11
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,46 @@
1717
<script src="app/hero.component.js"></script>
1818
<script src="app/hero-dsl.component.js"></script>
1919
<script src="app/hero-lifecycle.component.js"></script>
20+
<script src="app/hero-io.component.js"></script>
2021
<script src="app/hero-di.component.js"></script>
2122
<script src="app/hero-di-inline.component.js"></script>
2223
<script src="app/hero-di-inject.component.js"></script>
2324
<script src="app/hero-di-inject-additional.component.js"></script>
24-
<script src="app/hero-io.component.js"></script>
2525
<script src="app/heroes-bindings.component.js"></script>
2626
<script src="app/heroes-queries.component.js"></script>
2727
<script src="app/main.js"></script>
2828
</head>
2929

3030
<body>
31-
<hero-view>Loading app...</hero-view>
32-
<hero-view-2>Loading app...</hero-view-2>
33-
<hero-lifecycle>Loading app...</hero-lifecycle>
34-
<hero-di>Loading app...</hero-di>
35-
<hero-di-inline>Loading app...</hero-di-inline>
36-
<hero-di-inject>Loading app...</hero-di-inject>
37-
<hero-di-inject-additional>Loading app...</hero-di-inject-additional>
38-
<hero-io>Loading app...</hero-io>
39-
<heroes-bindings>Loading app...</heroes-bindings>
40-
<heroes-queries>Loading app...</heroes-queries>
31+
<a id="toc"></a>
32+
<h1>TypeScript to JavaScript</h1>
33+
<a href="#class-metadata">Classes and Class Metadata</a><br>
34+
<a href="#property-metadata">Input and Output Metadata</a><br>
35+
<a href="#dependency-injection">Dependency Injection</a><br>
36+
<a href="#other-property-metadata">Host and Query Metadata</a><br>
37+
38+
<hr>
39+
<h4 id="class-metadata">Classes and Class Metadata</h4>
40+
<hero-view>Loading hero-view...</hero-view>
41+
<hero-view-2>Loading hero-view2...</hero-view-2>
42+
<hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
43+
44+
<hr>
45+
<h4 id="property-metadata">Input and Output Metadata</h4>
46+
<hero-io>Loading hero-io...</hero-io>
47+
48+
<hr>
49+
<h4 id="dependency-injection">Dependency Injection</h4>
50+
<hero-di>Loading hero-di...</hero-di>
51+
<hero-di-inline>Loading hero-di-inline...</hero-di-inline>
52+
<hero-di-inline2>Loading hero-di-inline2...</hero-di-inline2>
53+
<hero-di-inject>Loading hero-di-inject...</hero-di-inject>
54+
<hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
55+
56+
<hr>
57+
<h4 id="other-property-metadata">Host and Query Metadata</h4>
58+
<heroes-bindings>Loading heroes-bindings...</heroes-bindings>
59+
<heroes-queries>Loading heroes-queries...</heroes-queries>
4160
</body>
4261

4362
</html>

‎public/docs/_examples/cb-ts-to-js/js/plnkr.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"description": "TypeScript to JavaScript",
3+
"files":[
4+
"!**/karma*.*"
5+
],
6+
"tags":["cookbook"]
7+
}

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

-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export class ConfirmComponent {
2626
onNotOkClick() {
2727
this.notOk.next(true);
2828
}
29-
3029
}
3130
// #enddocregion
3231

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// #docplaster
12
// #docregion
23
import {Component, OnInit}
34
from 'angular2/core';

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

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1+
// #docplaster
12
// #docregion metadata
23
import {Component} from 'angular2/core';
34

45
@Component({
56
selector: 'hero-view',
6-
template: `
7-
<h1>Hero: {{getName()}}</h1>
8-
`
7+
template:
8+
'<h1>Hero: {{getName()}}</h1>'
99
})
1010
// #docregion appexport
1111
// #docregion class
1212
export class HeroComponent {
13-
getName() {
14-
return 'Windstorm';
15-
}
13+
title = 'Hero Detail';
14+
getName() {return 'Windstorm';}
1615
}
1716
// #enddocregion class
1817
// #enddocregion appexport

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ export class HeroesComponent {
1313
hClass = true
1414
active:boolean;
1515

16-
constructor() {
17-
}
16+
constructor() {}
1817

1918
@HostListener('click')
2019
clicked() {

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

+26-8
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,32 @@
3030
</head>
3131

3232
<body>
33-
<hero-view>Loading app...</hero-view>
34-
<hero-lifecycle>Loading app...</hero-lifecycle>
35-
<hero-di>Loading app...</hero-di>
36-
<hero-di-inject>Loading app...</hero-di-inject>
37-
<hero-di-inject-additional>Loading app...</hero-di-inject-additional>
38-
<hero-io>Loading app...</hero-io>
39-
<heroes-bindings>Loading app...</heroes-bindings>
40-
<heroes-queries>Loading app...</heroes-queries>
33+
<a id="toc"></a>
34+
<h1>TypeScript to JavaScript</h1>
35+
<a href="#class-metadata">Classes and Class Metadata</a><br>
36+
<a href="#property-metadata">Input and Output Metadata</a><br>
37+
<a href="#dependency-injection">Dependency Injection</a><br>
38+
<a href="#other-property-metadata">Host and Query Metadata</a><br>
39+
40+
<hr>
41+
<h4 id="class-metadata">Classes and Class Metadata</h4>
42+
<hero-view id="class-metadata">Loading hero-view...</hero-view>
43+
<hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
44+
45+
<hr>
46+
<h4 id="property-metadata">Input and Output Metadata</h4>
47+
<hero-io>Loading hero-io...</hero-io>
48+
49+
<hr>
50+
<h4 id="dependency-injection">Dependency Injection</h4>
51+
<hero-di>Loading hero-di...</hero-di>
52+
<hero-di-inject>Loading hero-di-inject...</hero-di-inject>
53+
<hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
54+
55+
<hr>
56+
<h4 id="other-property-metadata">Host and Query Metadata</h4>
57+
<heroes-bindings>Loading heroes-bindings...</heroes-bindings>
58+
<heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
4159
</body>
4260

4361
</html>

‎public/docs/_examples/cb-ts-to-js/ts/plnkr.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"description": "TypeScript to JavaScript",
3+
"files":[
4+
"!**/*.d.ts",
5+
"!**/*.js"
6+
],
7+
"tags":["cookbook"]
8+
}

‎public/docs/dart/latest/cookbook/_data.json

+15-3
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,30 @@
22
"index": {
33
"title": "Cookbook",
44
"navTitle": "Overview",
5-
"description": "A collection of recipes for common Angular application scenarios"
5+
"intro": "A collection of recipes for common Angular application scenarios"
66
},
77

88
"a1-a2-quick-reference": {
99
"title": "Angular 1 to 2 Quick Reference",
1010
"navTitle": "Angular 1 to 2 Quick Ref",
11-
"description": "Learn how Angular 1 concepts and techniques map to Angular 2",
11+
"intro": "Learn how Angular 1 concepts and techniques map to Angular 2",
1212
"hide": true
1313
},
1414

1515
"component-communication": {
1616
"title": "Component Interaction",
17-
"description": "Share information between different directives and components"
17+
"intro": "Share information between different directives and components"
18+
},
19+
20+
"dynamic-form": {
21+
"title": "Dynamic Form",
22+
"intro": "Render dynamic forms with NgFormModel",
23+
"hide": true
24+
},
25+
26+
"ts-to-js": {
27+
"title": "TypeScript to JavaScript",
28+
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
29+
"hide": true
1830
}
1931
}

‎public/docs/dart/latest/cookbook/dynamic-forms.jade

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

‎public/docs/dart/latest/cookbook/ts-to-js.jade

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

‎public/docs/js/latest/cookbook/_data.json

+10-4
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,29 @@
22
"index": {
33
"title": "Cookbook",
44
"navTitle": "Overview",
5-
"description": "A collection of recipes for common Angular application scenarios"
5+
"intro": "A collection of recipes for common Angular application scenarios"
66
},
77

88
"a1-a2-quick-reference": {
99
"title": "Angular 1 to 2 Quick Reference",
1010
"navTitle": "Angular 1 to 2 Quick Ref",
11-
"description": "Learn how Angular 1 concepts and techniques map to Angular 2"
11+
"intro": "Learn how Angular 1 concepts and techniques map to Angular 2"
1212
},
1313

1414
"component-communication": {
1515
"title": "Component Interaction",
16-
"description": "Share information between different directives and components"
16+
"intro": "Share information between different directives and components"
17+
},
18+
19+
"dynamic-form": {
20+
"title": "Dynamic Form",
21+
"intro": "Render dynamic forms with NgFormModel",
22+
"hide": true
1723
},
1824

1925
"ts-to-js": {
2026
"title": "TypeScript to JavaScript",
21-
"intro": "Angular 2 TypeScript examples can be easily converted into ES5 JavaScript"
27+
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
2228
}
2329

2430
}

‎public/docs/js/latest/cookbook/dynamic-forms.jade

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

0 commit comments

Comments
 (0)