iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(playground): update the order management example to use the recommended APIs

Browse Source
This commit is contained in:
vsavkin 2015-11-02 12:49:22 -08:00 committed by Victor Savkin
parent c814dfbfa5
commit bf07f9c3e1
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
modules/playground/src/order_management/index.ts
View File

@ -10,7 +10,9 @@ import {
Provider, Provider,
EventEmitter, EventEmitter,
FORM_DIRECTIVES, FORM_DIRECTIVES,
Injectable Injectable,
Input,
Output
} from 'angular2/core'; } from 'angular2/core';
import {ListWrapper} from 'angular2/src/core/facade/collection'; import {ListWrapper} from 'angular2/src/core/facade/collection';
@ -79,8 +81,8 @@ class DataService {
// ---- components // ---- components
@Component({selector: 'order-list-cmp'}) @Component({
@View({ selector: 'order-list-cmp',
template: ` template: `
<h1>Orders</h1> <h1>Orders</h1>
<div *ng-for="#order of orders" [class.warning]="order.total > order.limit"> <div *ng-for="#order of orders" [class.warning]="order.total > order.limit">
@ -116,8 +118,8 @@ class OrderListComponent {
} }
@Component({selector: 'order-item-cmp', inputs: ['item'], outputs: ['delete']}) @Component({
@View({ selector: 'order-item-cmp',
template: ` template: `
<div> <div>
<div> <div>
@ -143,14 +145,14 @@ class OrderListComponent {
directives: [FORM_DIRECTIVES] directives: [FORM_DIRECTIVES]
}) })
class OrderItemComponent { class OrderItemComponent {
item: OrderItem; @Input() item: OrderItem;
delete = new EventEmitter(); @Output() delete = new EventEmitter();
onDelete(): void { this.delete.next(this.item); } onDelete(): void { this.delete.next(this.item); }
} }
@Component({selector: 'order-details-cmp'}) @Component({
@View({ selector: 'order-details-cmp',
template: ` template: `
<div *ng-if="order !== null"> <div *ng-if="order !== null">
<h1>Selected Order</h1> <h1>Selected Order</h1>
@ -189,8 +191,9 @@ class OrderDetailsComponent {
addItem(): void { this._service.addItemForOrder(this.order); } addItem(): void { this._service.addItemForOrder(this.order); }
} }
@Component({selector: 'order-management-app', bindings: [DataService]}) @Component({
@View({ selector: 'order-management-app',
providers: [DataService],
template: ` template: `
<order-list-cmp></order-list-cmp> <order-list-cmp></order-list-cmp>
<order-details-cmp></order-details-cmp> <order-details-cmp></order-details-cmp>