cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(examples): adds hello-world app.

Browse Source 
The app is writen in ES6 and transpiles to ES5 and dart as part of the
usual build.

The app contains a component, a directive and a services wired together
through dependency injection.

Before Each:
- gulp build

For es5:
- gulp serve
- open 'localhost:8000/js/examples/lib/hello_world/'

For dart:
- gulp examples/pub.serve
- open 'localhost:8080'
This commit is contained in:
Rado Kirov
2014-11-07 14:30:04 -08:00
parent 1221857d17
commit d6193e9073
11 changed files with 103 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
modules/examples/src/hello_world/app.js Normal file
View File

@ -0,0 +1,34 @@
import {bootstrap, Component, Decorator, TemplateConfig, NgElement} from 'core/core';
@Component({
selector: 'hello-app',
componentServices: [GreetingService],
template: new TemplateConfig({
inline: `{{greeting}} <span red>world</foo>!`,
directives: [RedDec]
})
})
class HelloCmp {
constructor(service: GreetingService) {
this.greeting = service.greeting;
}
}
@Decorator({
selector: '[red]'
})
class RedDec {
constructor(el: NgElement) {
el.domElement.style.color = 'red';
}
}
class GreetingService {
constructor() {
this.greeting = 'hello';
}
}
export function main() {
bootstrap(HelloCmp);
}

23
modules/examples/src/hello_world/index.html Normal file
View File

@ -0,0 +1,23 @@
<!doctype html>
<html>
<title>Hello Angular 2.0 (JS)</title>
<body>
<hello-app>
Loading...
</hello-app>
<script src="../../../traceur-runtime.js"></script>
<script src="../../../rtts_assert/lib/rtts_assert.js"></script>
<script src="../../../es6-module-loader-sans-promises.src.js"></script>
<script src="../../../system.src.js"></script>
<script src="../../../extension-register.js"></script>
<script src="main.js"></script>
</body>
</html>
<!-- to run do:
1) gulp build
2) gulp serve
3) open localhost:8000/js/examples/lib/hello_world/ in chrome.
TODO(rado): merge with Darts's index.html in ../../web/
-->

14
modules/examples/src/todo/main.es5 → modules/examples/src/hello_world/main.es5
View File

@ -2,19 +2,21 @@ register(System);
System.baseURL = '../../../';
// So that we can import packages like `core/foo`, instead of `core/src/foo`.
// So that we can import packages like `core/foo`, instead of `core/lib/foo`.
System.paths = {
'core/*': './core/src/*.js',
'change_detection/*': './change_detection/src/*.js',
'core/*': './core/lib/*.js',
'change_detection/*': './change_detection/lib/*.js',
'facade/*': './facade/lib/*.js',
'di/*': './di/src/*.js',
'di/*': './di/lib/*.js',
'rtts_assert/*': './rtts_assert/lib/*.js',
'examples/*': './examples/lib/*.js'
};
System.import('examples/todo/app').then(function(m) {
(new m.App).run();
// TODO(rado): templatize and make reusable for all examples
System.import('examples/hello_world/app').then(function(m) {
m.main();
}, function(e) {
console.error(e.stack || e);
});

18
modules/examples/src/todo/app.js
View File

@ -1,18 +0,0 @@
import {DOM} from 'facade/dom';
export class App {
constructor() {
this.input = null;
this.list = null;
}
run() {
this.input = DOM.query('input');
this.list = DOM.query('ul');
DOM.on(this.input, 'change', (evt) => this.add(evt));
}
add(evt) {
var html = DOM.getInnerHTML(this.list);
html += '<li>'+this.input.value+'</li>';
DOM.setInnerHTML(this.list, html);
this.input.value = '';
}
}

20
modules/examples/src/todo/index.html
View File

@ -1,20 +0,0 @@
<!doctype html>
<html>
<body>
<input type="text">
<ul></ul>
<% if(type === 'dart') { %>
<script src="main.dart" type="application/dart"></script>
<% } else { %>
<script src="../../../traceur-runtime.js" type="text/javascript"></script>
<script src="../../../rtts_assert/lib/rtts_assert.js" type="text/javascript"></script>
<script src="../../../es6-module-loader-sans-promises.src.js"></script>
<script src="../../../system.src.js"></script>
<script src="../../../extension-register.js"></script>
<script src="main.js" type="text/javascript"></script>
<% } %>
</body>
</html>

5
modules/examples/src/todo/main.dart
View File

@ -1,5 +0,0 @@
import 'app.dart' show App;
main() {
new App().run();
}