diff --git a/modules/examples/e2e_test/sourcemap/sourcemap_spec.es6 b/modules/examples/e2e_test/sourcemap/sourcemap_spec.es6
index 88c89aca89..291973cd5c 100644
--- a/modules/examples/e2e_test/sourcemap/sourcemap_spec.es6
+++ b/modules/examples/e2e_test/sourcemap/sourcemap_spec.es6
@@ -37,12 +37,12 @@ describe('sourcemaps', function () {
});
var finalMapData = fs.readFileSync(
- 'dist/js/prod/es6/examples/src/sourcemap/index.map');
+ 'dist/js/prod/es6/examples/src/sourcemap/index.es6.map');
var finalDecoder = new sourceMap.SourceMapConsumer(JSON.parse(finalMapData));
var finalPosition = finalDecoder.originalPositionFor(originalPosition);
- var sourceCodeLines = fs.readFileSync('modules/examples/src/sourcemap/index.js',
+ var sourceCodeLines = fs.readFileSync('modules/examples/src/sourcemap/index.ts',
{encoding: 'UTF-8'}).split('\n');
expect(sourceCodeLines[finalPosition.line - 1])
.toMatch(/throw new BaseException\(\'Sourcemap test\'\)/);
diff --git a/modules/examples/src/gestures/index.js b/modules/examples/src/gestures/index.js
deleted file mode 100644
index dc7ae3689e..0000000000
--- a/modules/examples/src/gestures/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import {bootstrap} from 'angular2/angular2';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({selector: 'gestures-app'})
-@View({templateUrl: 'template.html'})
-class GesturesCmp {
- swipeDirection: string;
- pinchScale: number;
- rotateAngle: number;
-
- constructor() {
- this.swipeDirection = '-';
- this.pinchScale = 1;
- this.rotateAngle = 0;
- }
-
- onSwipe(event) {
- this.swipeDirection = event.deltaX > 0 ? 'right' : 'left';
- }
-
- onPinch(event) {
- this.pinchScale = event.scale;
- }
-
- onRotate(event) {
- this.rotateAngle = event.rotation;
- }
-}
-
-export function main() {
- reflector.reflectionCapabilities = new ReflectionCapabilities();
- bootstrap(GesturesCmp);
-}
diff --git a/modules/examples/src/gestures/index.ts b/modules/examples/src/gestures/index.ts
new file mode 100644
index 0000000000..f63307b332
--- /dev/null
+++ b/modules/examples/src/gestures/index.ts
@@ -0,0 +1,22 @@
+import {bootstrap, Component, View} from 'angular2/angular2';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+
+@Component({selector: 'gestures-app'})
+@View({templateUrl: 'template.html'})
+class GesturesCmp {
+ swipeDirection: string = '-';
+ pinchScale: number = 1;
+ rotateAngle: number = 0;
+
+ onSwipe(event): void { this.swipeDirection = event.deltaX > 0 ? 'right' : 'left'; }
+
+ onPinch(event): void { this.pinchScale = event.scale; }
+
+ onRotate(event): void { this.rotateAngle = event.rotation; }
+}
+
+export function main() {
+ reflector.reflectionCapabilities = new ReflectionCapabilities();
+ bootstrap(GesturesCmp);
+}
diff --git a/modules/examples/src/hello_world/index.js b/modules/examples/src/hello_world/index.ts
similarity index 100%
rename from modules/examples/src/hello_world/index.js
rename to modules/examples/src/hello_world/index.ts
diff --git a/modules/examples/src/hello_world/index_common.js b/modules/examples/src/hello_world/index_common.ts
similarity index 69%
rename from modules/examples/src/hello_world/index_common.js
rename to modules/examples/src/hello_world/index_common.ts
index 2f018d7a51..b159a4c01c 100644
--- a/modules/examples/src/hello_world/index_common.js
+++ b/modules/examples/src/hello_world/index_common.ts
@@ -1,11 +1,19 @@
-import {ElementRef} from 'angular2/angular2';
-import {Injectable} from 'angular2/src/di/annotations_impl';
+import {ElementRef, Component, Directive, View, Injectable} from 'angular2/angular2';
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+// A service available to the Injector, used by the HelloCmp component.
+@Injectable()
+class GreetingService {
+ greeting: string = 'hello';
+}
+// Directives are light-weight. They don't allow new
+// expression contexts (use @Component for those needs).
+@Directive({selector: '[red]'})
+class RedDec {
+ // ElementRef is always injectable and it wraps the element on which the
+ // directive was found by the compiler.
+ constructor(el: ElementRef) { el.domElement.style.color = 'red'; }
+}
// Angular 2.0 supports 2 basic types of directives:
// - Component - the basic building blocks of Angular 2.0 apps. Backed by
@@ -28,7 +36,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
// Expressions in the template (like {{greeting}}) are evaluated in the
// context of the HelloCmp class below.
template: `
{{greeting}} world!
- `,
+ `,
// All directives used in the template need to be specified. This allows for
// modularity (RedDec can only be used in this template)
// and better tooling (the template can be invalidated if the attribute is
@@ -37,32 +45,8 @@ import {View} from 'angular2/src/core/annotations_impl/view';
})
export class HelloCmp {
greeting: string;
- constructor(service: GreetingService) {
- this.greeting = service.greeting;
- }
- changeGreeting() {
- this.greeting = 'howdy';
- }
-}
-// Directives are light-weight. They don't allow new
-// expression contexts (use @Component for those needs).
-@Directive({
- selector: '[red]'
-})
-class RedDec {
- // ElementRef is always injectable and it wraps the element on which the
- // directive was found by the compiler.
- constructor(el: ElementRef) {
- el.domElement.style.color = 'red';
- }
-}
+ constructor(service: GreetingService) { this.greeting = service.greeting; }
-// A service available to the Injector, used by the HelloCmp component.
-@Injectable()
-class GreetingService {
- greeting:string;
- constructor() {
- this.greeting = 'hello';
- }
+ changeGreeting(): void { this.greeting = 'howdy'; }
}
diff --git a/modules/examples/src/hello_world/index_dynamic.js b/modules/examples/src/hello_world/index_dynamic.ts
similarity index 100%
rename from modules/examples/src/hello_world/index_dynamic.js
rename to modules/examples/src/hello_world/index_dynamic.ts
diff --git a/modules/examples/src/key_events/index.js b/modules/examples/src/key_events/index.ts
similarity index 59%
rename from modules/examples/src/key_events/index.js
rename to modules/examples/src/key_events/index.ts
index f71250ee03..f30229e4bd 100644
--- a/modules/examples/src/key_events/index.js
+++ b/modules/examples/src/key_events/index.ts
@@ -1,18 +1,10 @@
-import {bootstrap} from 'angular2/angular2';
+import {bootstrap, Component, View} from 'angular2/angular2';
import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-// 2 imports for the Dart version:
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-@Component({
- selector: 'key-events-app'
-})
+@Component({selector: 'key-events-app'})
@View({
template: `Click in the following area and press a key to display its name:
{{lastKey}}
@@ -25,31 +17,23 @@ import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabil
>{{shiftEnter ? 'You pressed shift.enter!' : ''}}`
})
class KeyEventsApp {
- lastKey: string;
- shiftEnter: boolean;
+ lastKey: string = '(none)';
+ shiftEnter: boolean = false;
- constructor() {
- this.lastKey = '(none)';
- this.shiftEnter = false;
- }
-
- onKeyDown(event) {
+ onKeyDown(event): void {
this.lastKey = KeyEventsPlugin.getEventFullKey(event);
event.preventDefault();
}
- onShiftEnter(event) {
+ onShiftEnter(event): void {
this.shiftEnter = true;
event.preventDefault();
}
- resetShiftEnter() {
- this.shiftEnter = false;
- }
-
+ resetShiftEnter(): void { this.shiftEnter = false; }
}
export function main() {
- reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
+ reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
bootstrap(KeyEventsApp);
}
diff --git a/modules/examples/src/sourcemap/index.js b/modules/examples/src/sourcemap/index.js
deleted file mode 100644
index 5634b9697f..0000000000
--- a/modules/examples/src/sourcemap/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { BaseException, print, CONST } from 'angular2/src/facade/lang';
-import { bootstrap } from 'angular2/angular2';
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
- selector: 'error-app',
-})
-@View({
- template: `
- `,
- directives: []
-})
-export class ErrorComponent {
- createError() {
- throw new BaseException('Sourcemap test');
- }
-}
-
-export function main() {
- bootstrap(ErrorComponent);
-}
diff --git a/modules/examples/src/sourcemap/index.ts b/modules/examples/src/sourcemap/index.ts
new file mode 100644
index 0000000000..c4585c8ae4
--- /dev/null
+++ b/modules/examples/src/sourcemap/index.ts
@@ -0,0 +1,17 @@
+import {BaseException} from 'angular2/src/facade/lang';
+import {bootstrap, Component, View} from 'angular2/angular2';
+
+@Component({
+ selector: 'error-app',
+})
+@View({
+ template: `
+ `
+})
+export class ErrorComponent {
+ createError(): void { throw new BaseException('Sourcemap test'); }
+}
+
+export function main() {
+ bootstrap(ErrorComponent);
+}
diff --git a/modules/examples/src/todo/index.js b/modules/examples/src/todo/index.js
deleted file mode 100644
index 3f62c5c577..0000000000
--- a/modules/examples/src/todo/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import {bootstrap, NgFor} from 'angular2/angular2';
-import {Store, Todo, TodoFactory} from './services/TodoStore';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
- selector: 'todo-app',
- appInjector: [
- Store,
- TodoFactory
- ]
-})
-@View({
- templateUrl: 'todo.html',
- directives: [NgFor]
-})
-class TodoApp {
- todoStore: Store;
- todoEdit: Todo;
- factory: TodoFactory;
-
- constructor(store: Store, factory: TodoFactory) {
- this.todoStore = store;
- this.todoEdit = null;
- this.factory = factory;
- }
-
- enterTodo($event, inputElement) {
- if($event.which === 13) { // ENTER_KEY
- this.addTodo(inputElement.value);
- inputElement.value = '';
- }
- }
-
- editTodo(todo: Todo) {
- this.todoEdit = todo;
- }
-
- doneEditing($event, todo: Todo) {
- var which = $event.which;
- var target = $event.target;
- if(which === 13) {
- todo.title = target.value;
- this.todoEdit = null;
- } else if (which === 27) {
- this.todoEdit = null;
- target.value = todo.title;
- }
- }
-
- addTodo(newTitle: string) {
- this.todoStore.add(this.factory.create(newTitle, false));
- }
-
- completeMe(todo: Todo) {
- todo.completed = !todo.completed;
- }
-
- deleteMe(todo: Todo) {
- this.todoStore.remove(todo);
- }
-
- toggleAll($event) {
- var isComplete = $event.target.checked;
- this.todoStore.list.forEach((todo) => {
- todo.completed = isComplete;
- });
- }
-
- clearCompleted() {
- this.todoStore.removeBy((todo) => todo.completed);
- }
-}
-
-export function main() {
- reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
- bootstrap(TodoApp);
-}
diff --git a/modules/examples/src/todo/index.ts b/modules/examples/src/todo/index.ts
new file mode 100644
index 0000000000..5d7a3874f8
--- /dev/null
+++ b/modules/examples/src/todo/index.ts
@@ -0,0 +1,49 @@
+import {bootstrap, NgFor, Component, View} from 'angular2/angular2';
+import {Store, Todo, TodoFactory} from './services/TodoStore';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+
+@Component({selector: 'todo-app', appInjector: [Store, TodoFactory]})
+@View({templateUrl: 'todo.html', directives: [NgFor]})
+class TodoApp {
+ todoEdit: Todo = null;
+
+ constructor(public todoStore: Store, public factory: TodoFactory) {}
+
+ enterTodo($event, inputElement): void {
+ this.addTodo(inputElement.value);
+ inputElement.value = '';
+ }
+
+ editTodo(todo: Todo): void { this.todoEdit = todo; }
+
+ doneEditing($event, todo: Todo): void {
+ var which = $event.which;
+ var target = $event.target;
+ if (which === 13) {
+ todo.title = target.value;
+ this.todoEdit = null;
+ } else if (which === 27) {
+ this.todoEdit = null;
+ target.value = todo.title;
+ }
+ }
+
+ addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
+
+ completeMe(todo: Todo): void { todo.completed = !todo.completed; }
+
+ deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
+
+ toggleAll($event): void {
+ var isComplete = $event.target.checked;
+ this.todoStore.list.forEach((todo: Todo) => { todo.completed = isComplete; });
+ }
+
+ clearCompleted(): void { this.todoStore.removeBy((todo) => todo.completed); }
+}
+
+export function main() {
+ reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
+ bootstrap(TodoApp);
+}
diff --git a/modules/examples/src/todo/services/TodoStore.js b/modules/examples/src/todo/services/TodoStore.js
deleted file mode 100644
index 98237e342f..0000000000
--- a/modules/examples/src/todo/services/TodoStore.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
-import {ListWrapper} from 'angular2/src/facade/collection';
-
-// base model for RecordStore
-export class KeyModel {
- key:number;
- constructor(k:number) {
- this.key = k;
- }
-}
-
-export class Todo extends KeyModel {
- title: string;
- completed: boolean;
-
- constructor(key: number, theTitle: string, isCompleted: boolean) {
- super(key);
- this.title = theTitle;
- this.completed = isCompleted;
- }
-}
-
-@Injectable()
-export class TodoFactory {
- _uid: number;
-
- constructor() {
- this._uid = 0;
- }
-
- nextUid() {
- this._uid = this._uid + 1;
- return this._uid;
- }
-
- create(title: string, isCompleted: boolean) {
- return new Todo(this.nextUid(), title, isCompleted);
- }
-}
-
-// Store manages any generic item that inherits from KeyModel
-@Injectable()
-export class Store {
- list: List;
-
- constructor() {
- this.list = [];
- }
-
- add(record: KeyModel) {
- ListWrapper.push(this.list, record);
- }
-
- remove(record: KeyModel) {
- this.spliceOut(record);
- }
-
- removeBy(callback: Function) {
- var records = ListWrapper.filter(this.list, callback);
- ListWrapper.removeAll(this.list, records);
- }
-
- spliceOut(record: KeyModel) {
- var i = this.indexFor(record);
- if( i > -1 ) {
- return ListWrapper.splice(this.list, i, 1)[0];
- }
- return null;
- }
-
- indexFor(record: KeyModel) {
- return this.list.indexOf(record);
- }
-
-}
diff --git a/modules/examples/src/todo/services/TodoStore.ts b/modules/examples/src/todo/services/TodoStore.ts
new file mode 100644
index 0000000000..8f3f60d9e8
--- /dev/null
+++ b/modules/examples/src/todo/services/TodoStore.ts
@@ -0,0 +1,47 @@
+import {Injectable} from 'angular2/angular2';
+import {ListWrapper} from 'angular2/src/facade/collection';
+
+// base model for RecordStore
+export class KeyModel {
+ constructor(public key: number) {}
+}
+
+export class Todo extends KeyModel {
+ constructor(key: number, public title: string, public completed: boolean) { super(key); }
+}
+
+@Injectable()
+export class TodoFactory {
+ _uid: number = 0;
+
+ nextUid(): number { return ++this._uid; }
+
+ create(title: string, isCompleted: boolean): Todo {
+ return new Todo(this.nextUid(), title, isCompleted);
+ }
+}
+
+// Store manages any generic item that inherits from KeyModel
+@Injectable()
+export class Store {
+ list: List = [];
+
+ add(record: KeyModel): void { ListWrapper.push(this.list, record); }
+
+ remove(record: KeyModel): void { this._spliceOut(record); }
+
+ removeBy(callback: Function): void {
+ var records = ListWrapper.filter(this.list, callback);
+ ListWrapper.removeAll(this.list, records);
+ }
+
+ private _spliceOut(record: KeyModel) {
+ var i = this._indexFor(record);
+ if (i > -1) {
+ return ListWrapper.splice(this.list, i, 1)[0];
+ }
+ return null;
+ }
+
+ private _indexFor(record: KeyModel) { return this.list.indexOf(record); }
+}
diff --git a/modules/examples/src/todo/todo.html b/modules/examples/src/todo/todo.html
index 65fe995f72..2637145850 100644
--- a/modules/examples/src/todo/todo.html
+++ b/modules/examples/src/todo/todo.html
@@ -9,7 +9,7 @@
placeholder="What needs to be done?"
autofocus
#newtodo
- (keyup)="enterTodo($event, newtodo)">
+ (keyup.enter)="enterTodo($event, newtodo)">