Skip to content

Commit 3a8e166

Browse files
vsavkinvsavkin
committed
examples: added an example of a crud app
1 parent 0598226 commit 3a8e166

File tree

9 files changed

+498
-0
lines changed

9 files changed

+498
-0
lines changed

‎modules/examples/e2e_test/order_management/order_management_spec.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
library examples.e2e_test.order_management_spec;
2+
3+
main() {
4+
5+
}

‎modules/examples/e2e_test/order_management/order_management_spec.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
2+
3+
describe('Order Management CRUD', function() {
4+
var URL = 'examples/src/order_management/index.html';
5+
6+
it('should work', function() {
7+
browser.get(URL);
8+
verifyNoBrowserErrors();
9+
});
10+
});

‎modules/examples/e2e_test/person_management/person_management_spec.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
library examples.e2e_test.person_management_spec;
2+
3+
main() {
4+
5+
}

‎modules/examples/e2e_test/person_management/person_management_spec.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
2+
3+
describe('Person Management CRUD', function() {
4+
var URL = 'examples/src/person_management/index.html';
5+
6+
it('should work', function() {
7+
browser.get(URL);
8+
verifyNoBrowserErrors();
9+
});
10+
});

‎modules/examples/src/order_management/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Order Management</title>
5+
<style>
6+
.warning {
7+
background-color: yellow;
8+
}
9+
</style>
10+
</head>
11+
12+
<body>
13+
<order-management-app>
14+
Loading...
15+
</order-management-app>
16+
17+
$SCRIPTS$
18+
</body>
19+
</html>

‎modules/examples/src/order_management/index.ts‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import {
2+
bootstrap,
3+
onChange,
4+
NgIf,
5+
NgFor,
6+
Component,
7+
Directive,
8+
View,
9+
Ancestor,
10+
NgValidator,
11+
forwardRef,
12+
Binding,
13+
EventEmitter
14+
} from 'angular2/angular2';
15+
16+
import {formDirectives} from 'angular2/forms';
17+
18+
import {ListWrapper} from 'angular2/src/facade/collection';
19+
20+
import {reflector} from 'angular2/src/reflection/reflection';
21+
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
22+
23+
/**
24+
* You can find the Angular 1 implementation of this example here:
25+
* https://github.com/wardbell/ng1DataBinding
26+
*/
27+
28+
// ---- model
29+
30+
class OrderItem {
31+
constructor(public orderItemId: number, public orderId: number, public productName: string,
32+
public qty: number, public unitPrice: number) {}
33+
34+
get total(): number { return this.qty * this.unitPrice; }
35+
}
36+
37+
class Order {
38+
constructor(public orderId: number, public customerName: string, public limit: number,
39+
private dataService: DataService) {}
40+
41+
get items(): OrderItem[] { return this.dataService.itemsFor(this); }
42+
get total(): number { return this.items.map(i => i.total).reduce((a, b) => a + b); }
43+
}
44+
45+
46+
47+
// ---- services
48+
49+
var _nextId = 1000;
50+
class DataService {
51+
orderItems: OrderItem[];
52+
orders: Order[];
53+
currentOrder: Order = null;
54+
55+
constructor() {
56+
this.orders = [
57+
new Order(_nextId++, "J. Coltrane", 100, this),
58+
new Order(_nextId++, "B. Evans", 200, this)
59+
];
60+
61+
this.orderItems = [
62+
new OrderItem(_nextId++, this.orders[0].orderId, "Bread", 5, 1),
63+
new OrderItem(_nextId++, this.orders[0].orderId, "Brie", 5, 2),
64+
new OrderItem(_nextId++, this.orders[0].orderId, "IPA", 5, 3),
65+
66+
new OrderItem(_nextId++, this.orders[1].orderId, "Mozzarella", 5, 2),
67+
new OrderItem(_nextId++, this.orders[1].orderId, "Wine", 5, 3)
68+
];
69+
}
70+
71+
itemsFor(order: Order): OrderItem[] {
72+
return ListWrapper.filter(this.orderItems, i => i.orderId === order.orderId);
73+
}
74+
75+
addItemForOrder(order: Order): void {
76+
this.orderItems.push(new OrderItem(_nextId++, order.orderId, "", 0, 0));
77+
}
78+
79+
deleteItem(item: OrderItem): void { ListWrapper.remove(this.orderItems, item); }
80+
}
81+
82+
83+
84+
// ---- components
85+
86+
@Component({selector: 'order-list-cmp'})
87+
@View({
88+
template: `
89+
<h1>Orders</h1>
90+
<div *ng-for="#order of orders" [class.warning]="order.total > order.limit">
91+
<div>
92+
<label>Customer name:</label>
93+
{{order.customerName}}
94+
</div>
95+
96+
<div>
97+
<label>Limit: <input [(ng-model)]="order.limit" type="number" placeholder="Limit"></label>
98+
</div>
99+
100+
<div>
101+
<label>Number of items:</label>
102+
{{order.items.length}}
103+
</div>
104+
105+
<div>
106+
<label>Order total:</label>
107+
{{order.total}}
108+
</div>
109+
110+
<button (click)="select(order)">Select</button>
111+
</div>
112+
`,
113+
directives: [formDirectives, NgFor]
114+
})
115+
class OrderListComponent {
116+
orders: Order[];
117+
118+
constructor(private service: DataService) { this.orders = service.orders; }
119+
select(order: Order): void { this.service.currentOrder = order; }
120+
}
121+
122+
123+
@Component({selector: 'order-item-cmp', properties: ['item'], events: ['delete']})
124+
@View({
125+
template: `
126+
<div>
127+
<div>
128+
<label>Product name: <input [(ng-model)]="item.productName" type="text" placeholder="Product name"></label>
129+
</div>
130+
131+
<div>
132+
<label>Quantity: <input [(ng-model)]="item.qty" type="number" placeholder="Quantity"></label>
133+
</div>
134+
135+
<div>
136+
<label>Unit Price: <input [(ng-model)]="item.unitPrice" type="number" placeholder="Unit price"></label>
137+
</div>
138+
139+
<div>
140+
<label>Total:</label>
141+
{{item.total}}
142+
</div>
143+
144+
<button (click)="onDelete()">Delete</button>
145+
</div>
146+
`,
147+
directives: [formDirectives]
148+
})
149+
class OrderItemComponent {
150+
item: OrderItem;
151+
delete = new EventEmitter();
152+
153+
onDelete(): void { this.delete.next(this.item); }
154+
}
155+
156+
@Component({selector: 'order-details-cmp'})
157+
@View({
158+
template: `
159+
<div *ng-if="order !== null">
160+
<h1>Selected Order</h1>
161+
<div>
162+
<label>Customer name: <input [(ng-model)]="order.customerName" type="text" placeholder="Customer name"></label>
163+
</div>
164+
165+
<div>
166+
<label>Limit: <input [(ng-model)]="order.limit" type="number" placeholder="Limit"></label>
167+
</div>
168+
169+
<div>
170+
<label>Number of items:</label>
171+
{{order.items.length}}
172+
</div>
173+
174+
<div>
175+
<label>Order total:</label>
176+
{{order.total}}
177+
</div>
178+
179+
<h2>Items</h2>
180+
<button (click)="addItem()">Add Item</button>
181+
<order-item-cmp *ng-for="#item of order.items" [item]="item" (delete)="deleteItem(item)"></order-item-cmp>
182+
</div>
183+
`,
184+
directives: [formDirectives, OrderItemComponent, NgFor, NgIf]
185+
})
186+
class OrderDetailsComponent {
187+
constructor(private service: DataService) {}
188+
189+
get order(): Order { return this.service.currentOrder; }
190+
191+
deleteItem(item: OrderItem): void { this.service.deleteItem(item); }
192+
193+
addItem(): void { this.service.addItemForOrder(this.order); }
194+
}
195+
196+
@Component({selector: 'order-management-app', viewInjector: [DataService]})
197+
@View({
198+
template: `
199+
<order-list-cmp></order-list-cmp>
200+
<order-details-cmp></order-details-cmp>
201+
`,
202+
directives: [OrderListComponent, OrderDetailsComponent]
203+
})
204+
class OrderManagementApplication {
205+
}
206+
207+
export function main() {
208+
reflector.reflectionCapabilities = new ReflectionCapabilities();
209+
bootstrap(OrderManagementApplication);
210+
}

‎modules/examples/src/person_management/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Person Management</title>
5+
<style>
6+
.ng-touched.ng-invalid {
7+
border-color: red;
8+
}
9+
</style>
10+
</head>
11+
12+
<body>
13+
<person-management-app>
14+
Loading...
15+
</person-management-app>
16+
17+
$SCRIPTS$
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)