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:
parent
1221857d17
commit
d6193e9073
10
gulpfile.js
10
gulpfile.js
|
@ -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);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// --------------
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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/
|
||||
-->
|
|
@ -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);
|
||||
});
|
|
@ -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 = '';
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -1,5 +0,0 @@
|
|||
import 'app.dart' show App;
|
||||
|
||||
main() {
|
||||
new App().run();
|
||||
}
|
|
@ -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/
|
||||
-->
|
|
@ -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();
|
Loading…
Reference in New Issue