honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ngUpgrade): simple example

Browse Source
This commit is contained in:
Misko Hevery 2015-10-10 22:04:52 -07:00
parent cf9d4662c9
commit 9d0d33f95a
5 changed files with 103 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
modules/playground/src/upgrade/index.dart Normal file
View File

@ -0,0 +1,5 @@
library angualr2.playground.upgrade.index;
main() {
// do nothing
}

22
modules/playground/src/upgrade/index.html Normal file
View File

@ -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>

74
modules/playground/src/upgrade/index.ts Normal file
View File

@ -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']);
}

1
tools/broccoli/html-replace/SCRIPTS.html
View File

@ -5,6 +5,7 @@
baseURL: '/', baseURL: '/',
packages: { packages: {
'angular2_material': {defaultExtension: 'js'}, 'angular2_material': {defaultExtension: 'js'},
'upgrade': {defaultExtension: 'js'},
'benchmarks': {defaultExtension: 'js'}, 'benchmarks': {defaultExtension: 'js'},
'playground': {defaultExtension: 'js'}, 'playground': {defaultExtension: 'js'},
// TODO(rado): These helpers don't end up in the bundle, thus they should // TODO(rado): These helpers don't end up in the bundle, thus they should

1
tools/broccoli/trees/browser_tree.ts
View File

@ -50,6 +50,7 @@ const kServedPaths = [
'playground/src/routing', 'playground/src/routing',
'playground/src/sourcemap', 'playground/src/sourcemap',
'playground/src/todo', 'playground/src/todo',
'playground/src/upgrade',
'playground/src/zippy_component', 'playground/src/zippy_component',
'playground/src/async', 'playground/src/async',
'playground/src/material/button', 'playground/src/material/button',