From d6193e90736839475ab78b6b4f51958419682b9a Mon Sep 17 00:00:00 2001
From: Rado Kirov <radokirov@google.com>
Date: Fri, 7 Nov 2014 14:30:04 -0800
Subject: [PATCH] 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'
---
 gulpfile.js                                   | 10 ++++--
 modules/core/src/core.js                      |  2 ++
 modules/examples/pubspec.yaml                 |  5 ++-
 modules/examples/src/hello_world/app.js       | 34 +++++++++++++++++++
 modules/examples/src/hello_world/index.html   | 23 +++++++++++++
 .../src/{todo => hello_world}/main.es5        | 14 ++++----
 modules/examples/src/todo/app.js              | 18 ----------
 modules/examples/src/todo/index.html          | 20 -----------
 modules/examples/src/todo/main.dart           |  5 ---
 modules/examples/web/index.html               | 20 +++++++++++
 modules/examples/web/main.dart                |  4 +++
 11 files changed, 103 insertions(+), 52 deletions(-)
 create mode 100644 modules/examples/src/hello_world/app.js
 create mode 100644 modules/examples/src/hello_world/index.html
 rename modules/examples/src/{todo => hello_world}/main.es5 (53%)
 delete mode 100644 modules/examples/src/todo/app.js
 delete mode 100644 modules/examples/src/todo/index.html
 delete mode 100644 modules/examples/src/todo/main.dart
 create mode 100644 modules/examples/web/index.html
 create mode 100644 modules/examples/web/main.dart

diff --git a/gulpfile.js b/gulpfile.js
index 9e12420bac..d68d7b524c 100644
--- a/gulpfile.js
+++ b/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);
+});
+
 
 
 // --------------
diff --git a/modules/core/src/core.js b/modules/core/src/core.js
index 4005cae8e9..3100726be7 100644
--- a/modules/core/src/core.js
+++ b/modules/core/src/core.js
@@ -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';
diff --git a/modules/examples/pubspec.yaml b/modules/examples/pubspec.yaml
index e3073e09a1..d7b2a9ded8 100644
--- a/modules/examples/pubspec.yaml
+++ b/modules/examples/pubspec.yaml
@@ -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"
\ No newline at end of file
+  guinness: ">=0.1.16 <0.2.0"
diff --git a/modules/examples/src/hello_world/app.js b/modules/examples/src/hello_world/app.js
new file mode 100644
index 0000000000..d204768328
--- /dev/null
+++ b/modules/examples/src/hello_world/app.js
@@ -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);
+}
diff --git a/modules/examples/src/hello_world/index.html b/modules/examples/src/hello_world/index.html
new file mode 100644
index 0000000000..a86ced24ea
--- /dev/null
+++ b/modules/examples/src/hello_world/index.html
@@ -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/
+-->
diff --git a/modules/examples/src/todo/main.es5 b/modules/examples/src/hello_world/main.es5
similarity index 53%
rename from modules/examples/src/todo/main.es5
rename to modules/examples/src/hello_world/main.es5
index adfb17c8db..bde7f994b1 100644
--- a/modules/examples/src/todo/main.es5
+++ b/modules/examples/src/hello_world/main.es5
@@ -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);
 });
diff --git a/modules/examples/src/todo/app.js b/modules/examples/src/todo/app.js
deleted file mode 100644
index a8a8c0d7fc..0000000000
--- a/modules/examples/src/todo/app.js
+++ /dev/null
@@ -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 = '';
-  }
-}
diff --git a/modules/examples/src/todo/index.html b/modules/examples/src/todo/index.html
deleted file mode 100644
index c610f1a0a3..0000000000
--- a/modules/examples/src/todo/index.html
+++ /dev/null
@@ -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>
diff --git a/modules/examples/src/todo/main.dart b/modules/examples/src/todo/main.dart
deleted file mode 100644
index 614239e433..0000000000
--- a/modules/examples/src/todo/main.dart
+++ /dev/null
@@ -1,5 +0,0 @@
-import 'app.dart' show App;
-
-main() {
-  new App().run();
-}
\ No newline at end of file
diff --git a/modules/examples/web/index.html b/modules/examples/web/index.html
new file mode 100644
index 0000000000..900b2c7a4b
--- /dev/null
+++ b/modules/examples/web/index.html
@@ -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/
+-->
diff --git a/modules/examples/web/main.dart b/modules/examples/web/main.dart
new file mode 100644
index 0000000000..d4dd39d888
--- /dev/null
+++ b/modules/examples/web/main.dart
@@ -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();