diff --git a/modules/playground/src/upgrade/index.dart b/modules/playground/src/upgrade/index.dart new file mode 100644 index 0000000000..d9a5117bcd --- /dev/null +++ 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 new file mode 100644 index 0000000000..f3d8ebd9c7 --- /dev/null +++ b/modules/playground/src/upgrade/index.html @@ -0,0 +1,22 @@ + + + Angular Upgrade 2.0 + + + + Your name: +
+ Greetings from {{name}}! + + + $SCRIPTS$ + + diff --git a/modules/playground/src/upgrade/index.ts b/modules/playground/src/upgrade/index.ts new file mode 100644 index 0000000000..8680421ab2 --- /dev/null +++ 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}} +
+ ` + }; +}); + +@Component({ + selector: 'pane', + template: `
+
{{title}}
+
+
`, + styles: styles +}) +class Pane { + @Input() title: string; +} + + +@Component({ + selector: 'upgrade-app', + template: `
+ + + + + + +
+ +
`, + 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 index 0402ad59c7..9f4e94729a 100644 --- 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 index a5a1f2e5ff..bb02085405 100644 --- 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',