feat(examples): adds hello-world app.

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

View File

@ -69,7 +69,8 @@ gulp.task('jsRuntime/build', function() {
var sourceTypeConfigs = {
dart: {
transpileSrc: ['modules/**/*.js'],
htmlSrc: ['modules/*/src/**/*.html'],
// pub serve uses project_root/web for static serving.
htmlSrc: ['modules/*/src/**/*.html', 'modules/*/web/*.html'],
copySrc: ['modules/**/*.dart'],
outputDir: 'build/dart',
outputExt: 'dart',
@ -296,7 +297,7 @@ gulp.task('benchmarks/build.dart', function() {
// ------------------
// WEB SERVER
// WEB SERVERS
gulp.task('serve', function() {
connect.server({
@ -315,6 +316,11 @@ gulp.task('serve', function() {
})();
});
gulp.task('examples/pub.serve', function(done) {
spawn('pub', ['serve'], {cwd: 'build/dart/examples', stdio: 'inherit'})
.on('done', done);
});
// --------------

View File

@ -2,6 +2,7 @@
* Define public API for Angular here
*/
export * from './annotations/directive';
export * from './annotations/decorator';
export * from './annotations/component';
export * from './annotations/template_config';
@ -15,3 +16,4 @@ export * from './compiler/compiler';
export * from './compiler/template_loader';
export * from './compiler/view';
export * from 'core/dom/element';

View File

@ -4,7 +4,10 @@ environment:
dependencies:
facade:
path: ../facade
core:
path: ../core
browser: '>=0.10.0 <0.11.0'
dev_dependencies:
test_lib:
path: ../test_lib
guinness: ">=0.1.16 <0.2.0"
guinness: ">=0.1.16 <0.2.0"

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);
}

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/
-->

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);
});

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 = '';
}
}

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>

View File

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

View File

@ -0,0 +1,20 @@
<!doctype html>
<html>
<head>
<title>Hello Angular 2.0 (Dart)</title>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<hello-app>
Loading...
</hello-app>
</body>
</html>
<!-- to run do:
1) gulp build
2) gulp examples/pub.serve
3) open localhost:8080 in dartium or chrome.
TODO(rado): merge with JS's index.html in ../src/hello_world/
-->

View File

@ -0,0 +1,4 @@
import 'packages/examples/hello_world/app.dart' as HelloWorldApp;
// TODO(rado): templatize and make reusable for all examples.
main() => HelloWorldApp.main();