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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
gulpfile.js
View File

@ -69,7 +69,8 @@ gulp.task('jsRuntime/build', function() {
var sourceTypeConfigs = { var sourceTypeConfigs = {
dart: { dart: {
transpileSrc: ['modules/**/*.js'], 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'], copySrc: ['modules/**/*.dart'],
outputDir: 'build/dart', outputDir: 'build/dart',
outputExt: 'dart', outputExt: 'dart',
@ -296,7 +297,7 @@ gulp.task('benchmarks/build.dart', function() {
// ------------------ // ------------------
// WEB SERVER // WEB SERVERS
gulp.task('serve', function() { gulp.task('serve', function() {
connect.server({ 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
modules/core/src/core.js
View File

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

5
modules/examples/pubspec.yaml
View File

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

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 = '../../../'; 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 = { System.paths = {
'core/*': './core/src/*.js', 'core/*': './core/lib/*.js',
'change_detection/*': './change_detection/src/*.js', 'change_detection/*': './change_detection/lib/*.js',
'facade/*': './facade/lib/*.js', 'facade/*': './facade/lib/*.js',
'di/*': './di/src/*.js', 'di/*': './di/lib/*.js',
'rtts_assert/*': './rtts_assert/lib/*.js', 'rtts_assert/*': './rtts_assert/lib/*.js',
'examples/*': './examples/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) { }, function(e) {
console.error(e.stack || 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();
}

20
modules/examples/web/index.html Normal file
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/
-->

4
modules/examples/web/main.dart Normal file
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();