diff --git a/modules/examples/e2e_test/order_management/order_management_spec.dart b/modules/examples/e2e_test/order_management/order_management_spec.dart new file mode 100644 index 0000000000..25cb9917f1 --- /dev/null +++ b/modules/examples/e2e_test/order_management/order_management_spec.dart @@ -0,0 +1,5 @@ +library examples.e2e_test.order_management_spec; + +main() { + +} diff --git a/modules/examples/e2e_test/order_management/order_management_spec.ts b/modules/examples/e2e_test/order_management/order_management_spec.ts new file mode 100644 index 0000000000..1e6e667830 --- /dev/null +++ b/modules/examples/e2e_test/order_management/order_management_spec.ts @@ -0,0 +1,10 @@ +import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util'; + +describe('Order Management CRUD', function() { + var URL = 'examples/src/order_management/index.html'; + + it('should work', function() { + browser.get(URL); + verifyNoBrowserErrors(); + }); +}); diff --git a/modules/examples/e2e_test/person_management/person_management_spec.dart b/modules/examples/e2e_test/person_management/person_management_spec.dart new file mode 100644 index 0000000000..49b417e414 --- /dev/null +++ b/modules/examples/e2e_test/person_management/person_management_spec.dart @@ -0,0 +1,5 @@ +library examples.e2e_test.person_management_spec; + +main() { + +} diff --git a/modules/examples/e2e_test/person_management/person_management_spec.ts b/modules/examples/e2e_test/person_management/person_management_spec.ts new file mode 100644 index 0000000000..1284098f36 --- /dev/null +++ b/modules/examples/e2e_test/person_management/person_management_spec.ts @@ -0,0 +1,10 @@ +import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util'; + +describe('Person Management CRUD', function() { + var URL = 'examples/src/person_management/index.html'; + + it('should work', function() { + browser.get(URL); + verifyNoBrowserErrors(); + }); +}); diff --git a/modules/examples/src/order_management/index.html b/modules/examples/src/order_management/index.html new file mode 100644 index 0000000000..5b733f29cc --- /dev/null +++ b/modules/examples/src/order_management/index.html @@ -0,0 +1,19 @@ + + + + Order Management + + + + + + Loading... + + + $SCRIPTS$ + + diff --git a/modules/examples/src/order_management/index.ts b/modules/examples/src/order_management/index.ts new file mode 100644 index 0000000000..fd7b8732d6 --- /dev/null +++ b/modules/examples/src/order_management/index.ts @@ -0,0 +1,210 @@ +import { + bootstrap, + onChange, + NgIf, + NgFor, + Component, + Directive, + View, + Ancestor, + NgValidator, + forwardRef, + Binding, + EventEmitter +} from 'angular2/angular2'; + +import {formDirectives} from 'angular2/forms'; + +import {ListWrapper} from 'angular2/src/facade/collection'; + +import {reflector} from 'angular2/src/reflection/reflection'; +import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities'; + +/** + * You can find the Angular 1 implementation of this example here: + * https://github.com/wardbell/ng1DataBinding + */ + +// ---- model + +class OrderItem { + constructor(public orderItemId: number, public orderId: number, public productName: string, + public qty: number, public unitPrice: number) {} + + get total(): number { return this.qty * this.unitPrice; } +} + +class Order { + constructor(public orderId: number, public customerName: string, public limit: number, + private dataService: DataService) {} + + get items(): OrderItem[] { return this.dataService.itemsFor(this); } + get total(): number { return this.items.map(i => i.total).reduce((a, b) => a + b); } +} + + + +// ---- services + +var _nextId = 1000; +class DataService { + orderItems: OrderItem[]; + orders: Order[]; + currentOrder: Order = null; + + constructor() { + this.orders = [ + new Order(_nextId++, "J. Coltrane", 100, this), + new Order(_nextId++, "B. Evans", 200, this) + ]; + + this.orderItems = [ + new OrderItem(_nextId++, this.orders[0].orderId, "Bread", 5, 1), + new OrderItem(_nextId++, this.orders[0].orderId, "Brie", 5, 2), + new OrderItem(_nextId++, this.orders[0].orderId, "IPA", 5, 3), + + new OrderItem(_nextId++, this.orders[1].orderId, "Mozzarella", 5, 2), + new OrderItem(_nextId++, this.orders[1].orderId, "Wine", 5, 3) + ]; + } + + itemsFor(order: Order): OrderItem[] { + return ListWrapper.filter(this.orderItems, i => i.orderId === order.orderId); + } + + addItemForOrder(order: Order): void { + this.orderItems.push(new OrderItem(_nextId++, order.orderId, "", 0, 0)); + } + + deleteItem(item: OrderItem): void { ListWrapper.remove(this.orderItems, item); } +} + + + +// ---- components + +@Component({selector: 'order-list-cmp'}) +@View({ + template: ` +

Orders

+
+
+ + {{order.customerName}} +
+ +
+ +
+ +
+ + {{order.items.length}} +
+ +
+ + {{order.total}} +
+ + +
+ `, + directives: [formDirectives, NgFor] +}) +class OrderListComponent { + orders: Order[]; + + constructor(private service: DataService) { this.orders = service.orders; } + select(order: Order): void { this.service.currentOrder = order; } +} + + +@Component({selector: 'order-item-cmp', properties: ['item'], events: ['delete']}) +@View({ + template: ` +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ + {{item.total}} +
+ + +
+ `, + directives: [formDirectives] +}) +class OrderItemComponent { + item: OrderItem; + delete = new EventEmitter(); + + onDelete(): void { this.delete.next(this.item); } +} + +@Component({selector: 'order-details-cmp'}) +@View({ + template: ` +
+

Selected Order

+
+ +
+ +
+ +
+ +
+ + {{order.items.length}} +
+ +
+ + {{order.total}} +
+ +

Items

+ + +
+ `, + directives: [formDirectives, OrderItemComponent, NgFor, NgIf] +}) +class OrderDetailsComponent { + constructor(private service: DataService) {} + + get order(): Order { return this.service.currentOrder; } + + deleteItem(item: OrderItem): void { this.service.deleteItem(item); } + + addItem(): void { this.service.addItemForOrder(this.order); } +} + +@Component({selector: 'order-management-app', viewInjector: [DataService]}) +@View({ + template: ` + + + `, + directives: [OrderListComponent, OrderDetailsComponent] +}) +class OrderManagementApplication { +} + +export function main() { + reflector.reflectionCapabilities = new ReflectionCapabilities(); + bootstrap(OrderManagementApplication); +} diff --git a/modules/examples/src/person_management/index.html b/modules/examples/src/person_management/index.html new file mode 100644 index 0000000000..70630d911e --- /dev/null +++ b/modules/examples/src/person_management/index.html @@ -0,0 +1,19 @@ + + + + Person Management + + + + + + Loading... + + + $SCRIPTS$ + + diff --git a/modules/examples/src/person_management/index.ts b/modules/examples/src/person_management/index.ts new file mode 100644 index 0000000000..2c9e87ac3b --- /dev/null +++ b/modules/examples/src/person_management/index.ts @@ -0,0 +1,218 @@ +import { + bootstrap, + onChange, + NgIf, + NgFor, + Component, + Directive, + View, + Ancestor, + NgValidator, + forwardRef, + Binding +} from 'angular2/angular2'; + +import {formDirectives} from 'angular2/forms'; + +import {RegExpWrapper, print, isPresent, CONST_EXPR} from 'angular2/src/facade/lang'; + +import {reflector} from 'angular2/src/reflection/reflection'; +import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities'; + + +/** + * You can find the Angular 1 implementation of this example here: + * https://github.com/wardbell/ng1DataBinding + */ + +// ---- model + +var _nextId = 1; +class Person { + personId: number; + mom: Person; + dad: Person; + friends: Person[]; + + constructor(public firstName: string, public lastName: string, public yearOfBirth: number) { + this.personId = _nextId++; + this.firstName = firstName; + this.lastName = lastName; + this.mom = null; + this.dad = null; + this.friends = []; + this.personId = _nextId++; + } + + get age(): number { return 2015 - this.yearOfBirth; } + get fullName(): string { return `${this.firstName} ${this.lastName}`; } + get friendNames(): string { return this.friends.map(f => f.fullName).join(', '); } +} + + + +// ---- services + +class DataService { + currentPerson: Person; + persons: Person[]; + + constructor() { + this.persons = [ + new Person('Victor', 'Savkin', 1930), + new Person('Igor', 'Minar', 1920), + new Person('John', 'Papa', 1910), + new Person('Nancy', 'Duarte', 1910), + new Person('Jack', 'Papa', 1910), + new Person('Jill', 'Papa', 1910), + new Person('Ward', 'Bell', 1910), + new Person('Robert', 'Bell', 1910), + new Person('Tracy', 'Ward', 1910), + new Person('Dan', 'Wahlin', 1910) + ]; + + this.persons[0].friends = [0, 1, 2, 6, 9].map(_ => this.persons[_]); + this.persons[1].friends = [0, 2, 6, 9].map(_ => this.persons[_]); + this.persons[2].friends = [0, 1, 6, 9].map(_ => this.persons[_]); + this.persons[6].friends = [0, 1, 2, 9].map(_ => this.persons[_]); + this.persons[9].friends = [0, 1, 2, 6].map(_ => this.persons[_]); + + this.persons[2].mom = this.persons[5]; + this.persons[2].dad = this.persons[4]; + this.persons[6].mom = this.persons[8]; + this.persons[6].dad = this.persons[7]; + + this.currentPerson = this.persons[0]; + } +} + + + +// ---- components + +@Component({selector: 'full-name-cmp'}) +@View({ + template: ` +

Edit Full Name

+
+
+
+ +
+ +
+ +
+ +
+ +
+
+
+ `, + directives: [formDirectives] +}) +class FullNameComponent { + constructor(private service: DataService) {} + get person(): Person { return this.service.currentPerson; } +} + +@Component({selector: 'person-detail-cmp'}) +@View({ + template: ` +

{{person.fullName}}

+ +
+
+
+ +
+ +
+ +
+ +
+ + Age: {{person.age}} +
\ + +
+ + + + {{person.mom.fullName}} +
+ +
+ + + + {{person.dad.fullName}} +
+ +
+ + {{person.friendNames}} +
+
+
+ `, + directives: [formDirectives, NgIf] +}) +class PersonsDetailComponent { + constructor(private service: DataService) {} + get person(): Person { return this.service.currentPerson; } +} + +@Component({selector: 'persons-cmp'}) +@View({ + template: ` +

FullName Demo

+
+ + + +
+ `, + directives: [formDirectives, PersonsDetailComponent, NgFor] +}) +class PersonsComponent { + persons: Person[]; + + constructor(private service: DataService) { this.persons = service.persons; } + + select(person: Person): void { this.service.currentPerson = person; } +} + + +@Component({selector: 'person-management-app', viewInjector: [DataService]}) +@View({ + template: ` + + + + + + `, + directives: [FullNameComponent, PersonsComponent, NgIf] +}) +class PersonManagementApplication { + mode: string; + + switchToEditName(): void { this.mode = 'editName'; } + switchToPersonList(): void { this.mode = 'personList'; } +} + +export function main() { + reflector.reflectionCapabilities = new ReflectionCapabilities(); + bootstrap(PersonManagementApplication); +} diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts index bc75900fd1..50b08b5495 100644 --- a/tools/broccoli/trees/browser_tree.ts +++ b/tools/broccoli/trees/browser_tree.ts @@ -40,6 +40,8 @@ const kServedPaths = [ 'examples/src/benchpress', 'examples/src/model_driven_forms', 'examples/src/template_driven_forms', + 'examples/src/person_management', + 'examples/src/order_management', 'examples/src/gestures', 'examples/src/hello_world', 'examples/src/http',