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

Commit 29aad37

Browse files
teropawardbell
teropa
authored and
wardbell
committed
docs(cb-ts-to-js): add cookbook about applying TypeScript examples to ES5
1 parent 1184b57 commit 29aad37

33 files changed

+1324
-7
lines changed

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

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
describe('TypeScript to Javascript tests', function () {
2+
3+
beforeAll(function () {
4+
browser.get('');
5+
});
6+
7+
it('should display the basic component example', function () {
8+
testTag('hero-view', 'Hero: Windstorm');
9+
});
10+
11+
it('should display the component example with lifecycle methods', function () {
12+
testTag('hero-lifecycle', 'Hero: Windstorm');
13+
});
14+
15+
it('should display component with DI example', function () {
16+
testTag('hero-di', 'Hero: Windstorm');
17+
});
18+
19+
it('should display component with DI using @Inject example', function () {
20+
testTag('hero-di-inject', 'Hero: Windstorm');
21+
});
22+
23+
it('should support optional, attribute, and query injections', function () {
24+
var app = element(by.css('hero-di-inject-additional'));
25+
var h1 = app.element(by.css('h1'));
26+
var okMsg = app.element(by.css('.ok-msg'));
27+
28+
expect(h1.getText()).toBe('Tour of Heroes');
29+
app.element(by.buttonText('OK')).click();
30+
expect(okMsg.getText()).toBe('OK!');
31+
});
32+
33+
it('should support component with inputs and outputs', function () {
34+
var app = element(by.css('hero-io'));
35+
var confirmComponent = app.element(by.css('my-confirm'));
36+
37+
confirmComponent.element(by.buttonText('OK')).click();
38+
expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
39+
40+
confirmComponent.element(by.buttonText('Cancel')).click();
41+
expect(app.element(by.cssContainingText('span', 'Cancel clicked')).isPresent()).toBe(true);
42+
});
43+
44+
it('should support host bindings and host listeners', function() {
45+
var app = element(by.css('heroes-bindings'));
46+
var h1 = app.element(by.css('h1'));
47+
48+
expect(app.getAttribute('class')).toBe('heading');
49+
expect(app.getAttribute('title')).toBe('Tooltip content');
50+
51+
h1.click();
52+
expect(h1.getAttribute('class')).toBe('active');
53+
54+
h1.click();
55+
browser.actions().doubleClick(h1).perform();
56+
expect(h1.getAttribute('class')).toBe('active');
57+
});
58+
59+
it('should support content and view queries', function() {
60+
var app = element(by.css('heroes-queries'));
61+
var windstorm = app.element(by.css('hero:first-child'));
62+
63+
app.element(by.buttonText('Activate')).click();
64+
expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
65+
expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
66+
});
67+
68+
function testTag(selector, expectedText) {
69+
var component = element(by.css(selector));
70+
expect(component.getText()).toBe(expectedText);
71+
}
72+
73+
});

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
(function(app) {
2+
3+
function DataService() {
4+
}
5+
DataService.annotations = [
6+
new ng.core.Injectable()
7+
];
8+
DataService.prototype.getHeroName = function() {
9+
return 'Windstorm';
10+
};
11+
app.DataService = DataService;
12+
13+
})(window.app = window.app || {});

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
(function(app) {
2+
3+
// #docregion
4+
var TitleComponent = ng.core.Component({
5+
selector: 'hero-title',
6+
template:
7+
'<h1>{{titlePrefix}} {{title}}</h1>' +
8+
'<button (click)="ok()">OK</button>' +
9+
'<ng-content></ng-content>'
10+
}).Class({
11+
constructor: [
12+
[
13+
new ng.core.Optional(),
14+
new ng.core.Inject('titlePrefix')
15+
],
16+
new ng.core.Attribute('title'),
17+
[
18+
new ng.core.Query('okMsg'),
19+
ng.core.ElementRef
20+
],
21+
function(titlePrefix, title, msg) {
22+
this.titlePrefix = titlePrefix;
23+
this.title = title;
24+
this.msg = msg;
25+
}
26+
],
27+
ok: function() {
28+
var msgEl =
29+
this.msg.first.nativeElement;
30+
msgEl.textContent = 'OK!';
31+
}
32+
});
33+
// #enddocregion
34+
35+
var AppComponent = ng.core.Component({
36+
selector: 'hero-di-inject-additional',
37+
template: '<hero-title title="Tour of Heroes">' +
38+
'<span #okMsg class="ok-msg"></span>' +
39+
'</hero-title>',
40+
directives: [TitleComponent]
41+
}).Class({
42+
constructor: function() { }
43+
});
44+
45+
app.HeroDIInjectAdditionalComponent = AppComponent;
46+
47+
})(window.app = window.app || {});

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
(function(app) {
2+
3+
// #docregion
4+
function HeroComponent(name) {
5+
this.name = name;
6+
}
7+
HeroComponent.parameters = [
8+
'heroName'
9+
];
10+
HeroComponent.annotations = [
11+
new ng.core.Component({
12+
selector: 'hero-di-inject',
13+
template: '<h1>Hero: {{name}}</h1>'
14+
})
15+
];
16+
// #enddocregion
17+
app.HeroDIInjectComponent = HeroComponent;
18+
19+
})(window.app = window.app || {});

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
(function(app) {
2+
// #docregion
3+
var HeroComponent = ng.core.Component({
4+
selector: 'hero-di-inline',
5+
template: '<h1>Hero: {{name}}</h1>'
6+
})
7+
.Class({
8+
constructor:
9+
[app.DataService, function(service) {
10+
this.name = service.getHeroName();
11+
}]
12+
});
13+
// #enddocregion
14+
app.HeroDIInlineComponent = HeroComponent;
15+
})(window.app = window.app || {});

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
(function(app) {
2+
3+
// #docregion
4+
function HeroComponent(dataService) {
5+
this.name = dataService.getHeroName();
6+
}
7+
HeroComponent.parameters = [
8+
app.DataService
9+
];
10+
HeroComponent.annotations = [
11+
new ng.core.Component({
12+
selector: 'hero-di',
13+
template: '<h1>Hero: {{name}}</h1>'
14+
})
15+
];
16+
// #enddocregion
17+
app.HeroDIComponent = HeroComponent;
18+
19+
})(window.app = window.app || {});

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
(function(app) {
2+
3+
// #docregion component
4+
var HeroComponent = ng.core.Component({
5+
selector: 'hero-view-2',
6+
template:
7+
'<h1>Name: {{getName()}}</h1>',
8+
})
9+
.Class({
10+
constructor: function() {
11+
},
12+
getName: function() {
13+
return 'Windstorm';
14+
}
15+
});
16+
// #enddocregion component
17+
18+
app.HeroComponentDsl = HeroComponent;
19+
20+
})(window.app = window.app || {});
21+
// #enddocregion appexport

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

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(function(app) {
2+
// #docregion
3+
var ConfirmComponent = ng.core.Component({
4+
selector: 'my-confirm',
5+
inputs: [
6+
'okMsg',
7+
'notOkMsg: cancelMsg'
8+
],
9+
outputs: [
10+
'ok',
11+
'notOk: cancel'
12+
],
13+
template:
14+
'<button (click)="onOkClick()">' +
15+
'{{okMsg}}' +
16+
'</button>' +
17+
'<button (click)="onNotOkClick()">' +
18+
'{{notOkMsg}}' +
19+
'</button>'
20+
}).Class({
21+
constructor: function() {
22+
this.ok = new ng.core.EventEmitter();
23+
this.notOk = new ng.core.EventEmitter();
24+
},
25+
onOkClick: function() {
26+
this.ok.next(true);
27+
},
28+
onNotOkClick: function() {
29+
this.notOk.next(true);
30+
}
31+
});
32+
// #enddocregion
33+
34+
function AppComponent() {
35+
}
36+
AppComponent.annotations = [
37+
new ng.core.Component({
38+
selector: 'hero-io',
39+
template: '<my-confirm [okMsg]="\'OK\'"' +
40+
'[cancelMsg]="\'Cancel\'"' +
41+
'(ok)="onOk()"' +
42+
'(cancel)="onCancel()">' +
43+
'</my-confirm>' +
44+
'<span *ngIf="okClicked">OK clicked</span>' +
45+
'<span *ngIf="cancelClicked">Cancel clicked</span>',
46+
directives: [ConfirmComponent]
47+
})
48+
];
49+
AppComponent.prototype.onOk = function() {
50+
this.okClicked = true;
51+
}
52+
AppComponent.prototype.onCancel = function() {
53+
this.cancelClicked = true;
54+
}
55+
app.HeroIOComponent = AppComponent;
56+
57+
})(window.app = window.app || {});

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
(function(app) {
2+
// #docregion
3+
function HeroComponent() {
4+
}
5+
// #enddocregion
6+
HeroComponent.annotations = [
7+
new ng.core.Component({
8+
selector: 'hero-lifecycle',
9+
template: '<h1>Hero: {{name}}</h1>'
10+
})
11+
];
12+
// #docregion
13+
HeroComponent.prototype.ngOnInit =
14+
function() {
15+
this.name = 'Windstorm';
16+
};
17+
// #enddocregion
18+
19+
app.HeroLifecycleComponent = HeroComponent;
20+
21+
})(window.app = window.app || {});

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// #docregion appexport
2+
(function(app) {
3+
// #enddocregion appexport
4+
5+
// #docregion metadata
6+
// #docregion appexport
7+
// #docregion constructorproto
8+
function HeroComponent() {
9+
}
10+
// #enddocregion constructorproto
11+
// #enddocregion appexport
12+
HeroComponent.annotations = [
13+
new ng.core.Component({
14+
selector: 'hero-view',
15+
template:
16+
'<h1>Hero: {{getName()}}</h1>'
17+
})
18+
];
19+
// #docregion constructorproto
20+
HeroComponent.prototype.getName =
21+
function() {
22+
return 'Windstorm';
23+
};
24+
// #enddocregion constructorproto
25+
// #enddocregion metadata
26+
27+
// #docregion appexport
28+
app.HeroComponent = HeroComponent;
29+
30+
})(window.app = window.app || {});
31+
// #enddocregion appexport

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

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
(function(app) {
2+
3+
// #docregion
4+
var HeroesComponent = ng.core.Component({
5+
selector: 'heroes-bindings',
6+
template: '<h1 [class.active]="active">' +
7+
'Tour of Heroes' +
8+
'</h1>',
9+
host: {
10+
'[title]': 'title',
11+
'[class.heading]': 'hClass',
12+
'(click)': 'clicked()',
13+
'(dblclick)': 'doubleClicked($event)'
14+
}
15+
}).Class({
16+
constructor: function() {
17+
this.title = 'Tooltip content';
18+
this.hClass = true;
19+
},
20+
clicked() {
21+
this.active = !this.active;
22+
},
23+
doubleClicked(evt) {
24+
this.active = true;
25+
}
26+
});
27+
// #enddocregion
28+
app.HeroesHostBindingsComponent = HeroesComponent;
29+
30+
})(window.app = window.app || {});

0 commit comments

Comments
 (0)