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

Commit 7f11a6c

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

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1475
-16
lines changed

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

Lines changed: 73 additions & 0 deletions
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‎

Lines changed: 13 additions & 0 deletions
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‎

Lines changed: 47 additions & 0 deletions
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‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
(function(app) {
2+
3+
// #docregion parameters
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 parameters
17+
18+
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;
38+
39+
})(window.app = window.app || {});

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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,
10+
function(service) {
11+
this.name = service.getHeroName();
12+
}]
13+
});
14+
// #enddocregion
15+
app.HeroDIInlineComponent = HeroComponent;
16+
})(window.app = window.app || {});

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

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

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

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

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

Lines changed: 57 additions & 0 deletions
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‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// #docplaster
2+
(function(app) {
3+
// #docregion
4+
function HeroComponent() {}
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‎

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

0 commit comments

Comments
 (0)