feat(ngUpgrade): simple example

mhevery · mhevery · commit 9d0d33f95a8f · 2015-10-19T12:43:28.000-07:00
diff --git a/modules/playground/src/upgrade/index.dart b/modules/playground/src/upgrade/index.dart
@@ -0,0 +1,5 @@
+library angualr2.playground.upgrade.index;
+
+main() {
+  // do nothing
+}
diff --git a/modules/playground/src/upgrade/index.html b/modules/playground/src/upgrade/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <title>Angular Upgrade 2.0</title>
+  <style>
+    user {
+      background-color: lightyellow;
+      border: 2px solid darkorange;
+      display: inline-block;
+      width: 150px;
+      padding: 1em;
+    }
+  </style>
+<body>
+  <upgrade-app ng-controller="Index" [user]="name" (reset)="name=''">
+    Your name: <input ng-model="name">
+    <hr>
+    <span class="greeting">Greetings from {{name}}!</span>
+  </upgrade-app>
+  <script src="/benchmarks_external/src/angular.js"></script>
+  $SCRIPTS$
+</body>
+</html>
diff --git a/modules/playground/src/upgrade/index.ts b/modules/playground/src/upgrade/index.ts
@@ -0,0 +1,74 @@
+import {Component, Input, Output, EventEmitter} from 'angular2/angular2';
+import {UpgradeAdapter} from 'upgrade/upgrade';
+
+var styles = [
+  `
+    .border {
+      border: solid 2px DodgerBlue;
+    }
+    .title {
+      background-color: LightSkyBlue;
+      padding: .2em 1em;
+      font-size: 1.2em;
+    }
+    .content {
+      padding: 1em;
+    }
+  `
+];
+
+var adapter: UpgradeAdapter = new UpgradeAdapter();
+
+var ng1module = angular.module('myExample', []);
+
+ng1module.controller('Index', function($scope) { $scope.name = 'World'; });
+
+ng1module.directive('user', function() {
+  return {
+    scope: {handle: '@', reset: '&'},
+    template: `
+      User: {{handle}}
+      <hr>
+      <button ng-click="reset()">clear</button>`
+  };
+});
+
+@Component({
+  selector: 'pane',
+  template: `<div class="border">
+    <div class="title">{{title}}</div>
+    <div class="content"><ng-content></ng-content></div>
+    </div>`,
+  styles: styles
+})
+class Pane {
+  @Input() title: string;
+}
+
+
+@Component({
+  selector: 'upgrade-app',
+  template: `<div class="border">
+      <pane title="Title: {{user}}">
+        <table cellpadding="3">
+          <tr>
+            <td><ng-content></ng-content></td>
+            <td><user [handle]="user" (reset)="reset.next()"></user></td>
+          </tr>
+        </table>
+      </pane>
+    </div>`,
+  styles: styles,
+  directives: [Pane, adapter.upgradeNg1Component('user')]
+})
+class UpgradeApp {
+  @Input() user: string;
+  @Output() reset = new EventEmitter();
+  constructor() {}
+}
+
+ng1module.directive('upgradeApp', adapter.downgradeNg2Component(UpgradeApp));
+
+export function main() {
+  adapter.bootstrap(document.body, ['myExample']);
+}
diff --git a/tools/broccoli/html-replace/SCRIPTS.html b/tools/broccoli/html-replace/SCRIPTS.html
@@ -5,6 +5,7 @@
     baseURL: '/',
     packages: {
       'angular2_material': {defaultExtension: 'js'},
+      'upgrade': {defaultExtension: 'js'},
       'benchmarks': {defaultExtension: 'js'},
       'playground': {defaultExtension: 'js'},
       // TODO(rado): These helpers don't end up in the bundle, thus they should
diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts
@@ -50,6 +50,7 @@ const kServedPaths = [
   'playground/src/routing',
   'playground/src/sourcemap',
   'playground/src/todo',
+  'playground/src/upgrade',
   'playground/src/zippy_component',
   'playground/src/async',
   'playground/src/material/button',
