8000 docs(cb-ts-to-js): add cookbook about applying TypeScript examples to… · angular/angular.io@5a9922c · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 5a9922c

Browse files
teropateropa
committed
docs(cb-ts-to-js): add cookbook about applying TypeScript examples to ES5
1 parent 4452163 commit 5a9922c

27 files changed

+733
-0
lines changed

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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('my-app', 'Hello World');
9+
});
10+
11+
it('should display the component example with lifecycle methods', function () {
12+
testTag('my-app-lifecycle', 'Hello World');
13+
});
14+
15+
it('should display component with DI example', function () {
16+
testTag('my-app-di', 'Hello World');
17+
});
18+
19+
it('should display component with DI using @Inject example', function () {
20+
testTag('my-app-di-inject', 'Hello World');
21+
});
22+
23+
it('should display component with DI using @Optional example', function () {
24+
testTag('my-app-di-inject-optional', 'Hello');
25+
});
26+
27+
function testTag(selector, expectedText) {
28+
var component = element(by.css(selector));
29+
expect(component.getText()).toBe(expectedText);
30+
}
31+
32+
});

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
(function(app) {
2+
3+
// #docregion
4+
function AppComponent(message) {
5+
this.message = message;
6+
}
7+
AppComponent.parameters = [
8+
[
9+
new ng.core.Optional(),
10+
new ng.core.Inject('message')
11+
]
12+
];
13+
AppComponent.annotations = [
14+
new ng.core.Component({
15+
selector: 'my-app-di-inject-optional',
16+
template: '<h1>Hello {{message}}</h1>'
17+
})
18+
];
19+
// #enddocregion
20+
app.AppDIInjectOptionalComponent = AppComponent;
21+
22+
})(window.app = window.app || {});

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

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

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
(function(app) {
2+
// #docregion
3+
var AppComponent = ng.core.Component({
4+
selector: 'my-app-di-inline',
5+
template: '<h1>Hello {{message}}</h1>'
6+
})
7+
.Class({
8+
constructor:
9+
[app.DataService, function(service) {
10+
this.message = service.getMessage();
11+
}]
12+
});
13+
// #enddocregion
14+
app.AppDIInlineComponent = AppComponent;
15+
})(window.app = window.app || {});

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

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

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

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

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
(function(app) {
2+
// #docregion
3+
function AppComponent() {
4+
}
5+
// #enddocregion
6+
AppComponent.annotations = [
7+
new ng.core.Component({
8+
selector: 'my-app-lifecycle',
9+
template: '<h1>Hello {{message}}</h1>'
10+
})
11+
];
12+
// #docregion
13+
AppComponent.prototype.ngOnInit =
14+
function() {
15+
this.message = 'World';
16+
};
17+
// #enddocregion
18+
19+
app.AppLifecycleComponent = AppComponent;
20+
21+
})(window.app = window.app || {});

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

Lines changed: 31 additions & 0 deletions
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 AppComponent() {
9+
}
10+
// #enddocregion constructorproto
11+
// #enddocregion appexport
12+
AppComponent.annotations = [
13+
new ng.core.Component({
14+
selector: 'my-app',
15+
template:
16+
'<h1>Hello {{getMessage()}}</h1>'
17+
})
18+
];
19+
// #docregion constructorproto
20+
AppComponent.prototype.getMessage =
21+
function() {
22+
return 'World';
23+
};
24+
// #enddocregion constructorproto
25+
// #enddocregion metadata
26+
27+
// #docregion appexport
28+
app.AppComponent = AppComponent;
29+
30+
})(window.app = window.app || {});
31+
// #enddocregion appexport

‎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.getMessage = function() {
9+
return 'World';
10+
};
11+
app.DataService = DataService;
12+
13+
})(window.app = window.app || {});

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// #docregion appimport
2+
(function(app) {
3+
// #enddocregion appimport
4+
5+
// #docregion ng2import
6+
var provide =
7+
ng.core.provide;
8+
var bootstrap =
9+
ng.platform.browser.bootstrap;
10+
var LocationStrategy =
11+
ng.router.LocationStrategy;
12+
var HashLocationStrategy =
13+
ng.router.HashLocationStrategy;
14+
// #enddocregion ng2import
15+
16+
// #docregion appimport
17+
var AppComponent = app.AppComponent;
18+
// #enddocregion appimport
19+
20+
document.addEventListener('DOMContentLoaded', function() {
21+
bootstrap(AppComponent);
22+
bootstrap(app.AppComponentDsl);
23+
bootstrap(app.AppLifecycleComponent);
24+
bootstrap(app.AppDIComponent, [app.DataService]);
25+
bootstrap(app.AppDIInlineComponent, [app.DataService]);
26+
bootstrap(app.AppDIInjectComponent, [
27+
ng.core.provide('message', {useValue: 'World'})
28+
]);
29+
bootstrap(app.AppDIInjectOptionalComponent);
30+
});
31+
32+
// #docregion appimport
33+
})(window.app = window.app || {});
34+
// #enddocregion appimport

0 commit comments

Comments
 (0)
0